Computational Sketches

Sketches are created mainly by P5.js with libraries such as Turtle Graphics, Paper.js, p5.sound, tone.js, OpenSCAD, p5.play, RiTa, and Tracery. I explored and practiced these libraries by brainstorming ideas from scratch and then sketching in the p5 editor. Each sketch cost 30 mins to 8 hours to complete.

3D Fjord - OpenSCAD X Blender

seed1=10;
seed2=5;
random_count1=rands(5,20,30,seed1);
random_count2=rands(5,40,30,seed2);
random_high = rands(1,30,1);
random_y = rands(0,10,1);

module cubes(){
    cube(10);
    for(i=[0:29]) {
        rotate(360*i/30) {
        translate([5+random_count1[i],0,0])
        cube(30-random_count1[i]);
        }
    }
}

module coast_l(){
    for(i=[0:19]){
        translate([i*5,5+random_count2[i],0])
        resize(newsize=[10,10,10])
        cubes();
    }
}

module coast_h(){
    for(i=[0:19]){
        translate([i*10,12+random_count1[i],0])
        resize(newsize=[10,10,30])
        cubes();
    }
}

module coast_m(){
    for(i=[0:19]){
        translate([i*5,10+random_count2[i],0])
        resize(newsize=[10,10,20])
        cubes();
    }
}

module west(){
coast_l();
coast_h();
coast_m();
edage();
}

west();
translate([0,-40,0])
mirror([0,1,0])
west();

Yosemite Landscape - P5.js

View Sketch in P5 editor

function drawSun() {
  var x = 400 - 2 * frameCount;
  var y = (x * x) / 400 + 50;
  var brighter = lerp(74, 255, (255 - 74) / x);
  push();
  fill(255, brighter, brighter);
  noStroke();
  translate(x, y);
  ellipse(0, 0, 100, 100);
  pop();
}
class Cloud {
  constructor(x, y, size, color) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = color;
  }

  draw(offsetX) {
    push();
    scale(this.size);
    fill(this.color);
    translate(this.x, this.y);
    noStroke();
    ellipse(20 + offsetX, 50, 40, 40);
    ellipse(70 + offsetX, 40, 80, 80);
    ellipse(120 + offsetX, 50, 60, 60);
    rect(0 + offsetX, 30, 140, 50, 25);
    pop();
  }
}

Silkworm - Turtle Graphics X P5.js

function drawCocoon() {
  for (var i = 0; i < 7; i++) {
    translate(random(-200 * i, 200 * i), random(-200 * i, 200 * i));
    push();
    rotateZ(random(10));
    rotateX(random(10));
    rotateY(random(20));
    ellipsoid(30 + i * random(40), 40 + i * random(60));
    pop();
  }
}
function drawLine(length) {
  for (var i = 0; i < 60; i++) {
    t.penUp();
    t.moveTo(0, random(800));
    t.penDown();

    for (var length = 0; length < 500; length++) {
      t.moveForward(length + random(10));
      if (length < 45) {
        t.turnRight(random(30));
      } else {
        t.turnLeft(random(30));
      }
    }
  }
}

Happy Coding - Paper.js X Laser Cutter

drawFace(center, 240);
function drawFace(point, size) {
  var face = new Path.Ellipse({
    center: point,
    fillColor: "#ffb703",
    size: size,
    strokeColor: "#fb8500",
    strokeWidth: 2,
    shadowColor: "#fb8500",
    shadowOffset: new Point(6, 12),
  });
  faceOffset = (Math.random() - 0.5) * 30;
  extraOffset = Math.random() * 10;
  if (face.size > 90) {
    var leftEye = new Path.Circle({
      center: point + new Point(-30, 0),
      radius: 4,
      fillColor: "#000000",
    });
    var rightEye = leftEye.clone();
    rightEye.position.x = point.x + 60 + faceOffset;

    var mouth = new Path.Arc({
      from: point + new Point(-30 + faceOffset, 30 + faceOffset),
      through: point + new Point(0, 30 + faceOffset),
      to: point + new Point(30 + faceOffset, 30 + faceOffset + extraOffset),
      strokeColor: "black",
      strokeWidth: 3,
      strokeCap: "round",
    });
  } else {
    var leftEye = new Path.Circle({
      center: point + new Point(-20, -20),
      radius: 4,
      fillColor: "#000000",
    });
    var rightEye = leftEye.clone();
    rightEye.position.x = point.x + 10 + faceOffset;

    var mouth = new Path.Arc({
      from: point + new Point(-10 + faceOffset, 10 + faceOffset),
      through: point + new Point(0, 20 + faceOffset),
      to: point + new Point(10 + extraOffset, 10 + faceOffset),
      strokeColor: "black",
      strokeWidth: 3,
      strokeCap: "round",
    });
  }
}

Pixel Blocks - P5.js

View Code in p5 editor

class Block {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.frequency= noise(y*10+x*2);
    this.img = createImage(3, 3);
    this.img.loadPixels();  

    let c = color(random(255), random(255), random(255));
    for(let i=0; i<4; i++) {
      let baseX = random(this.img.width);
      let baseY = random(this.img.height);
      this.img.set(baseX, baseY, c);      
    }
    this.img.set(1, 1, c); 
    this.img.updatePixels();
  }

  display() {
      var offsetY = frameCount/ this.frequency % height; 
      image(this.img, this.x, this.y+ offsetY, 20, 20);
  }
}

class Block {
  constructor(x, y, block, size) {
    this.x = x;
    this.y = y;
    this.block = block;
    this.size = size;
    this.img = createImage(block + 10, block);
    this.img.loadPixels();

    var hue = random(360);
    for (var col = 0; col < block; col++) {
      for (var row = 0; row < block; row++) {
        let c = color(hue, 90, random(60, 90));
        this.img.set(col, row, c);
      }
    }
    this.img.updatePixels();
  }

  display() {
    image(this.img, this.x + 4, this.y + 4, this.size, this.size);
  }
}

Skyline - P5.js

function drawBuilding(left, top, colCount, rowCount) {
  push();
  translate(left, top);
  for (var x = 0; x < colCount; x++) {
    for (var y = 0; y < rowCount; y++) {
      noStroke();
      fill(
        noise(frameCount / 100 + x * colCount + y) * 10 + 260,
        noise(frameCount / 100 + x * colCount + y) * 100,
        noise(frameCount / 100 + x * colCount + y) * 100
      );
      rect(
        16 * x,
        16 * y,
        noise(frameCount / 50 + x * colCount + y) * 16, // width
        noise(frameCount / 40 + x * colCount + y) * 16, // height
        noise(frameCount / 60 + x * colCount + y) * 8 // corner radius
      );
    }
  }
  pop();
}

View Skyline in P5 editor