Add port to p5.js of Coding Challenge 142.1: Rubiks Cube 1 (#2181)

edorfaus · gruselhaus · web-flow · commit 15244a8feb47 · 2020-04-18T13:27:01.000+02:00
* Add port to p5.js of Coding Challenge 142.1: Rubiks Cube 1

* Change Cubie class to use separate shapes as QUADS isn't implemented.

This is a workaround for issue p5.js#4401 : in WebGL mode, the QUADS
mode of beginShape() has not been implemented yet. As a replacement,
this code now uses a separate shape for each face of the cubie.

Co-authored-by: Nico Finkernagel &lt;nico@gruselhaus.com&gt;
diff --git a/CodingChallenges/CC_142_Rubiks_Cube_1/P5/Cubie.js b/CodingChallenges/CC_142_Rubiks_Cube_1/P5/Cubie.js
@@ -0,0 +1,78 @@
+// Rubiks Cube 1
+// The Coding Train / Daniel Shiffman
+// https://thecodingtrain.com/CodingChallenges/142.1-rubiks-cube.html
+// https://youtu.be/9PGfL4t-uqE
+
+class Cubie {
+  constructor(x, y, z, len_) {
+    this.pos = createVector(x, y, z);
+    this.len = len_;
+  }
+  show() {
+    fill(255);
+    stroke(0);
+    strokeWeight(8);
+    push();
+    translate(this.pos.x, this.pos.y, this.pos.z);
+    const r = this.len / 2;
+
+    // When this was ported, p5.js (version 1.0.0) had not yet
+    // implemented support for beginShape(QUADS) in WEBGL mode.
+    // See: https://github.com/processing/p5.js/issues/4401
+    // So instead, we use separate shapes for each face of the cubie.
+
+    // z-fixed
+    beginShape();
+    fill(colors[BCK]);
+    vertex(-r, -r, -r);
+    vertex(r, -r, -r);
+    vertex(r, r, -r);
+    vertex(-r, r, -r);
+    endShape(CLOSE);
+
+    beginShape();
+    fill(colors[FRT]);
+    vertex(-r, -r, r);
+    vertex(r, -r, r);
+    vertex(r, r, r);
+    vertex(-r, r, r);
+    endShape(CLOSE);
+
+    // y-fixed
+    beginShape();
+    fill(colors[DWN]);
+    vertex(-r, -r, -r);
+    vertex(r, -r, -r);
+    vertex(r, -r, r);
+    vertex(-r, -r, r);
+    endShape(CLOSE);
+
+    beginShape();
+    fill(colors[UPP]);
+    vertex(-r, r, -r);
+    vertex(r, r, -r);
+    vertex(r, r, r);
+    vertex(-r, r, r);
+    endShape(CLOSE);
+
+    // x-fixed
+    beginShape();
+    fill(colors[LFT]);
+    vertex(-r, -r, -r);
+    vertex(-r, r, -r);
+    vertex(-r, r, r);
+    vertex(-r, -r, r);
+    endShape(CLOSE);
+
+    beginShape();
+    fill(colors[RGT]);
+    vertex(r, -r, -r);
+    vertex(r, r, -r);
+    vertex(r, r, r);
+    vertex(r, -r, r);
+    endShape(CLOSE);
+
+    //box(this.len);
+    pop();
+  }
+}
diff --git a/CodingChallenges/CC_142_Rubiks_Cube_1/P5/index.html b/CodingChallenges/CC_142_Rubiks_Cube_1/P5/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+
+  <title>Rubiks Cube 1 - Coding Challenge #142.1</title>
+
+  <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/freshfork/p5.EasyCam@1.0.10/p5.easycam.min.js"></script>
+</head>
+
+<body>
+  <script src="Cubie.js"></script>
+  <script src="sketch.js"></script>
+</body>
+
+</html>
diff --git a/CodingChallenges/CC_142_Rubiks_Cube_1/P5/sketch.js b/CodingChallenges/CC_142_Rubiks_Cube_1/P5/sketch.js
@@ -0,0 +1,63 @@
+// Rubiks Cube 1
+// The Coding Train / Daniel Shiffman
+// https://thecodingtrain.com/CodingChallenges/142.1-rubiks-cube.html
+// https://youtu.be/9PGfL4t-uqE
+
+// Since PeasyCam is only for Java, this instead uses p5.EasyCam,
+// which is based on PeasyCam but is made for p5.js.
+// It can be found here: https://github.com/freshfork/p5.EasyCam
+
+let cam;
+
+// UP, DOWN, RIGHT, LEFT, FRONT, BACK
+const UPP = 0;
+const DWN = 1;
+const RGT = 2;
+const LFT = 3;
+const FRT = 4;
+const BCK = 5;
+
+const colors = [
+  '#FFFFFF',
+  '#FFFF00',
+  '#FFA500',
+  '#FF0000',
+  '#00FF00',
+  '#0000FF'
+];
+
+const dim = 3;
+const cube = []; // Cubie[dim][dim][dim]; initialized in setup()
+
+function setup() {
+  // Disable the context menu on the canvas so the camera can use the right mouse button
+  createCanvas(600, 600, WEBGL).elt.oncontextmenu = () => false;
+
+  cam = createEasyCam({ distance: 400 });
+
+  for (let i = 0; i < dim; i++) {
+    cube[i] = [];
+    for (let j = 0; j < dim; j++) {
+      cube[i][j] = [];
+      for (let k = 0; k < dim; k++) {
+        const len = 50;
+        const offset = (dim - 1) * len * 0.5;
+        const x = len * i - offset;
+        const y = len * j - offset;
+        const z = len * k - offset;
+        cube[i][j][k] = new Cubie(x, y, z, len);
+      }
+    }
+  }
+}
+
+function draw() {
+  background(51);
+  for (let i = 0; i < dim; i++) {
+    for (let j = 0; j < dim; j++) {
+      for (let k = 0; k < dim; k++) {
+        cube[i][j][k].show();
+      }
+    }
+  }
+}
