var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var numl = 40;//linenumber
var sw = 0.5;//strokeweight
function setup(){
createCanvas(300,400);
}
function draw(){
background(0);
strokeWeight(1);
//reference red
stroke(183,58,66);
line(10,10,50,250);
line(250,10,250,350);
line(50,250,250,350);
dx1 = (50-10)/numl;
dy1 = (250-10)/numl;
dx2 = (250-250)/numl;
dy2 = (350-10)/numl;
dx3 = (250-50)/numl;
dy3 = (350-250)/numl;
//defineshape
var x1 = 10;
var y1 = 10;
var x2 = 250;
var y2 = 10;
var x3 = 50;
var y3 = 350;
//drawlines
for (var c = 0; c <= numl; c = c + 1){
stroke(255,0,0);
strokeWeight(sw);
//squarelinepath
line(x1,y1,x2,y2);
//trianglelinepath
line(x2,y1,x1,x2);
//curvepath
line(x3,y1,x2,y2);
//rect
line(x1,y1,x2,y1);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
x3 += dx3;
y3 += dy3;
//interaction:changeslineform
if (mouseIsPressed){
x1 += 1;
y1 += 1;
x2 += 3;
y2 += 2;
x3 += 3;
y3 += 3;
}
}
}
I enjoyed coding this project because by changing a few variables, I get to create different interesting compositions. Compared to the previous projects, I feel like this one is more intuitive than planned. During the process, I faced difficulty understanding what each variable does. However, after looking at some examples and experimenting, I understood my variables better and was able to alter them to achieve the effects I wanted.