Alice Fang–Project 04–String Art

sketch

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-04
*/

var x1; // (x1, y1, x2, y2) variables for lines
var y1;
var x2;
var y2;

var circlesize = 270; // circle diameter
var squaresize = 80; // square length

function setup() {
    createCanvas(400, 300);
    background(0);
    
}
function draw() {
    stroke(57, 255, 20);
    strokeWeight(0.5);

    // bottom left corner curve
    for (var i = 0; i < width; i += 20) {
        x1 = i;
        y1 = height; 
        y2 = i;
        x2 = 0; 
        line(x1, y1, x2, y2);
    }

    // top right corner curve
    for (var i = width; i > 0; i -= 20) {
        x1 = i + width - 300;
        y1 = 0; 
        y2 = i;
        x2 = width; 
        line(x1, y1, x2, y2);
    }

    //bottom right corner curve
    push();
    translate(width / 4, height);
    rotate(radians(270));
    for (var i = 0; i < width; i += 20) {
        x1 = i;
        y1 = height; 
        y2 = i;
        x2 = 0; 
        line(x1, y1, x2, y2);
    }
    pop();

    //top left corner curve
    push();
    translate(0, height + width / 4);
    rotate(radians(270));
    for (var i = width; i > 0; i -= 20) {
        x1 = i + width - 300;
        y1 = 0; 
        y2 = i;
        x2 = width; 
        line(x1, y1, x2, y2);
    }
    pop();

    // center square outline
    noFill();
    rect(width / 2 - 40, height / 2 - 40, squaresize, squaresize);

    // white circle outlines 
    stroke(240);
    ellipse(width / 2, height / 2, circlesize, circlesize);
    ellipse(width / 2, height / 2, 115, 115);
    ellipse(width / 2, height / 2, circlesize / 15, circlesize / 15);

    fill(240);
    ellipse(width / 2, height / 2, circlesize / 27, circlesize / 27);

    // curves generated in square
    noFill();
    strokeWeight(0.5);
    stroke(57, 255, 20);

    push(); // translate (0, 0) to top left corner of square
    translate(width / 2 - squaresize/2, height / 2 - squaresize/2);
    square(0, 0); // top X shape (function square() established below)

    push();
    translate(0, squaresize); // left X shape
    rotate(radians(270));
    square(0, 0);
    pop();

    push();
    translate(squaresize, 0); // right X shape
    rotate(radians(90));
    square(0, 0);
    pop();

    push(); 
    translate(squaresize, squaresize); // bottom X shape
    rotate(radians(180));
    square(0, 0);
    pop();

    pop();
    
    // cross hair (white perpendicular lines)
    stroke(255);
    line(width / 2, 0, width / 2, height);
    line(0, height / 2, width, height / 2);
}

function square(x, y){ // produces X-shape within square
        push();
        translate(x, y);
        noFill();
        strokeWeight(0.5);
        stroke(57, 255, 20);
        for (i = 0; i < 30; i+=10) {
            x1 = 0;
            x2 = squaresize;
            y1 = .75*i + 20;
            y2 = -i + 20;
            line(x1, y1, x2, y2);
            line(x2, y1, x1, y2);
        }
        pop();
}    

This was inspired by lasers that my mind associates with laser security systems, as well as eye-scanning mechanisms. (Or perhaps, a target scope aimed at an eye? They’re all interpretations within the same realm). The color scheme of neon green and black were especially influenced by this. I also used this project as an opportunity to try out and practice defining and creating my own function.