Here’s the finished product. RIGHTARROW rotates about one of the axes, UPARROW rotates about the other. Would love for you to try it out and tell me what you think.
function setup() {
createCanvas(700, 700, WEBGL);
//constants for drawing the tetrapod
s = 50;
l = sqrt(8 / 3) * s;
//variables for animating
vAnimate = false;
eAnimate = false;
vCountdown = 100;
eCountdown = 100;
vAxis = createVector(1, 1, 1);
eAxis = createVector(1, 0, 0);
//indexing parts of the tetrapod to use in for-loop
hub = [
[1, 1, 1],
[-1, -1, 1],
[1, -1, -1],
[-1, 1, -1],
[1, 1, -1],
[1, -1, 1],
[-1, 1, 1],
[-1, -1, -1],
];
feet = [
[-1, -1, -1],
[1, 1, -1],
[-1, 1, 1],
[1, -1, 1],
];
//colors for the legs and feet
colors = ["#F500D3", "#FFBC00", "#019AFF", "#41F501"];
}
//interaction
function keyPressed() {
if (keyCode === RIGHT_ARROW) {
vAnimate = true;
vCountdown = 100;
}
if (keyCode === UP_ARROW) {
eAnimate = true;
eCountdown = 100;
}
}
function draw() {
background(220);
orbitControl();
push();
// draw rotation axes
strokeWeight(3);
line(-500, 0, 500, 0);
line(-500, -500, -500, 500, 500, 500);
//rotate about vAxis
if (vAnimate == true) {
rotate((((100 - vCountdown) / 100.0) * 2 * PI) / 3, vAxis);
for (i = 0; i <= 3; i++) {
strokeWeight(1);
//HUB
fill(255);
beginShape();
vertex(s * hub[i][0], 0, 0);
vertex(0, s * hub[i][1], 0);
vertex(0, 0, s * hub[i][2]);
endShape(CLOSE);
//LEGS
fill(color(colors[i]));
beginShape();
vertex(feet[i][0] * (s + l), feet[i][1] * l, feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * (s + l), feet[i][2] * l);
vertex(0, feet[i][1] * s, 0);
vertex(feet[i][0] * s, 0, 0);
endShape(CLOSE);
beginShape();
vertex(feet[i][0] * (s + l), feet[i][1] * l, feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * l, feet[i][2] * (s + l));
vertex(0, 0, feet[i][2] * s);
vertex(feet[i][0] * s, 0, 0);
endShape(CLOSE);
beginShape();
vertex(feet[i][0] * l, feet[i][1] * (s + l), feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * l, feet[i][2] * (s + l));
vertex(0, 0, feet[i][2] * s);
vertex(0, feet[i][1] * s, 0);
endShape(CLOSE);
//FEET
beginShape();
vertex(feet[i][0] * (s + l), feet[i][1] * l, feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * (s + l), feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * l, feet[i][2] * (s + l));
endShape(CLOSE);
}
vCountdown--;
if (vCountdown == 0) {
vAnimate = false;
colors = [colors[0], colors[3], colors[1], colors[2]];
}
}
//rotate about eAxis
else if (eAnimate == true) {
rotate(((100 - eCountdown) / 100.0) * PI, eAxis);
for (i = 0; i <= 3; i++) {
strokeWeight(1);
//HUB
fill(255);
beginShape();
vertex(s * hub[i][0], 0, 0);
vertex(0, s * hub[i][1], 0);
vertex(0, 0, s * hub[i][2]);
endShape(CLOSE);
//LEGS
fill(color(colors[i]));
beginShape();
vertex(feet[i][0] * (s + l), feet[i][1] * l, feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * (s + l), feet[i][2] * l);
vertex(0, feet[i][1] * s, 0);
vertex(feet[i][0] * s, 0, 0);
endShape(CLOSE);
beginShape();
vertex(feet[i][0] * (s + l), feet[i][1] * l, feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * l, feet[i][2] * (s + l));
vertex(0, 0, feet[i][2] * s);
vertex(feet[i][0] * s, 0, 0);
endShape(CLOSE);
beginShape();
vertex(feet[i][0] * l, feet[i][1] * (s + l), feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * l, feet[i][2] * (s + l));
vertex(0, 0, feet[i][2] * s);
vertex(0, feet[i][1] * s, 0);
endShape(CLOSE);
//FEET
beginShape();
vertex(feet[i][0] * (s + l), feet[i][1] * l, feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * (s + l), feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * l, feet[i][2] * (s + l));
endShape(CLOSE);
}
eCountdown--;
if (eCountdown == 0) {
eAnimate = false;
colors = [colors[2], colors[3], colors[0], colors[1]];
}
}
//draw shape in current orientation
else {
for (i = 0; i <= 3; i++) {
strokeWeight(1);
//HUB
fill(255);
beginShape();
vertex(s * hub[i][0], 0, 0);
vertex(0, s * hub[i][1], 0);
vertex(0, 0, s * hub[i][2]);
endShape(CLOSE);
//LEGS
fill(color(colors[i]));
beginShape();
vertex(feet[i][0] * (s + l), feet[i][1] * l, feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * (s + l), feet[i][2] * l);
vertex(0, feet[i][1] * s, 0);
vertex(feet[i][0] * s, 0, 0);
endShape(CLOSE);
beginShape();
vertex(feet[i][0] * (s + l), feet[i][1] * l, feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * l, feet[i][2] * (s + l));
vertex(0, 0, feet[i][2] * s);
vertex(feet[i][0] * s, 0, 0);
endShape(CLOSE);
beginShape();
vertex(feet[i][0] * l, feet[i][1] * (s + l), feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * l, feet[i][2] * (s + l));
vertex(0, 0, feet[i][2] * s);
vertex(0, feet[i][1] * s, 0);
endShape(CLOSE);
//FEET
beginShape();
vertex(feet[i][0] * (s + l), feet[i][1] * l, feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * (s + l), feet[i][2] * l);
vertex(feet[i][0] * l, feet[i][1] * l, feet[i][2] * (s + l));
endShape(CLOSE);
}
}
pop();
}