Category: Project-04-String-Art

// Se A Kim
// seak
// Section D

var numLines = 100;

function setup() {
    createCanvas(400, 300);
    background(200);
    dx1 = (0-0)/numLines;
    dy1 = (100-0)/numLines;
    dx2 = (200-0)/numLines;
    dy2 = (400-0)/numLines;
}

function draw() {
    strokeWeight(.5);
    background(255);

    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 200;

    for (var i = 0; i <= numLines; i += 1) {
        stroke(0, 100, 200);
        line(0, i*3, 400, 0);
        line(100, i*3, 400, 0);   
        line(200, i*3, 400, 0);   
        line(300, i*3, 400, 0); 
        stroke(0, 200, 300); 
        line(i*4, 100, 0, 0);
        line(i*4, 200, 0, 0);
        line(i*4, 300, 0, 0);
        line(i*4, 400, 0, 0);
        stroke(300, 200, 300);
        line(400, 300, i*3, 100);
        line(400, 300, i*3, 200);
        line(400, 300, i*3, 300);
        line(400, 300, i*3, 400);
        stroke(300, 200, 100);
        line(0, 300, i*4, 100);
        line(0, 300, i*4, 200);
        line(0, 300, i*4, 300);
        line(0, 300, i*4, 400);

        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }
}

I decided to create multiple lines coming out of the four corners of the canvas to get a better understanding of drawing string lines.

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.

sketch

// 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") {
            radLX++;
        }
        if (key == "s") {
            radLX--;
        }
        if (key == "a") {
            circleLX--;
        }
        if (key == "d") {
            circleLX++;
        }
        
        // right ring
        if (keyCode == UP_ARROW) {
            radRX++;
        }
        if (keyCode == DOWN_ARROW) {
            radRX--;
        }
        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:
// https://www.youtube.com/watch?v=ih20l3pJoeU
// 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]);
}

//Jessie Chen
//D
//String Art

function setup() {
    createCanvas(400, 300);
}

function draw() {
    background(0);
    var x1 = width/2;
    var y1 = height/2;
    //center white
    stroke(255);
    strokeWeight(0.1);
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 5) {
        x = cos(radians(angle)) * radius + 200; 
        y = sin(radians(angle)) * radius + 150;
        line(x1, y1, x , y);
    }
    //bottom right green
    stroke(24, 200, 90);
    strokeWeight(0.3)
    radius = mouseY;
    for (angle = 0; angle <360; angle=angle+ 3) {
        x = cos(radians(angle)) * radius + 300;
        y = sin(radians(angle)) * radius + 200;
        line(x1, y1, x , y);
    }
    //top left yellow
    stroke(240, 200, 90);
    strokeWeight(0.3)
    radius = mouseY;
    for (angle = 0; angle <360; angle=angle+ 3) {
        x = cos(radians(angle)) * radius + 100;
        y = sin(radians(angle)) * radius + 100;
        line(x1, y1, x , y);
    }
    //top right red
    stroke(200, 40, 90);
    strokeWeight(0.3)
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 5) {
        x = cos(radians(angle)) * radius + 300;
        y = sin(radians(angle)) * radius + 100;
        line(x1, y1, x , y);
    }
    //bottom left blue
    stroke(10, 40, 190);
    strokeWeight(0.3)
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 5) {
        x = cos(radians(angle)) * radius + 100;
        y = sin(radians(angle)) * radius + 200;
        line(x1, y1, x , y);
    }
    //top center pink
    stroke(255, 138, 200);
    strokeWeight(0.3)
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 20) {
        x = cos(radians(angle)) * radius + 200;
        y = sin(radians(angle)) * radius + 100;
        line(x1, y1, x , y);
    }
    //bottom center purple
    stroke(160, 0, 255);
    strokeWeight(0.3)
    radius = mouseY;
    for (angle = 0; angle <360; angle=angle+ 20) {
        x = cos(radians(angle)) * radius + 200;
        y = sin(radians(angle)) * radius + 200;
        line(x1, y1, x , y);
    }
}

This was inspired by lasers and how they look when they are projected.

string art string art string art string art string art string art s-

//Iris Yip
//15104 Section D

var numLines = 300;

function setup() {
    createCanvas(400, 400);
}

function draw(){
    background(0);
    var x1 = -9;
    var y1 = -9;
    var x2 = width;
    var y2 = height;

    for(var i = 0; i <= numLines; i += 1) {     
        stroke(i,mouseX,300);
        line(mouseX-50, y1*i, x2*i, y2*i);
        line(x1*i,mouseY,x2*i,y2*i);     
        
        stroke(200,i,300);
        line(x2,0,mouseX,mouseY)
        line(0,0,mouseX,mouseY)
        
        stroke(255,mouseX,mouseY) //conglomerate of lines to the left
        line(x1*i,x2/2+100,mouseX,mouseY)
        line(x1*i,x1/2-100,mouseX,mouseY)
        
        stroke(mouseX,100,mouseY) //height/2 thing
        line(i*100,y2/2-300,mouseX,mouseY)
        line(i*3,y2/2,mouseX,mouseY)
    }
}

this was fun

I had a lot of fun changing the colors and locations of the lines based on mouse movement. It was also cool to see the strings and colors overlap and interact together.

//Maggie Ma
//Section D

var dx1;
var dy1;
var dx2;
var dy2;
var numLines =100;

function setup() {
    createCanvas(400, 500);
    background(200);
    line(0, 0, 0, 400);
    line(0, 400, 0, 500);
    dx1 = (0)/numLines;
    dy1 = (500-0)/numLines;
    dx2 = (400-0)/numLines;
    dy2 = (500-500)/numLines;
}

function draw() {
	background(mouseX,mouseY,100); //colorful background changes w/ mouse
	strokeWeight(.75);

    var x1 = 0;
    var y1 = 0;
    var x2 = 400;
    var y2 = 400;
    for (var i = 0; i <= numLines; i += 1) {

    	stroke(0,0,255) //bottom left lines (blue)
        line(x1, y1, x2+mouseX, y2);

        stroke(255,0,0); //top right lines (red)
        line(x1+400+mouseX, y1+500, x2-400, y2-400);

        stroke(0,255,0); //top left green lines
        line(x1,y1, x2-400+mouseX, mouseY);

        stroke(mouseY); //moving lines black to white
        line(width/2*(i/20), height/2*(i/20), mouseX*20, mouseY*20);
        line(mouseX,400,i*5,mouseY);
        line(i*5, mouseY, mouseX, 500);
        line(mouseX,i*5, 400, mouseY);

        stroke(mouseX,100,mouseY); //moving lines colorful
        line(0,i*5, mouseX, 0);
        line(0,mouseY, 0, i*10);
     	line(mouseX, i*5, 0, 500);


        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

}