Knowledge

push( ) pop( )

By default, styles such as fill() and transformations such as rotate() are applied to all drawing that follows. The push() and pop() functions can limit the effect of styles and transformations to a specific group of shapes, images, and text.

beginShape( ) endShape( )

The beginShape() and endShape() functions allow for creating custom shapes in 2D or 3D. beginShape() begins adding vertices to a custom shape and endShape() stops adding them.

WEBGL

WebGL (Web Graphics Library) is a JavaScript API that allows rendering 3D and 2D graphics in a web browser using the GPU. It enables hardware-accelerated graphics, making it possible to create complex visual effects and interactive 3D experiences directly in the browser.

Assignment

Tutorial: https://editor.p5js.org/codingtrain/sketches/gwcGb_NPm

Based on Daniel’s code, I added let z = sin(angle * 3 + frameCount * 0.02) * r * 0.5;. This line creates a 3D wave effect by making the z coordinate periodically oscillate. Additionally, rotateX(frameCount * 0.005); rotateY(frameCount * 0.008); creating a dynamic spinning effect.

let r;
let factor = 0;

function setup() {
  // createCanvas(windowWidth, windowHeight, WEBGL); 
  createCanvas(400,400, WEBGL); 
  r = height / 3;
  // saveGif("one.gif",20);
}

function getVector(index, total) {
  const angle = map(index % total, 0, total, 0, TWO_PI);
  const v = p5.Vector.fromAngle(angle + PI);
  v.mult(r);
  
  let z = sin(angle * 3 + frameCount * 0.02) * r *0.5;
  
  return createVector(v.x, v.y, z);
}

function draw() {
  background(0);
  const total = 200;
  factor += 0.015;

  rotateX(frameCount * 0.005); 
  rotateY(frameCount * 0.008); 

  stroke(255, 150);
  strokeWeight(2);
  noFill();

  for (let i = 0; i < total; i++) {
    const a = getVector(i, total);
    const b = getVector(i * factor, total);
    line(a.x, a.y, a.z, b.x, b.y, b.z);
  }
}