trustTheProcess(4) – Data Stream

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

Load video

Always unblock Vimeo

2023-08-03 In this episode I have been looking at String Methods in p5.js, or rather in Javascript. Originally I wanted to develop a digital split-flap display, but then I let my intuition guide me and pushed the whole thing in a slightly different direction. That’s how it is sometimes with creative coding: Often valuable fascinating ideas emerge when you dare to leave the given path and try something new.

Step 1

var txt = "▗A ▘ 0 ▜ B▟ 1 ▙ C ▄ 2 ▀ D ▐ 3 ▌ E▞ 4 ▚ F ▝ 5 ▗ A ▘ 0 ▜ B ▟1 ▙ C ▄ 2 ▀D ▐ 3 ▌ E ▞ 4 ▚ F▝5";

var font;

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

function setup() {
  createCanvas(400, 400);
  frameRate(15);
}

function draw() {
  for (let i = 0; i < 7; i++) {
    var last = txt[txt.length - 1];
    txt = last + txt;
    txt = txt.substr(0, txt.length - 1);
  }
  
  background("#0000ff");
  fill("#f1f1f1");
  
  textFont(font);
  textSize(30);
  textLeading(50);
  textAlign(LEFT,TOP);

  text(txt,0,0,width,height);
  
}

Step 2

var txt = "A▘0▜B▟1▙C▄2▀D▐3▌E▞4▚F▝5A▘0▜B▟1▙C▄2▀D▐3▌E▞4▚F▝5A▘0▜B▟1▙C▄2▀D▐3▌E▞4▚F▝5A▘0▜B▟1▙C▄2▀D▐3▌E▞4▚F▝5A▘0▜B▟1▙C▄2▀D▐3▌E▞4▚F▝5A▘0▜B▟1▙C▄2▀D▐3▌E▞4▚F▝5";

var font;

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

function setup() {
  createCanvas(550, 550, WEBGL);
  frameRate(15);
}

function draw() {
  
  
  let eyeX = map(mouseX,0,width,-1200,1200);
  let eyeY = map(mouseY,0,width,-1200,1200);;
                 
  let eyeZ = height / 2.0 / tan((PI * 30.0) / 180.0);
  let centerX = 0;
  let centerY = 0;
  let centerZ = 0;
  let upX = 0;
  let upY = 1;
  let upZ = 0;
  camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ);

  for (let i = 0; i < 7; i++) {
    var last = txt[txt.length - 1];
    txt = last + txt;
    txt = txt.substr(0, txt.length - 1);
  }

  background("#0000ff");
  fill("#f1f1f1");

  textFont(font);
  textSize(50);
  textAlign(CENTER, CENTER);

  push();
  translate(0, 0);
  text(txt, 0, 0);
  pop();
}

Step 3

var txt =
  "A▘0▜B▟1▙C▄2▀D▐3▌E▞4▚F▝5A";

var font;

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

function setup() {
  createCanvas(550, 550, WEBGL);
  frameRate(15);
}

function draw() {
  let eyeX = map(mouseX, 0, width, -1200, 1200);
  let eyeY = map(mouseY, 0, width, -1200, 1200);

  let eyeZ = height / 2.0 / tan((PI * 30.0) / 180.0);
  let centerX = 0;
  let centerY = 0;
  let centerZ = 0;
  let upX = 0;
  let upY = 1;
  let upZ = 0;
  camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ);

  for (let i = 0; i < 7; i++) {
    var last = txt[txt.length - 1];
    txt = last + txt;
    txt = txt.substr(0, txt.length - 1);
  }
  background("#0000ff");

  fill("#f1f1f1");

  textFont(font);
  textSize(50);
  textAlign(CENTER, CENTER);

  var amp = mouseX * 0.1;
  
  for (let i = 0; i < txt.length; i++) {
    
    
    var ch = txt[i];
    var x = sin(radians(frameCount + i * amp * 2)) * 200;
    var y = cos(radians(frameCount + i * amp * 1)) * 200;
    var z = cos(radians(frameCount + i * amp * 1.5)) * 200;
    
    push();
    translate(x,y,z);
    text(ch, 0, 0);
    pop();
  }
}

Step 4

var txt =
  "A▘0▜B▟1▙C▄2▀D▐3▌E▞4▚F▝5AA▘0▜B▟1▙C▄2▀D▐3▌E▞4▚F▝5A";

var font;

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

function setup() {
  createCanvas(550, 550, WEBGL);
  frameRate(15);
  createLoop({duration:3, gif:true})
}

function draw() {
  let eyeX = map(mouseX, 0, width, -1200, 1200);
  let eyeY = map(mouseY, 0, width, -1200, 1200);

  let eyeZ = height / 2.0 / tan((PI * 30.0) / 180.0);
  let centerX = 0;
  let centerY = 0;
  let centerZ = 0;
  let upX = 0;
  let upY = 1;
  let upZ = 0;
  camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ);

  for (let i = 0; i < 7; i++) {
    var last = txt[txt.length - 1];
    txt = last + txt;
    txt = txt.substr(0, txt.length - 1);
  }
  background("#0000ff");

  fill("#f1f1f1");

  textFont(font);
  textSize(50);
  textAlign(CENTER, CENTER);

  var amp = mouseX * 0.1;
  
  for (let i = 0; i < txt.length; i++) {
    
    
    var ch = txt[i];
    var x = sin(radians(frameCount + i * amp * 2)) * 200;
    var y = cos(radians(frameCount + i * amp * 1.1)) * 200;
    var z = cos(radians(frameCount + i * amp * 1.5)) * 200;
    
    push();
    translate(x,y,z);
    text(ch, 0, 0);
    pop();
  }
}