Trigonometry cube

A cube drawn in orthographic projection using p5.js's 2D functions. Used as an example of why switching to full-blown 3D is much easier.

A spinning cube wireframe 

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES)
  noFill()
}

function draw() {
  background(220);
  
  let a = frameCount / 3;
  
  // Top square
  translate(200, 100)
  scale(1, 0.5)
  rotate(a)
  rect(-100, -100, 200, 200)
  resetMatrix()
  
  // Bottom square
  translate(200, 300)
  scale(1, 0.5)
  rotate(a)
  rect(-100, -100, 200, 200)
  resetMatrix()
  
  // Trig for the lines connecting the two
  for (let i = 0; i < 4; i ++) {
    line(
      cos(a + 45 + 90*i) * 100 * sqrt(2) + 200,
      sin(a + 45 + 90*i) * 50 * sqrt(2) + 100,
      cos(a + 45 + 90*i) * 100 * sqrt(2) + 200,
      sin(a + 45 + 90*i) * 50 * sqrt(2) + 300,
    )
  }
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/2oO6rvaDM)

Experiments tagged p5 (2/85)

Experiments on this site (2/85)