Project 5 Wallpaper

It was really hard doing this becuase of translate as it took alot of calculation to figure out where the origin is.

sketch


function setup() {
    createCanvas(600, 600, WEBGL);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
  
  //for the color
  colorMode(RGB);
  let from = color(random(0,255),random(0,255),random(0,255));
  let to = color(random(0,255), random(0,255), random(0,255));
  colorMode(RGB); 
  let interA = lerpColor(from, to, 0.33);
  let interB = lerpColor(from, to, 0.66);
 
 //for the pattern 
  
  for (var col = 0; col < 2; col += 1){
    translate(-200,0);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      fill(from);
      design();
    }
  }
  
  for (var col = 0; col < 4; col += 1){
    translate(200,0);
    for (var row = 0; row < 4; row += 1){
      //translate(0,150);
      fill(interA);
      design();
    }
  }
  
  for (var col = 0; col < 2; col += 1){
    translate(-200,0);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      design();
    }
  }
  
  for (var col = 0; col < 2; col += 1){
    translate(0,-200);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      fill(interB);
      design();
    }
  }
  
  for (var col = 0; col < 4; col += 1){
    translate(0,200);
    for (var row = 0; row < 4; row += 1){
      //translate(0,-150);
      fill(to);
      design();
    }
  }
    
 
  noLoop();
}



function design(){
  fill
  ellipsoid(30, 40, 30);
  torus(60,20);
}

Leave a Reply