Month: September 2022

My string art uses loops to generate wave patterns to create an ocean. In the process, I am trying to control the lines carefully by adjusting the start and end points’ values.

//Jason Jiang
//Section E

//Setting variables 
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 10;

//Creating Sky
function setup() {
    createCanvas(300, 400);
    background(135, 206, 235, 50);
    }
    


function draw() {
    
    //Waves
    stroke(0, 100, 184);
    var x1 = -30;
    var y1 = 300;
    var x2 = 600;
    var y2 = 500;
    strokeWeight(0);
    line(-30, 300, -50, 400);
    line(600, 300, 400, 500);
    strokeWeight(1);
    dx1 = (-50-(-30))/numLines;
    dy1 = (400-300)/numLines;
    dx2 = (600-300)/numLines;
    dy2 = -(500-300)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight(i*0.1)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    

    x1 = 0;
    y1 = 300;
    x2 = 500;
    y2 = 500;
    strokeWeight(0);
    line(0, 300, -50, 400);
    line(400, 150, 500, 500);
    strokeWeight(1);
    dx1 = (-50-0)/+numLines;
    dy1 = (400-300)/numLines;
    dx2 = (500-400)/numLines;
    dy2 = -(500-150)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight(i*0.1)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }


    x1 = -100;
    y1 = 300;
    x2 = 400;
    y2 = 300;
    strokeWeight(0);
    line(-100, 300, -250, 500);
    line(300, 200, 400, 300);
    strokeWeight(1)
    dx1 = (-150+50)/+numLines;
    dy1 = (500-300)/numLines;
    dx2 = -(500-400)/numLines;
    dy2 = -(300-200)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight((numLines-i)*0.1)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }


    x1 = -100;
    y1 = 300;
    x2 = 400;
    y2 = 320;
    strokeWeight(0);
    line(-100, 320, -350, 450);
    line(200, 350, 150, 320);
    strokeWeight(1)
    dx1 = (-250-150)/+numLines;
    dy1 = (450-250)/numLines;
    dx2 = -(350-300)/numLines;
    dy2 = -(400-350)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight((numLines-i)*0.1)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }
    

    x1 = -150;
    y1 = 200;
    x2 = 350;
    y2 = 350;
    strokeWeight(0);
    line(-150, 200, -250, 400);
    line(300, 300, 350, 350);
    strokeWeight(1)
    dx1 = (-250+100)/+numLines;
    dy1 = (300-100)/numLines;
    dx2 = -(500-400)/numLines;
    dy2 = -(300-200)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight((numLines-i)*0.05)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }
    

    //Boat
    //Lower Part
    x1 = 85;
    y1 = 260;
    x2 = 130;
    y2 = 270;
    strokeWeight(0);
    line(85, 260, 90, 272);
    line(130, 270, 120, 280);
    strokeWeight(1)
    dx1 = 2*(90-85)/numLines;
    dy1 = 2*(272-260)/numLines;
    dx2 = 2*(120-130)/numLines;
    dy2 = 2*(280-270)/numLines;
    for (var i = 0; i <= 0.5*numLines; i += 1) {
        strokeWeight((numLines-i)*0.15)
        stroke(i);
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }
    //Upper Part
    x1 = 92;
    y1 = 259;
    x2 = 120;
    y2 = 265;
    strokeWeight(0);
    line(92, 261, 110, 230);
    line(120, 267, 110, 230);
    strokeWeight(1)
    dx1 = (110-92)/numLines;
    dy1 = (230-261)/numLines;
    dx2 = (110-120)/numLines;
    dy2 = (230-267)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight((numLines-i)*0.15)
        stroke(i+100);
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }

    //Sun
    x1 = 200;
    y1 = 59;
     //Outer Ring
     for (var i = 0; i <= 10*numLines; i += 1) {
        stroke(253, 184, 19, 50)
        strokeWeight(1)
        push()
        translate(x1, y1);
        rotate(radians(i*180/numLines));
        line(0, 0, 0, 100);
        pop()
 
    }
    //Inner Ring
    for (var i = 0; i <= 10*numLines; i += 1) {
        stroke(200, 92, 60)
        strokeWeight(1)
        push()
        translate(x1, y1);
        rotate(radians(i*0.5*180/numLines));
        line(0, 0, 0, 50);
        pop()
    }

noLoop();

}