small tweaks

sketch.js

@@ -31,7 +31,7 @@ function setup() {
 function draw() {
   scale(0.75);
 
-  // store current mouse location in a 3D space
+  // store current mouse location inside of the projected 3D space
   let locX = mouseX - width / 2;
   let locY = mouseY - height / 2;
 
@@ -58,6 +58,26 @@ function draw() {
   }
 }
 
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+  background(0);
+}
+
+// generate a random animation
+function randomAnimation(animationValue) {
+  rotateX((frameCount * animationValue) / 100);
+  rotateY((frameCount * animationValue) / 100);
+  rotateZ((frameCount * animationValue) / 100);
+  translate(animationValue * 5, animationValue * 5, animationValue * 5);
+}
+
+// generate a random integer from a range, inclusive
+function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
 // generate a random shape, including its main movement based on frameCount
 class randoShape {
   // parameters to build the shape
@@ -85,29 +105,22 @@ class randoShape {
   }
 }
 
-// generate a random animation
-function randomAnimation(animationValue) {
-  rotateX((frameCount * animationValue) / 100);
-  rotateY((frameCount * animationValue) / 100);
-  rotateZ((frameCount * animationValue) / 100);
-  translate(animationValue * 5, animationValue * 5, animationValue * 5);
-}
-
-// generate a random integer from range, inclusive
-function getRandomInt(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-function windowResized() {
-  resizeCanvas(windowWidth, windowHeight);
-  background(0);
+// switch between the two types of shape (torus, box)
+function switchType() {
+  if (shapeSelect == 1) {
+    shapeSelect = 2;
+  } else {
+    shapeSelect = 1;
+  }
 }
 
-// generate a new set of shapes
-function regenerateShapes() {
-  // show the array with a random specularMaterial or a normalMaterial
+// switch between the two types of material (normalMaterial, specularMaterial)
+function switchColour() {
+  if (materialSelect == 1) {
+    materialSelect = 2;
+  } else {
+    materialSelect = 1;
+  }
   if (materialSelect == 2) {
     specularMaterial(
       lerpColor(
@@ -127,35 +140,11 @@ function regenerateShapes() {
     normalMaterial();
     noStroke();
   }
-
-  // generate a new set of random parameters
-  randNumA = getRandomInt(-10, 10);
-  randNumB = getRandomInt(50, 100);
-
-  // generate a new array of randoShape objects
-  shape = [];
-  arrayNum = getRandomInt(5, 25);
-  for (let i = 0; i < arrayNum; i++) {
-    shape[i] = new randoShape();
-  }
 }
 
-// switch between the two types of shape (torus, box)
-function switchType() {
-  if (shapeSelect == 1) {
-    shapeSelect = 2;
-  } else {
-    shapeSelect = 1;
-  }
-}
-
-// switch between the two types of material (normalMaterial, specularMaterial)
-function switchColour() {
-  if (materialSelect == 1) {
-    materialSelect = 2;
-  } else {
-    materialSelect = 1;
-  }
+// generate a new set of shapes
+function regenerateShapes() {
+  // show the array with a random specularMaterial or a normalMaterial
   if (materialSelect == 2) {
     specularMaterial(
       lerpColor(
@@ -175,6 +164,17 @@ function switchColour() {
     normalMaterial();
     noStroke();
   }
+
+  // generate a new set of random parameters
+  randNumA = getRandomInt(-10, 10);
+  randNumB = getRandomInt(50, 100);
+
+  // generate a new array of randoShape objects
+  shape = [];
+  arrayNum = getRandomInt(5, 25);
+  for (let i = 0; i < arrayNum; i++) {
+    shape[i] = new randoShape();
+  }
 }
 
 // clear the background

style.css

@@ -91,6 +91,7 @@ canvas {
   text-align: left;
 }
 
+/* responsiveness */
 @media only screen and (max-device-width: 480px) {
   .header,
   .footer {