Kai Zhang-Project-04-String-Art

sketch

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-04

var a;
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;
var x4;
var y4;
var x5;
var y5;
var x6;
var y6;
//assign all the coordinators

var d0 = 50;
var d1 = 80;
var d2 = 120;
var d3 = 160;
var d4 = 190;
//various diameters of curves

function setup() {
    createCanvas(400, 300);
    background(0);
    angleMode(DEGREES);
}


function draw() {
    
    for (a = -90; a <= 90; a += 5) {
        x1 = 80 + d0 * cos(a);
        y1 = 150 - d0 * sin(a);
        x2 = 320 - d0 * cos(a);
        y2 = 150 + d0 * sin(a);
        x3 = 80 - d0 * cos(a);
        y3 = 50 + d0 * sin(a);
        x4 = 320 + d0 * cos(a);
        y4 = 250 - d0 * sin(a);

        stroke(100 + 3 * a);
        line(x1, y1, x2, y2);
        line(x3, y3, x4, y4);
    }

    noFill();
    stroke(250);
    ellipse(200, 150, 40, 40);
    //first ring

    for (a = 90; a <= 180; a += 2) {
        x5 = 200 + d1 * cos(a);
        y5 = 250 - d1 * sin(a);
        x6 = 200 - d1 * cos(a)
        y6 = 50 + d1 * sin(a);

        stroke(0 + 2 * (a - 130));
        line(x5, y5, x6, y6);
    }

    stroke(190);
    ellipse(200, 150, 70, 70);
    //second ring

    for (a = 120; a <= 180; a += 2) {
        x5 = 200 + d2 * cos(a);
        y5 = 250 - d2 * sin(a);
        x6 = 200 - d2 * cos(a)
        y6 = 50 + d2 * sin(a);
        //the x and y variables can be reused because the previous marks wouldn't disappear

        stroke(0 + 2.5 * (a - 120));
        line(x5, y5, x6, y6);
    }
    
    stroke(120);
    ellipse(200, 150, 100, 100);
    //third ring

    for (a = 150; a <= 180; a += 1) {
        x5 = 200 + d3 * cos(a);
        y5 = 250 - d3 * sin(a);
        x6 = 200 - d3 * cos(a)
        y6 = 50 + d3 * sin(a);

        stroke(50 + 4 * (a - 160));
        line(x5, y5, x6, y6);
    }

    stroke(80);
    ellipse(200, 150, 130, 130);
    //fourth ring

    for (a = 130; a <= 170; a += 1) {
        x5 = 200 + d4 * cos(a);
        y5 = 250 - d4 * sin(a);
        x6 = 200 - d4 * cos(a)
        y6 = 50 + d4 * sin(a);

        stroke(50 + 4 * (a - 160));
        line(x5, y5, x6, y6);
    }
}

One of the rather stunning effects of string art is it’s using 1D lines to represent 2D surfaces. In this project, I’m willing to take the challenge of giving it the third dimension. To achieve this, I chose the monochrome color for the lines and assign them with gradient changing shades so as if they have depth into the canvas. On top of that, I also hooped the elegant flowing surfaces with rings that overlay on different layers of the drawing. In this case, we’re using 2D work space to create 3D rendering visual effects using merely different shades of gray.