Month: September 2018

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.

sketch

/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project-04
*/

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

function draw() {
    background(0);
    
    var y = 0;
    var x = 0;
    var y1 = height/2;
    var x1 = width/2
    var y2 = height/4;
    var x2 = width/4;

    //dark gray curves
    for (var z = 0; z < 35; z++) {
        stroke(180 - x2/2);
        //bottom left curve
        line(width - x2, height, 0, height - y2);
        //top right curve
        line(x2, 0, width, y2);

        x2 += 6;
        y2 += 6;

    }
    
    //gray center curves
    for (var i = 0; i < 44; i++) {
        stroke(x/2);
        //bottom center curve
        line(width - x, height - y, x, height);
        //top center curve
        line(x, y, width - x, 0);

        x += 7;
        y += 7;
    }

    //white curves
    for (var w = 0; w < 20; w++) {

        stroke(255);
        //bottom right curve
        line(x1, height, width, height - y1);
        //top left curve
        line(width - x1, 0, 0, y1);

        x1 = x1*1.04;
        y1 = y1*1.04;

    }

}

Although confusing at first, I had a lot of fun with this assignment! While it’s frustrating when the lines don’t map out the way you want them to, it was always a surprise when I refreshed my browser. I also played around with adjusting the stroke color in my for loops, which led to some pretty cool gradients!