hyt-Project-04: Dynamic Drawing

hyt-04-project

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-03-dynamic-drawing


var angle = 0; // line rotating angle

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

}


function draw() {

// left side gradient lines
    var x1 = 0; 
    var y1 = 0; 

    push();
    for (var i = 0; i < 200; i++) {
        translate(mouseX, 0);
        map(mouseX, 0, width, 100, 250);
        stroke(150, 201 - i * 2, 202);
        strokeWeight(1);
        x1 += 5;
        y1 += 5;
        line(x1, y1, x1 + i * 7, y1);
    }
    pop();

// left bottom "shadow" on the highlight
    var x2 = 0; 
    var y2 = 0;
    push();
    for (var i = 0; i < 200; i++) {
        //rotate(radians(x2 *3));
        stroke(150 + i * 2, 189, 226);
        x2 -= 5; 
        y2 += 5; 
        line(x1, y1, 0, y2);
    }
    pop();

// left top corner
    var x3 = 20; 
    var y3 = height / 2; 
    for (var i = 0; i < 50; i++) {
        stroke(125, 206, 160 +i * 10);
        line(x3, 0, 0, y3);
        x3 += 10;
        y3 -= 10;
    }

// right top corner
    var x4 = width / 2; 
    var y4 = height / 2; 
    for (var i = 0; i < 50; i++) {
        stroke(246, 221, 204 + i *4);
        line(x4, 0, width, y4);
        x4 -= 10; 
        y4 -= 10;
    }

// spotlight

ellipse(350, 250, 40, 40);

}

For this project i wanted to create something that resembles a stage lighting design, hence the creation of this neon color drawing. I thought the corner drawings were actually not as hard as aligning perfectly the middle section (the two horizontal lined triangles).

Leave a Reply