Code-Based Work

Link to code: https://compform.net/js_lab/js_lab.html?https://sketches2023spring.compform.net/posts/R6hoYqmRNZcnLYeJW/code
Link: https://editor.p5js.org/kimj828/sketches/JsLHCJBmv
Link: https://editor.p5js.org/kimj828/sketches/spfZMbkJj
let x;
function setup() {
  createCanvas(600, 600, WEBGL);
  
  createP("Move x-axis");
  xSlider = createSlider(200, 500, 200);
  
  createP("Move y-axis");
  ySlider = createSlider(-500, 500, 0);
  
  createP("Move z-axis");
  zSlider = createSlider(0, 500, 0);
  
  createP("Shift Blocks");
  blockSlider = createSlider(-500, 500, 0);
  
  createP("Camera Shift");
  cameraSlider = createSlider(-200, 800, 0);
  
  //debugMode();
}
function draw() {
  background(255, 202, 133);
  //orbitControl();
  camera(-400, 900, 600, 600 + cameraSlider.value(), 200, -100);
  
  normalMaterial();
  
  //creating rows of boxes, the translate methods are supposed to stack
  push();
  boxGrid();
  
  translate(blockSlider.value(), 200 * noise(frameCount/100), 0);
  boxGrid();
  
  translate(blockSlider.value(), 200 * noise(frameCount/90), 0);
  boxGrid();
  
  translate(blockSlider.value(), 200 * noise(frameCount/80), 0);
  boxGrid();
  
  translate(blockSlider.value(), 200 * noise(frameCount/70), 0);
  boxGrid();
  
  translate(blockSlider.value(), 200 * noise(frameCount/60), 0);
  boxGrid();
  
  translate(blockSlider.value(), 200 * noise(frameCount/50), 0);
  boxGrid();
  
  translate(blockSlider.value(), 200 * noise(frameCount/40), 0);
  boxGrid();
  
  translate(blockSlider.value(), 200 * noise(frameCount/30), 0);
  boxGrid();
  
  translate(blockSlider.value(), 200 * noise(frameCount/20), 0);
  boxGrid();
  
  pop();
}
function boxGrid() {
  
  box(100);
}
Link: https://editor.p5js.org/kimj828/sketches/fRirMGDDO
let n;
let fc;
function setup() {
  createCanvas(600, 600, WEBGL);
  //debugMode();
  frameRate(30);
}
function draw() {
  background(20, 61, 60);
  
  for(i = 0; i < width; i += 20) {
    n = noise(i * frameCount);
    fc = frameCount / 3 * 0.03;
    pointLight(150, 200, 200, 0, 100, 0);
    ambientMaterial(50);
    noStroke();
    
    //box translation experiment
    
    translate(frameCount + n / 5, 0, 0);
    rotateX(fc);
    box(100 + n);
    
    translate(frameCount + n / 5, 0, 0);
    rotateY(fc);
    box(100 + n);
    
    translate(frameCount + n / 5, 0, 0);
    rotateZ(fc);
    box(100 + n);
    
    //box translation reversed
    
    push();
    
    translate(-(frameCount + n / 5), 0, 0);
    rotateX(-fc);
    sphere(60 - n);
    
    translate(-(frameCount + n / 5), 0, 0);
    rotateY(-fc);
    sphere(60 - n);
    
    translate(-(frameCount + n / 5), 0, 0);
    rotateZ(-fc);
    sphere(60 - n);
    
    pop();
  }
  
  camera(-500, 100, -400);
  //orbitControl();
}
let shapeVal;
//let colorVal;
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  //debugMode();
}
function draw() {
  background(15);
  noStroke();
  orbitControl();
  //ambientLight(255);
  //directionalLight(255, 255, 255, 0, 1, 0);
  spotLight(205, 205, 205, 0, -1000, 0, 0, 1, 0, PI/3, 25);
  spotLight(205, 205, 205, 0, 0, 1000, 0, 0, -1, PI/3, 100);
  ambientMaterial(175);
  
  structure();
  extraPillars();
  
  normalMaterial();
  generateShape();
}
function keyPressed(ENTER) {
  shapeVal = floor(random(1, 7));
  console.log(shapeVal);
}
function generateShape() {
  if(shapeVal == 1) {
    push();
    rotateY(frameCount * 0.03);
    plane(150);
    pop();
  }
  
  if(shapeVal == 2) {
    push();
    rotateY(frameCount * 0.03);
    box(150);
    pop();
  }
  
  if(shapeVal == 3) {
    push();
    rotateY(frameCount * 0.03);
    cylinder(150);
    pop();
  }
  
  if(shapeVal == 4) {
    push();
    rotateY(frameCount * 0.03);
    cone(150);
    pop();
  }
  
  if(shapeVal == 5) {
    push();
    rotateY(frameCount * 0.03);
    sphere(150);
    pop();
  }
  
  if(shapeVal == 6) {
    push();
    rotateY(frameCount * 0.03);
    torus(130);
    pop();
  }
}
function structure() {
  push();
  translate(0, 200, 0);
  box(750, 100, 750);
  pop();
  
  push();
  translate(263, 0, -263);
  box(100, 300, 100);
  pop();
  
  push();
  translate(-263, 0, -263);
  box(100, 300, 100);
  pop();
  
  push();
  translate(-263, 0, 263);
  box(100, 300, 100);
  pop();
  
  push();
  translate(263, 0, 263);
  box(100, 300, 100);
  pop();
}
function extraPillars() {
  push();
  translate(500, 0, -500);
  box(100, 2000, 100);
  pop();
  
  push();
  translate(-500, 0, -500);
  box(100, 2000, 100);
  pop();
  
  push();
  translate(-500, 0, 500);
  box(100, 2000, 100);
  pop();
  
  push();
  translate(500, 0, 500);
  box(100, 2000, 100);
  pop();
}
/* function keyPressed(SHIFT) {
  colorVal = floor(random(8, 13));
  console.log(colorVal);
} */
Link: https://editor.p5js.org/kimj828/sketches/aSALJFLq9
/* 
Credits: 
- p5.js documentation - providing reference for functions
- Daniel Shiffman (The Coding Train, YT: The Coding Train) -     providing tutorials for WebGL implementation
- Stalgia Gregg - provided writeup for getting started with WebGL: https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5
*/
let x;
let y;
function setup() {
  createCanvas(600, 600, WEBGL);
  
  //background() here is intentional to
  //receive the desired effect when rotating sketch
  
  background(0);
}
function draw() {
  
  camera(0, 30, (height/1.5) / tan(PI/6.5));
  //ambientLight(0);
  normalMaterial();
  rotateX(0);
  rotateY(45);
  
  if(mouseIsPressed){
    rotateX(mouseX/20);
    rotateY(mouseY/20); 
  }
  
  box(100);
  loops();
  loops2();
}
  //Box loops to draw boxes
function loops(){
  
  push();
  for(x = 0; x < 100; x = x + 10) {
    for(y = 0; y < 100; y = y + 10) {
        translate(x + 100, y + 100, 0);
        box(100);
    }
  }
  pop();
  
  push();
  for(x = 0; x > -100; x = x - 10) {
    for(y = 0; y > -100; y = y - 10) {
        translate(-x - 100, -y - 100, 0);
        box(100);
    }
  }
  pop();
  
  push();
  for(z = 0; z < 100; z = z + 10) {
    for(y = 0; y < 100; y = y + 10) {
      translate(0, y + 100, z + 100);
      box(100);
    }
  }
  pop();
  
  push();
  for(z = 0; z > -100; z = z - 10) {
    for(y = 0; y > -100; y = y - 10) {
      translate(0, -y - 100, -z - 100);
      box(100);
    }
  }
  pop();
  
  push();
  for(x = 0; x < 100; x = x + 10) {
    for(z = 0; z < 100; z = z + 10) {
        translate(x + 100, 0, z + 100);
        box(100);
    }
  }
  pop();
  
  push();
  for(x = 0; x > -100; x = x - 10) {
    for(z = 0; z > -100; z = z - 10) {
        translate(-x - 100, 0, -z - 100);
        box(100);
    }
  }
  pop();
}
  //Box loops part 2 - filling in other sides
function loops2() {
  
  push();
  for(x = 0; x < 100; x = x + 10) {
    for(y = 0; y < 100; y = y + 10) {
        translate(x + 100, -(y + 100), 0);
        box(100);
    }
  }
  pop();
  
  push();
  for(x = 0; x > -100; x = x - 10) {
    for(y = 0; y > -100; y = y - 10) {
        translate(-x - 100, -(-y - 100), 0);
        box(100);
    }
  }
  pop();
  
  push();
  for(z = 0; z < 100; z = z + 10) {
    for(y = 0; y < 100; y = y + 10) {
      translate(0, -(y + 100), z + 100);
      box(100);
    }
  }
  pop();
  
  push();
  for(z = 0; z > -100; z = z - 10) {
    for(y = 0; y > -100; y = y - 10) {
      translate(0, -(-y - 100), -z - 100);
      box(100);
    }
  }
  pop();
  
  push();
  for(x = 0; x < 100; x = x + 10) {
    for(z = 0; z < 100; z = z + 10) {
        translate(-(x + 100), 0, -z + 100);
        box(100);
    }
  }
  pop();
  
  push();
  for(x = 0; x > -100; x = x - 10) {
    for(z = 0; z > -100; z = z - 10) {
        translate(-(-x - 100), 0, -z - 100);
        box(100);
    }
  }
  pop();
}
↑Back to Top