atraylor – Project 04 – Section B

sketch

// atraylor
// project 04, Section B

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var num = 0.01;

function setup() {
    createCanvas(400, 300);
    background(178, 44, 0);

}

function draw() {

    for (var i = 0; i < 10; i++) { //Drawing the lines from the edges
        stroke(0, 178, 135);
        lineLeft(i, y1);
        lineRight(i, y1);
    }

    for (var i = 0; i < 180; i++){ // drawing the line spiral
        c = color(25, 255, 200);
        num += 1;
        if (i > 60) {
            c = color(255, 62, 0);
        }
        if (i > 120){
            c = color(25, 255, 200);
        }
        if (i > 180){
            c = color(255, 62, 0);
        }
        stringLine(num, c, i);
    }
    noLoop(); // stoping the for loop so it doesn't keep drawing
}

function stringLine(deg, col, i) {
    push();
    translate(200, 150);
    rotate(radians(deg * 6));
    stroke(col);
    line( i * 0.5, 0, 200, 0); // changing the x position so the radius increases
    pop();
}

function lineLeft(i, y1) { // the two line things on the left side
    y1 = lerp(0, 400, i * .01); // these interpolate between the points, beginning y and end y
    y2 = lerp(300, 0, i * .01);
    line(0, i * 2 + 280, 200, i * y1);
    line(0, i * 2, 200, i * y1);
}

function lineRight(i, y1) { // the only difference is that these start at 400 rather than 0
    y1 = lerp(0, 400, i * .01);
    y2 = lerp(300, 0, i * .01);
    line(400, i * 2 + 280, 200, i * y1);
    line(400, i * 2, 200, i * y1);
}

For this project, I tried to use the lerp() function to define the beginning and end points of my lines. It was a rough task because I knew what lerp was supposed to do, but I wasn’t checking my changes after I made them. I figured it out but it took a lot of guessing and checking.