alchan-Project04-string art

alchan project 04

//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.