Exploding-rubix-cube-animation/mini.js at master · sabil62/Exploding-rubix-cube-animation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
function setup() {
  createCanvas(500, 500, WEBGL);
  angleMode(DEGREES);
}

const edgeLength = 180;
const explodeFactor = 1.2;
const animationFrames = 300;
const transparency = 0.3;

function draw() {
  const doneness = min(frameCount / animationFrames, 1);
  background("lightblue");
  noStroke();
  rotateY(frameCount);

  fill("rgba(200,100,0, 0.5)");
  push();
  rotateX(90);
  translate(0, 0, (edgeLength / 2) * explodeFactor * doneness);
  plane(180);
  pop();

  fill("rgba(200,100,0, 0.5)");
  push();
  rotateX(270);
  translate(0, 0, (edgeLength / 2) * explodeFactor * doneness);
  plane(180);
  pop();

  fill("rgba(0,255,0, 0.5)");
  push();
  rotateY(90);
  translate(0, 0, (edgeLength / 2) * explodeFactor * doneness);
  plane(180);
  pop();

  fill("rgba(0,100,200, 0.5)");
  push();
  rotateY(180);
  translate(0, 0, (edgeLength / 2) * explodeFactor * doneness);
  plane(180);
  pop();

  fill("rgba(0,255,0, 0.5)");
  push();
  rotateY(-90);
  translate(0, 0, (edgeLength / 2) * explodeFactor * doneness);
  plane(180);
  pop();

  fill("rgba(0,100,200, 0.5)");
  push();
  translate(0, 0, (edgeLength / 2) * explodeFactor * doneness);
  plane(180);
  pop();
}