Project-04

sketch
var x1 = 0
var x2 = 0
var y1 = 0
var y2 = 300

var dx3;
var dy3;
var dx4;
var dy4;
numLines = 80;

var dx5;
var dy5;
var dx6;
var dy6;


function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(66, 245, 236);

	stroke(255); //white background lines
	for (var p = 0; p <= 400; p += 10) {
		line(p, 0, 1.5*p, 300);
		line(1.5*p, 0, p, 300);
	}
    
    stroke(245, 66, 173); //top left pink lines
    for (x1 = 0; x1 <= 400; x1 +=10) {
    	line(x1, y1, x2, y2);
        y2 -= 10;
    }

    push();
    translate(400, 0); //top right pink lines
    rotate(radians(180));
    for (x1 = 0; x1 <= 400; x1 += 5) {
    	line(x1, y1, x2, y2-200);
    	y2 += 5
    }
    pop();
    
    stroke(0, 150, 0); //green triangle
    line(330, 100, 100, 300);
    line(330, 100, 320, 300);
    dx3 = (100-330)/numLines;
    dy3 = (300-100)/numLines;
    dx4 = (320-330)/numLines;
    dy4 = (300-100)/numLines;

    var x3 = 330;
    var y3 = 100;
    var x4 = 330;
    var y4 = 100;
    for (var i = 0; i <= numLines; i+=1) {
    	line(x3, y3, x4, y4);
    	x3 += dx3;
    	y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

    stroke (255, 0, 255); //purple triangle
    line(60, 100, 275, 300);
    line(60, 100, 70, 300);
    dx5 = (275-60)/numLines;
    dy5 = (300-100)/numLines;
    dx6 = (70-60)/numLines;
    dy6 = (300-100)/numLines;

    var x5 = 60;
    var y5 = 100;
    var x6 = 60;
    var y6 = 100;
    for (var j = 0; j <= numLines; j+=1) {
    	line(x5, y5, x6, y6);
    	x5 += dx5;
    	y5 += dy5;
    	x6 += dx6;
    	y6 += dy6;
    }

  
    noLoop();
    

}


I had a color scheme in mind when I started, then I tried messing around with different shapes and line spacing, and this is what I came up with.

Leave a Reply