trustTheProcess(3) – ASCII Blobs

By loading the video, you agree to Vimeos’s privacy policy.
Learn more

Load video

Always unblock Vimeo

2023-07-20 Today I share the edit of the third episode of my trustTheProcess() livestreams with you. In it I rebuilt my ASCII Blobs visual in p5.js.

In between I struggled getting the system running, but that’s the idea of this livestream format. In it I want to show you that in tricky situations you can always reach your goal with calmness, patience and creativity, even if something changes slightly in between. This became especially clear here, because I had originally planned to include anime.js, but changed my mind in the middle of the stream so as not to overengineer the system.

Enjoy!

const elementsY = 31;

var charset = "░▒▓█"; 

let font;

function preload() {
  font = loadFont("IBMPlexMono-Bold.otf");  
}

function setup() {
  createCanvas(700, 700);
}

function draw() {
  background(255);

  var elements = 10;
  fill(0);
  noStroke();
  
  textFont(font);
  textAlign(CENTER,CENTER);
  textSize(30);

  for (let y = 0; y < elementsY + 1; y++) {
    for (let x = 0; x < charset.length + 1; x++) {
      
      let posY = map(y, 0, elementsY, 0, height);
      let magX = map(sin(radians(posY * 1 + frameCount)), -1, 1, -width*0.4, 200);
      let posX = map(x, 0, charset.length,-magX, magX);
      
      
      let selector = x;
      
      push();
      translate(width/2+posX, posY);
      text(charset[selector],0,0);
      pop();
    }
  }
}

const elementsY = 30;

var charset = "▛▜▝▞▟";

let font;

function preload() {
  font = loadFont("IBMPlexMono-Bold.otf");
}

function setup() {
  createCanvas(800, 600);
  // createLoop({duration:3, gif:true})
}

function draw() {
  background("#f1f1f1");

  var elements = 10;
  fill(0);
  noStroke();

  textFont(font);
  textAlign(CENTER, CENTER);
  textSize((height / elementsY) * 2 );

  for (let y = 0; y < elementsY + 1; y++) {
    for (let x = 0; x < charset.length + 1; x++) {
      
      let posY = map(y, 0, elementsY, 0, height);
      let magX = map(
        tan(radians(posY * 0.5 + frameCount)),
        -1,
        1,
        -width * 0.3,
        width * 0.3
      );
      let posX = map(x, 0, charset.length, -magX, magX);

      let selector = x;

      push();
      translate(width / 2 + posX, posY);
      text(charset[selector], 0, 0);
      pop();
    }
  }
}

Links

• https://editor.p5js.org/timrodenbroeker/sketches/UAQBUb1Ek
• https://editor.p5js.org/timrodenbroeker/sketches/9LqyBE_BF