//line properties
var startX;
var startY = 200;
var endX = 150;
var endY;
var startDist = 20;
var endDist = 20;
//adjust background color
var backColor = 100;
//check whether lines should move back or forth
var shouldMove = true;
function setup() {
createCanvas(400,300);
stroke(256);
strokeWeight(2);
frameRate(30);
}
function draw() {
background(backColor, backColor, 200);
//top left corner
startX = 0;
startY = 150;
endX = 200;
endY = 0;
for(var i = 0; i < 10; i++) {
line(startX, startY + startDist, endX + endDist, endY);
startY -= 10;
endX += 10;
}
//top right corner
startX = 400;
startY = 150;
endX = 200;
endY = 0;
for(var i = 0; i < 10; i++) {
line(startX, startY + startDist, endX - endDist, endY);
startY += 10;
endX += 10;
}
//bottom left corner
startX = 0;
startY = 150;
endX = 200;
endY = 300;
for(var i = 0; i < 10; i++) {
line(startX, startY - startDist, endX + endDist, endY);
startY -= 10;
endX -= 10;
}
//bottom right corner
startX = 400;
startY = 150;
endX = 200;
endY = 300;
for(var i = 0; i < 10; i++) {
line(startX, startY - startDist, endX - endDist, endY);
startY -= 10;
endX += 10;
}
//check whether the lines have reached a certain position
//and change the value of shouldMove to switch direciton
if (startDist >= 300) {
shouldMove = false;
} else if (startDist <= 0) {
shouldMove = true;
}
//move the position of the lines' endpoints
//changing direction depending on shouldMove
if (shouldMove === true) {
startDist += 10;
endDist -= 10;
backColor += 5;
} else if (shouldMove === false) {
startDist -= 10;
endDist += 10;
backColor -= 5;
}
}
I wanted to try making an animated piece (without mouse interaction), so once I figured out how to calculate and draw the lines I played around with moving all of the points to animate the entire drawing. The final piece wasn’t quite what I had originally planned to make, as I had wanted to incorporate rotation again somehow, but I also learned a lot in figuring out how to create a back-and-forth motion.