Project 04 – String Art

For this project, I wanted to create something in 3D space. I was mainly inspired by the MS-DOS screensavers and the Tron aesthetic that’s popular with vaporwave artists.
There are some actions the user can perform in this. Use the WASD keys to control the size and x position of the left ring, and use the arrow keys to control the right ring.
Note: The wireframe scrolling background acts a little weird when the rings change size.

``````// predefine canvas width and height for use in other functions
var w = 600;
var h = 600;

// define variables
var angleCtr = 0;
var circleRX = 200;
var circleLX = -200;
var radRX = 200;
var radLX = 200;
var degOfSymmetry = 36;
var rainbowCtr = 0;
var freq = 0.1;
var zCtr = 0;

function setup() {
createCanvas(w, h);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
background(0);
// get rainbow function
var rr = sin(rainbowCtr) * 127 + 128;
var rg = sin(rainbowCtr + (2*PI/3)) * 127 + 128;
var rb = sin(rainbowCtr + (4*PI/3)) * 127 + 128;
c = color(rr, rg, rb);
strokeWeight(2);

// 3d projection effectively doubles canvas size, 0, 0, z is now the center
// of the canvas

// make ring 1 in xyz coords
var centerY = 0; // canvas centers now different
var centerZ = 1000; // z == 0 is in the camera's "face"
var distX = circleRX - circleLX;
let ringOne = [];

for (i = 0; i < degOfSymmetry; i++) {
var loopAngle = radians(angleCtr) - (i * 2*PI / degOfSymmetry)
var tZ = centerZ + radLX * cos(loopAngle);
var tY = centerY + radLX * sin(loopAngle);
ringOne.push([circleLX, tY, tZ]);
}

// make ring 2 in xyz coords
let ringTwo = [];

for (i = 0; i < degOfSymmetry; i++) {
var loopAngle = radians(-angleCtr) + (i * 2*PI / degOfSymmetry)
var tZ = centerZ + radRX * cos(loopAngle);
var tY = centerY + radRX * sin(loopAngle);
ringTwo.push([circleRX, tY, tZ]);
}

// project to xy
let rOProj = [];
let rTProj = [];

for (let i = 0; i < ringOne.length; i++) {
rOProj.push(projMatrixMult(ringOne[i]));
}
for (let i = 0; i < ringTwo.length; i++) {
rTProj.push(projMatrixMult(ringTwo[i]));
}

// this scales the image to be on screen
for (let i = 0; i < rOProj.length; i++) {
rOProj[i][0] += 1;
rOProj[i][1] += 1;

rOProj[i][0] *= w / 2;
rOProj[i][1] *= h / 2;
}
for (let i = 0; i < rTProj.length; i++) {
rTProj[i][0] += 1;
rTProj[i][1] += 1;

rTProj[i][0] *= w / 2;
rTProj[i][1] *= h / 2;
}

// draw squares for perspective reference
dLX = radLX * 2;
dRX = radRX * 2;
for (let i = 0; i < 50; i++) {
stroke("purple");
drawTestCube(circleLX, -radLX, (i * dLX) - zCtr, 0, dLX, dLX);
drawTestCube(circleRX, -radRX, (i * dRX) - zCtr, 0, dRX, dRX);
drawTestCube(circleLX, -radLX - dLX, (i * dLX) - zCtr, 0, dLX, dLX);
drawTestCube(circleRX, -radRX - dRX, (i * dRX) - zCtr, 0, dRX, dRX);
drawTestCube(circleLX, radLX, (i * dLX) - zCtr, 0, dRX, dLX);
drawTestCube(circleRX, radRX, (i * dRX) - zCtr, 0, dRX, dRX);
drawTestCube(circleLX, -radLX - dLX, (i * dLX) - zCtr, distX, 0, dLX);
drawTestCube(circleLX, radLX + dLX, (i * dRX) - zCtr, distX, 0, dRX);
}

// draw line between top-bottom, left-right pairs
for (let i = 0; i < (rOProj.length + rTProj.length) / 2; i++) {
fill(c);
stroke(c);
circle(rOProj[i][0], rOProj[i][1], 5);
circle(rTProj[i][0], rTProj[i][1], 5);
line(rOProj[i][0], rOProj[i][1], rTProj[i][0], rTProj[i][1]);
}

// allow user to control ring shape and size
if (keyIsPressed) {
// left ring
if (key == "w") {
}
if (key == "s") {
}
if (key == "a") {
circleLX--;
}
if (key == "d") {
circleLX++;
}

// right ring
if (keyCode == UP_ARROW) {
}
if (keyCode == DOWN_ARROW) {
}
if (keyCode == LEFT_ARROW) {
circleRX--;
}
if (keyCode == RIGHT_ARROW) {
circleRX++;
}
}

// increment any counters
angleCtr = (angleCtr + 1) % 360;
rainbowCtr = (rainbowCtr + freq) % (2*PI);
zCtr = (zCtr + 5) % max(dLX, dRX);
}

// disable normal browser key functions when focused
function keyPressed() {
return false;
}

// uses projection matrix seen in this video:
// the video is mostly math about projecting 3d coordinates to 2d coordinates
function projMatrixMult(coords) {
// aspect ratio
var a = w / h;

// field of view
var fov = QUARTER_PI;
f = 1 / tan(fov / 2);

// range of view
var zNear = 0.1;
var zFar = 1000;

var q = zFar / (zFar - zNear);

if (coords.length != 3) {
print("Improper array size.");
return coords;
} else {
// this calculates the result of multiplying [x, y, z, 1]
// with a 4x4 projection matrix (not shown for lack of use without
// the math.js extension)
let projMat = [a * f * coords[0], f * coords[1],
coords[2] * q - zNear * q, coords[2]];

if (coords[2] != 0) {
projMat[0] /= projMat[3];
projMat[1] /= projMat[3];
projMat[2] /= projMat[3];
projMat[3] /= projMat[3];
return projMat;
} else {
print("z is equal to 0");
return coords;
}
}
}

// self explanatory
function drawTestCube(x, y, z, wid, hei, d) {
// push 3d coords to an array
let cubePoints3D = [];
cubePoints3D.push([x, y + hei, z]); // front bottom left
cubePoints3D.push([x, y, z]); // front top left
cubePoints3D.push([x + wid, y + hei, z]); // front bottom right
cubePoints3D.push([x + wid, y, z]); // front top right
cubePoints3D.push([x, y + hei, z + d]); // back bottom left
cubePoints3D.push([x, y, z + d]); // back top left
cubePoints3D.push([x + wid, y + hei, z + d]); // back bottom right
cubePoints3D.push([x + wid, y, z + d]); // back top right

// get projection and add to list of points
let cubeProj = [];
for (let i = 0; i < cubePoints3D.length; i++) {
cubeProj.push(projMatrixMult(cubePoints3D[i]));
}

// this scales the image to be on screen
for (let i = 0; i < cubeProj.length; i++) {
cubeProj[i][0] += 1;
cubeProj[i][1] += 1;

cubeProj[i][0] *= w / 2;
cubeProj[i][1] *= h / 2;
}

// i'm almost certain there's a way this can be done with a for loop
// but this is fine for a small project
line(cubeProj[0][0], cubeProj[0][1], cubeProj[1][0], cubeProj[1][1]);
line(cubeProj[6][0], cubeProj[6][1], cubeProj[7][0], cubeProj[7][1]);
line(cubeProj[0][0], cubeProj[0][1], cubeProj[2][0], cubeProj[2][1]);
line(cubeProj[0][0], cubeProj[0][1], cubeProj[4][0], cubeProj[4][1]);
line(cubeProj[1][0], cubeProj[1][1], cubeProj[5][0], cubeProj[5][1]);
line(cubeProj[1][0], cubeProj[1][1], cubeProj[3][0], cubeProj[3][1]);
line(cubeProj[2][0], cubeProj[2][1], cubeProj[3][0], cubeProj[3][1]);
line(cubeProj[2][0], cubeProj[2][1], cubeProj[6][0], cubeProj[6][1]);
line(cubeProj[3][0], cubeProj[3][1], cubeProj[7][0], cubeProj[7][1]);
line(cubeProj[4][0], cubeProj[4][1], cubeProj[5][0], cubeProj[5][1]);
line(cubeProj[4][0], cubeProj[4][1], cubeProj[6][0], cubeProj[6][1]);
line(cubeProj[5][0], cubeProj[5][1], cubeProj[7][0], cubeProj[7][1]);
}
``````