Project 4

sketch

// Michelle Dang
//Section D
//mtdang
var dx1;
var dy1;
var dx2;
var dy2;

var dx3;
var dy3;
var dx4;
var dy4;


var numLines = 40; //number of lines

function setup() {
    createCanvas(400, 400);
    background(0);

    dx1 = -600/numLines; 
    dy1 = 50/numLines;
    dx2 = (200)/numLines; //dx4 dx2 is negative
    dy2 = (-200)/numLines;

    dx3 = 0; 
    dy3 = 200/numLines;
    dx4 = -300/numLines;
    dy4 = -200/numLines;

}

function draw() {
    background(0);

//white interactive shape
    stroke(255);
    var x1 = constrain(mouseX, 200, 200);
    var y1 = 0;
    var x2 = 0;
    var y2 = mouseY
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += -dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += dy2;
    }
    var x1 = constrain(mouseX, 200, 200);
    var y1 = 0;
    var x2 = height;
    var y2 = mouseY;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

//red shape 1
    stroke(255,0,0);
    var x1 = width/2;
    var y1 = 0;
    var x2 = width/2;
    var y2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx3;
        y1 += dy3;
        x2 += dx4;
        y2 += dy4;
    }
//red shape 2
    var x1 = width/2;
    var y1 = 0;
    var x2 = width/2;
    var y2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx3;
        y1 += dy3;
        x2 += -dx4;
        y2 += dy4;
    }

//blue shape 1
    stroke(0,0,255);
    var x1 = 0;
    var y1 = 0;
    var x2 = height;
    var y2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
// blue shape 2
    var x1 = width;
    var y1 = 0;
    var x2 = 0;
    var y2 = height;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += -dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += dy2;
    }



   }

I struggled a lot at first trying to understand the starting example code, but after playing around with the numbers it wasn’t too bad. I changed some of the variables to be negative to create a symmetrical effect 🙂