baditchylearnsp5js

[baditchylearnsp5js]

cube // tear // chop

https://editor.p5js.org/asarmiento/sketches/bsOLVZrHW

let karo; function preload() {  karo = loadFont('KaroPro-Column.otf'); } function setup() {  createCanvas(400, 400, WEBGL);  textFont(karo);  textSize(width / 3);  textAlign(CENTER, CENTER); } function draw() {  background(123, 3, 252);  let time1 = millis();  rotateX(time1 / 1000);  rotateZ(time1 / 1234);  fill(0);  text('cube', 0, 0);

 let time2 = millis();  rotateX(time2 / 1000);  rotateZ(time2 / 1234);  fill(161, 255, 164);  text('tear', 0, 0);

 let time3 = millis();  rotateX(time3 / 1000);  rotateZ(time3 / 1234);  fill(255);  text('chop', 0, 0); }

[baditchylearnsp5js]

snip

https://editor.p5js.org/asarmiento/sketches/26m_59k6r

let sourceText = "snipsnipsnip"; let curIndex = 0;

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

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

function draw() {  background(161, 255, 164);  fill(123, 3, 252);  textFont(font);  textSize(750);  textAlign(CENTER, CENTER);  text(sourceText.substring(curIndex, curIndex + 1), width / 2, height / 2);  curIndex++;  if (curIndex > sourceText.length) {    curIndex = 0;  }

 noStroke();  fill(0);  textSize(250);  text("snip", width / 2, height / 2); }

[baditchylearnsp5js]

collage

https://editor.p5js.org/asarmiento/sketches/aTO5PeMEZ

let canvasSize = (600, 600); let grSize = canvasSize;

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

function setup() {  createCanvas(canvasSize, canvasSize);  frameRate(20);  pg = createGraphics(grSize, grSize); }

function draw() {

 pg.background(161, 255, 164);  pg.fill(123, 3, 252);  pg.textFont("Helvetica");  pg.textSize(canvasSize/4);

 pg.push();  pg.translate(grSize/2, grSize/3);  pg.textAlign(LEFT, CENTER);  pg.textLeading(canvasSize/6.6-10);  pg.text("collage merge mix merge", -canvasSize/2.5, -canvasSize/8, 100);   pg.pop();

 image(pg, 0, 0);

 let tilesX = 20;  let tilesY = 20;

 let tileW = int(width/tilesX);  let tileH = int(height/tilesY);

 for (let y = 0; y < tilesY; y++) {    for (let x = 0; x < tilesX; x++) {

   //warp    let wave = int(sin(frameCount * 0.05  + ( x * y ) * .04) * 50);

   // source    let sx = x*tileW + wave;    let sy = y*tileH + wave;    let sw = tileW;    let sh = tileH;

   // destination    let dx = x*tileW;    let dy = y*tileH;    let dw = tileW;    let dh = tileH;

   copy(pg, sx, sy, sw, sh, dx, dy, dw, dh);

   }  } }

[baditchylearnsp5js]

cut // distort

https://editor.p5js.org/asarmiento/sketches/4p79GU6jn

let tileSize = 150;  // size tiles to make let tiles;          // list of tiles, created in setup() let font;           // font we'll use

function preload() {  font = loadFont ('KaroPro-Column.otf'); }

function setup() {  createCanvas (windowWidth,windowHeight);

 // draw the text to a graphics object  let pg = createGraphics(width, height);  pg.background(123, 3, 252);  pg.textFont(font);  pg.textAlign(CENTER, CENTER);  pg.textSize(250);  pg.fill(161, 255, 164);  pg.noStroke();  pg.text('distort', pg.width/2, pg.height/2);

 // additonal graphics  pg.textSize(25);  for (let i=0; i<100; i++) {    pg.text('cut', random(pg.width), random(pg.height));  }  fill(0);

 // creating tiles for our graphics  tiles = [];  for (let y=0; y<pg.height; y+=tileSize) {    for (let x=0; x<pg.width; x+=tileSize) {      let tile = new Tile(x, y, tileSize, pg);      tiles.push(tile);    }  }  print(tiles); }

function draw() {  // background(50);

 //for loop rendering tiles on canvas for (let i=0; i<tiles.length; i++){   tiles[i].display(); } }

class Tile {  constructor(x, y, w, pg) {    this.x = x;    this.y = y;

   this.img = createImage(w, w);    this.img.copy(pg, x,y, w,w, 0,0, w,w);  }  display() {    push();    translate(this.x, this.y);    //rotate(map(mouseX, 0,width, 0,TWO_PI));    //scale(mouseX*.01, mouseY *.01);    shearX(mouseY*.01, TWO_PI);    shearY(mouseY*.01, TWO_PI);    image(this.img, 5, 2.5);    pop();  } }

[baditchylearnsp5js]

cut // paste

https://editor.p5js.org/asarmiento/sketches/qCKsY3Y38

let karo; let x, y; let fontSize = 150; let firstLetter = []; let secondLetter = [];

function preload() {  karo = loadFont("KaroPro-Column.otf"); }

function setup() {  createCanvas(400, 400);  textFont(karo);  textSize(fontSize);

 x = width / 5 - 50;  y = height / 2 + 50;

 //text to points functions  firstLetter = karo.textToPoints("cut", x, y, fontSize, {    sampleFactor: 0.1,  });

 secondLetter = karo.textToPoints("paste", x, y, fontSize, {    sampleFactor: 0.05,  });

 print(firstLetter.length, secondLetter.length);

 noLoop(); }

function draw() {  background(123, 3, 252);

 beginShape();  for (let i = 0; i < firstLetter.length; i++) {

 push();  fill (161, 255, 164);  stroke (161, 255, 164);  translate(firstLetter[i].x, firstLetter[i].y);  ellipse(10, -10, 8, 4);  pop();

 //conditions  if(firstLetter[i].x <= secondLetter[i].x){    firstLetter[i].x++;  }  if(firstLetter[i].x >= secondLetter[i].x){  firstLetter[i].x--;  }  if(firstLetter[i].y >= secondLetter[i].y){  firstLetter[i].y--;  }  if(firstLetter[i].y <= secondLetter[i].y){  firstLetter[i].y++;  }

 }  endShape(); }

function mousePressed(){  loop(); }

[baditchylearnsp5js]

scatter

https://editor.p5js.org/asarmiento/sketches/7IL4Dqqc0

let karo let fontSize = 150 let scatterArray

function preload() {  karo = loadFont('KaroPro-Column.otf') }

function setup() {  createCanvas(400, 400);  textFont(karo);  textSize(fontSize);  frameRate(20);

 scatterArray = karo.textToPoints("scatter", width/2 - 180, height/2 + 50, fontSize, {sampleFactor: 0.1});  

}

function draw() {  background(161, 255, 164);  text("scatter", width/2 - 180, height/2 + 50);

 //beginShape();  for (let i = 0; i <scatterArray.length; i++){    push();    fill(123, 3, 252);    stroke(123, 3, 252);    ellipse(scatterArray[i].x, scatterArray[i].y, 2.5, 4);    pop();

}

}

[baditchylearnsp5js]

Neon Wave

https://editor.p5js.org/asarmiento/sketches/Ngnos3oN9

let tileSize = 50; // size tiles to make let tiles; // list of tiles, created in setup() let font; // font we'll use

function preload() {  font = loadFont("assets/manteka.ttf"); }

function setup() {  createCanvas(windowWidth, windowHeight);

// draw the text to a graphics object  let pg = createGraphics(width, height);  pg.background(255, 84, 238);  pg.textFont(font);  pg.textAlign(CENTER, CENTER);  pg.textSize(200);  pg.fill(148, 255, 162);  pg.stroke(162, 148, 255);  pg.strokeWeight(5);  pg.text("wave", pg.width / 2, pg.height / 2);

 // additonal graphics  pg.textSize(20);  fill(0, 8, 255);  for (let i = 0; i < 100; i++) {    pg.text("ocean", random(pg.width), random(pg.height));  }

 // creating tiles for our graphics  tiles = [];  for (let y = 0; y < pg.height; y += tileSize) {    for (let x = 0; x < pg.width; x += tileSize) {      let tile = new Tile(x, y, tileSize, pg);      tiles.push(tile);    }  }  print(tiles); }

function draw() {  // background(50);

 //for loop rendering tiles on canvas  for (let i = 0; i < tiles.length; i++) {    tiles[i].display();  } }

class Tile {  constructor(x, y, w, pg) {    this.x = x;    this.y = y;

   this.img = createImage(w, w);    this.img.copy(pg, x, y, w, w, 0, 0, w, w);  }  display() {    push();    translate(this.x, this.y);    rotate(map(mouseX, 1, width, 0, PI));    //scale(mouseX*.01, mouseY *.01);    shearX(mouseY * 0.05, mouseX * 0.05);    image(this.img, 0, 0);    pop();  } }

[baditchylearnsp5js]

pointy boys

https://editor.p5js.org/asarmiento/sketches/nJEnVyalw

let grotesk; let x, y; let fontSize = 75; let firstLetter = []; let secondLetter = []; let r = 0.02; let t = 0.1;

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

function setup() {  createCanvas(400, 400);  textFont(grotesk);  textSize(fontSize);  // rectMode(CENTER);

 x = width / 2 - 187;  y = height / 2 - 50;

 //text to points functions  firstLetter = grotesk.textToPoints("HEDGEHOG", x, y, fontSize, {    sampleFactor: 0.11,  });

 secondLetter = grotesk.textToPoints("PORCUPINE", x, y, fontSize, {    sampleFactor: 0.112,  });

 fill(61, 35, 13);  pointyArray = grotesk.textToPoints("pointy boys", x, y + 200, fontSize, { sampleFactor: 0.1});

 print(firstLetter.length, secondLetter.length);

 noLoop(); }

function draw() {  background(209, 255, 226);  //text('W', width/2 - 80, height/2 + 65);

 beginShape();  for (let i = 0; i < firstLetter.length; i++){

   push();    translate(firstLetter[i].x, firstLetter[i].y);    stroke(120, 255, 172);    rotate(r);    r++;    line(width, height, 1, 1);    pop();

   push();    translate(firstLetter[i].x, firstLetter[i].y);    stroke(56, 168, 99);    rotate(r);    r++;    line(-100, -100, 1, 1);    pop();

   push();    translate(firstLetter[i].x, firstLetter[i].y);    stroke(13, 61, 31);    rotate(r);    r++;    line(-50, -50, 1, 1);    pop();  }

 //shape for first letter  beginShape();  for (let i = 0; i < firstLetter.length; i++) {    //vertex(firstLetter[i].x, firstLetter[i].y);    //vertex(secondLetter[i].x, secondLetter[i].y);    //ellipse(firstLetter[i].x, firstLetter[i].y, 10, 10);

   push();    translate(firstLetter[i].x, firstLetter[i].y);    stroke(255);    fill(255, 194, 161);    ellipse(-10, -10, 7, 7);    pop();

   //conditions    push();    if (firstLetter[i].x <= secondLetter[i].x) {      firstLetter[i].x++;    }    if (firstLetter[i].x >= secondLetter[i].x) {      firstLetter[i].x--;    }    if (firstLetter[i].y >= secondLetter[i].y) {      firstLetter[i].y--;    }    if (firstLetter[i].y <= secondLetter[i].y) {      firstLetter[i].y++;    }    pop();  }

 endShape();

 beginShape();

 for (let i = 0; i < pointyArray.length; i++) {    push();    stroke(191, 159, 132);    fill(143, 106, 74);    // translate(pointyArray[i].x, pointyArray[i].y);    // rotate(t);    // t++;    ellipse(pointyArray[i].x, pointyArray[i].y, 20, 20);    pop();

   push();    noStroke();    fill(61, 35, 13);    text("pointy boys", x, y + 200);    pop();  }

 endShape(CLOSE); }

function mousePressed() {  loop(); }

[baditchylearnsp5js]

cat dog rat

https://editor.p5js.org/asarmiento/sketches/4EgcL1dxF

let grotesk; let x, y; let fontSize = 150; let firstLetter = []; let secondLetter = [];

var z = -2; var w = 50;

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

function setup() {  createCanvas(400, 400);  textFont(grotesk);  textSize(fontSize);  // rectMode(CENTER);

 x = width / 2 - 100;  y = height / 2 + 50;

 //text to points functions  firstLetter = grotesk.textToPoints("dog", x, y, fontSize, {    sampleFactor: 0.1,  });

 secondLetter = grotesk.textToPoints("cat", x, y, fontSize, {    sampleFactor: 0.1375,  });

 print(firstLetter.length, secondLetter.length);

 noLoop(); }

function draw() {  background(209, 255, 226);  //text('W', width/2 - 80, height/2 + 65);

 push();  z += 0.02;  translate(width / 2 - 100, height / 2 + 150);  rotate(z, 50);  fill(196, 199, 177);  textSize(50);  text("rat", 50, 50);  pop();

 push();  w += 0.02;  translate(width / 2 + 100, height / 2 - 100);  rotate(w, 50);  fill(177, 180, 199);  textSize(50);  text("mice", 50, 50);  pop();

 //shape for first letter  beginShape();  for (let i = 0; i < firstLetter.length; i++) {    //vertex(firstLetter[i].x, firstLetter[i].y);    //vertex(secondLetter[i].x, secondLetter[i].y);    //ellipse(firstLetter[i].x, firstLetter[i].y, 10, 10);

   push();    translate(firstLetter[i].x, firstLetter[i].y);    fill(255, 194, 161);    noStroke();    ellipse(-10, -10, 15, 10);    pop();

   //conditions    if (firstLetter[i].x <= secondLetter[i].x) {      firstLetter[i].x++;    }    if (firstLetter[i].x >= secondLetter[i].x) {      firstLetter[i].x--;    }    if (firstLetter[i].y >= secondLetter[i].y) {      firstLetter[i].y--;    }    if (firstLetter[i].y <= secondLetter[i].y) {      firstLetter[i].y++;    }  }  endShape(); }

function mousePressed() {  loop(); }

[baditchylearnsp5js]

no/ya

https://editor.p5js.org/asarmiento/sketches/n7SknQPPi

let grotesk; let x, y; let r = 0.02; let fontSize = 300; let firstLetter = []; let secondLetter = []; let thirdLetter = []; let fourthLetter = [];

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

function setup() {  createCanvas(400, 400);  textFont(grotesk);  textSize(fontSize);

 x = width / 2 - 150;  y = height / 2 + 65;

 //text to points functions  firstLetter = grotesk.textToPoints("no", x, y, fontSize, {    sampleFactor: 0.1,  });  secondLetter = grotesk.textToPoints("ya", x, y, fontSize, {    sampleFactor: 0.0934});

 print(firstLetter.length, secondLetter.length);

 noLoop(); }

function draw() {  background(0);  //text('z', width/2 - 80, height/2 + 65);

 //shape for first letter  beginShape();  for (let i = 0; i < firstLetter.length; i++) {    //vertex(firstLetter[i].x, firstLetter[i].y);    //vertex(secondLetter[i].x, secondLetter[i].y);    //ellipse(firstLetter[i].x, firstLetter[i].y, 10, 10);

   push();    translate(firstLetter[i].x, firstLetter[i].y);    rotate(r);    r++;    stroke(255, 229, 158);    line(-10, -10, 10, 10);    pop();

   //conditions    if (firstLetter[i].x <= secondLetter[i].x) {      firstLetter[i].x++;    }    if (firstLetter[i].x >= secondLetter[i].x) {      firstLetter[i].x--;    }    if (firstLetter[i].y >= secondLetter[i].y) {      firstLetter[i].y--;    }    if (firstLetter[i].y <= secondLetter[i].y) {      firstLetter[i].y++;    }  }  endShape();  } function mouseDragged() {  loop(); }

[baditchylearnsp5js]

Attention

https://editor.p5js.org/asarmiento/sketches/pDCQymm7m

let grotex let fontSize = 50 let thenArray let attenArray let hereArray let r = 0;

function preload() {  grotex = loadFont('Grotex Regular.ttf') }

function setup() {  createCanvas(400, 400);  textFont(grotex);  textSize(fontSize);  frameRate(20);

 thenArray = grotex.textToPoints("nOw tHEn", 175, 75, fontSize, {sampleFactor: 0.5});

 attenArray = grotex.textToPoints("attention", width/3, height/2, fontSize, {sampleFactor: 0.5});  

 hereArray = grotex.textToPoints("HERE!!! !!", 175, 350, fontSize, {sampleFactor: 0.5});

}

function draw() {  background(158, 255, 184);

 beginShape();  for (let i = 0; i < hereArray.length; i++){

   stroke(99, 164, 255);    fill(255);    text("nOw tHEn", 160, 75);

   stroke(99, 164, 255);    fill(255);    text("allright", 25, 350);

 }  endShape(CLOSE);

 beginShape();  for (let i = 0; i < attenArray.length; i++){

   stroke(182, 99, 255);    fill(255, 158, 250);    ellipse(attenArray[i].x, attenArray[i].y, 5, 100);

   //line(attenArray[i].x, attenArray[i].y, 0, 0);

   //single lines along path with rotation  

   push();    rotate(r);    r++;    stroke(255, 130, 92);    fill(161, 158, 255);    text("lOOK", 25, 75);    pop();

 //vertex(attenArray[i].x, attenArray[i].y)

}  endShape(CLOSE);

 beginShape();  for (let i = 0; i < hereArray.length; i++){

   push();    translate(hereArray[i].x, hereArray[i].y);    rotate(r);    r++;    stroke(255, 242, 158);    fill(234, 255, 158);    ellipse(-10, -10, 20, 10);    pop();

  noStroke();    fill(255, 158, 181);    text("HERE!!! !!", 175, 350);

 }  endShape(CLOSE);   }

[baditchylearnsp5js]

Space

https://editor.p5js.org/asarmiento/sketches/FT9zpQRCS

let victor; let fontSize = 75; let welArray; let r = 0.01; let z = 0.02;

function preload() {  victor = loadFont("VictorMono-Bold.otf"); }

function setup() {  createCanvas(600, 600);  textFont(victor);  textSize(fontSize);  frameRate(50);

 asteroidArray = victor.textToPoints("aster", 200, 550, fontSize, {    sampleFactor: 0.1,  });

 dustArray = victor.textToPoints("space dust", 75, 100, fontSize, {    sampleFactor: 0.1,  }); }

function draw() {  background(0);

 beginShape();

 for (let i = 0; i < dustArray.length; i++) {    push();    stroke(36, 36, 36);    fill(15, 15, 15);    ellipse(dustArray[i].x, dustArray[i].y, 10, 10);    pop();

   push();    noStroke();    fill(20, 20, 20);    text("space dust", 75, 100);    pop();  }

 endShape(CLOSE);

 for (let i = 0; i < asteroidArray.length; i++) {    push();    stroke(255, 130, 92);    fill(255, 228, 92);    text("sun", 150, 250);    textSize(100);    pop();

   push();    stroke(42, 48, 79);    fill(171, 219, 255);    text("moon", 450, 550);    pop();

   for (let i = 0; i < asteroidArray.length; i++) {      push();      rotate(r);      r++;      ellipse(asteroidArray[i].x, asteroidArray[i].y, 5, 4);      fill(0);      pop();    }  }

 endShape(CLOSE); }

[baditchylearnsp5js]

Welcome Home

https://editor.p5js.org/asarmiento/sketches/8X5N0fg1a

let grotex; let fontSize = 75; let welArray; let r = 0.01; let z = 0.02;

function preload() {  victor = loadFont("VictorMono-Bold.otf"); }

function setup() {  createCanvas(600, 600);  textFont(victor);  textSize(fontSize);  frameRate(20);

 welArray = victor.textToPoints("welcome", width / 4, height / 5, fontSize, {    sampleFactor: 0.1,  });

 homeArray = victor.textToPoints("home", width / 4, height / 5, fontSize, {    sampleFactor: 0.1,  }); }

function draw() {  background(255, 199, 187);

 text("home", width / 2, 500);

 beginShape();  for (let i = 0; i < welArray.length; i++) {    push();    rotate(z);    fill(255, 248, 179);    noStroke();    z++;    ellipse(welArray[i].x, welArray[i].y, 25, 10);    pop();

   //single lines along path with rotation    push();    translate(welArray[i].x, welArray[i].y);    rotate(r);    r++;    line(-10, -10, 10, 1);    pop();

   vertex(welArray[i].x, welArray[i].y);    fill(255, 187, 254);

   line(welArray[i].x, welArray[i].y, 50, 500);    stroke(255);  }

 endShape(CLOSE); }

[baditchylearnsp5js]

go for a walk

https://editor.p5js.org/asarmiento/sketches/funmdf9m2

function setup() {  createCanvas(500, 500);  noLoop(); }

function draw() {  background(181, 229, 255);

 //do you want to

 fill(181, 255, 192);  stroke(0);  textFont("Helvetica");  textSize(height / 7);  text("do you want to", width / 4500, height / 2);

 //on the beach

 textFont("Arial");  textSize(50);  fill(209, 181, 255);  stroke(96, 0, 255);  text("on the beach", 200, 475);  textAlign(RIGHT, BOTTOM);

 //go for a walk

 textFont("Helvetica");  textSize(25);  textAlign(RIGHT, BOTTOM);  let numSteps = width / 5;  for (let i = 0; i < numSteps; i++) {    let c1 = color(181, 255, 202);    let c2 = color(255, 193, 181);    fill(lerpColor(c1, c2, 1 / numSteps));

   let x = map(i, 0, numSteps, width, 0);    let y = map(i, 0, numSteps, height, 0);    let a = map(i, 0, numSteps, 0, 400);

   push();    translate(x, y);    rotate(a);    text("go for a walk", 0, 0);    pop();  } }

[baditchylearnsp5js]

Here I am

https://editor.p5js.org/asarmiento/sketches/eXgmZlKl5

function preload() {  gulax = loadFont("Gulax-Regular.otf"); }

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

function draw() {  background(209, 181, 255);

 //there i was  push();  fill(229, 204, 255);  textFont("Helvetica");  textSize(200);  rotate(135, 6);  text("there", 5, -250);  text("i was", 5, -75);  pop();

 //here i am  textFont("Helvetica");  textSize(30);  textAlign(RIGHT, BOTTOM);  let numSteps = width / 5;

 for (let i = 0; i < numSteps; i++) {    let c1 = color(189, 255, 245);    let c2 = color(130, 136, 255);    fill(lerpColor(c1, c2, i / numSteps));

   let x = map(i, 0, numSteps, width, 0);    let y = map(i, 0, numSteps, height, 0);    let a = map(i, 0, numSteps, 30, TWO_PI);

   push();    translate(x, y);    rotate(a);    text("here i am", 0, 0);    pop();  } }

[baditchylearnsp5js]

Loading

https://editor.p5js.org/asarmiento/sketches/1OPaJf_-Z

function preload() {  flower = loadFont("HealTheWebB-Regular.otf"); }

function setup() {  createCanvas(500, 500);  noLoop(); }

function draw() {  background(0);

 //first piece of text  fill(255, 255, 255);  text("loading", 75, 75);

 // second piece of text  textFont(flower);  noStroke();  fill(255, 166, 245);  textSize(72);  text("loading", 50, 150);  textAlign(CENTER, CENTER);

 // third piece of text  fill(0, 255, 125);  textFont("Brush Script MT");  textSize(height / 3);  text("loading", width / 2, height / 2); }

[baditchylearnsp5js]

3d spin

https://editor.p5js.org/asarmiento/sketches/ljpzeyVMT

function setup() {  createCanvas(500, 500, WEBGL); }

function draw() {  //sphere  background(20);  rotateX(frameCount * 0.01);  rotateZ(frameCount * 0.01);  sphere(30);  fill(255, 179, 186);  pop();

 //cylinder  translate(50, 75);  rotateX(frameCount * 0.01);  rotateZ(frameCount * 0.01);  cylinder(20, 50);  fill(255, 223, 186);  pop();

 //cone  translate(75, 100);  rotateX(frameCount * 0.01);  rotateZ(frameCount * 0.01);  cone(30, 60);  fill(255, 255, 186);  pop();

 //ellipsoid  translate(50, 50);  scale(2);  rotateY(millis() / 1000);  ellipsoid(15, 15, 10);  fill(186, 255, 201);  pop();

 //torus donut  translate(30, 30);  rotateX(frameCount * 0.01);  rotateY(frameCount * 0.01);  torus(10, 5);  fill(186, 225, 255);  scale(2);  pop(); }