Project-04: String Art-Pineapple

/* Jiayi Chen
   jiayiche    Section A */
function setup() {
    createCanvas(300, 400);
    background('yellow');
}

var numLines = 50;
var dx1;
var dy1;
var dx2;
var dy2;

function draw() {
    // percentize width and height
    var w= width/100;
    var h= height/100;

    //body of pinapple
    //diagonals(*w,*h,*w,*h,*w,*h,*w,*h) general formula
    diagonals(0*w,0*h,0*w,100*h,0*w,100*h,100*w,100*h); //left outside
    diagonals(100*w,0*h,100*w,100*h,100*w,100*h,0*w,100*h); //right outside
    diagonals(0*w,100*h,0*w,30*h,0*w,30*h,100*w,30*h); //left inside
    diagonals(100*w,100*h,100*w,30*h,100*w,30*h,0*w,30*h); //right inside
     //smooth the vertexes of pinnaple
    diagonals(10*w,80*h,50*w,95*h,50*w,95*h,90*w,80*h); //bottom
    diagonals(10*w,50*h,50*w,35*h,50*w,35*h,90*w,50*h); //top
    diagonals(40*w,30*h,10*w,60*h,10*w,60*h,40*w,90*h); //left
    diagonals(60*w,30*h,90*w,60*h,90*w,60*h,60*w,90*h); //right
    //Green Hair
    push();
    stroke('green');
    strokeWeight(2);
    diagonals3(15*w,20*h,30*w,45*h,70*w,45*h,80*w,20*h);//sides
    diagonals3(30*w,45*h,50*w,15*h,70*w,45*h,50*w,15*h);//middle
    diagonals3(30*w,45*h,50*w,15*h,50*w,15*h,70*w,45*h);//upper middle 
    pop();
    //background
    diagonals3(0*w,0*h,0*w,30*h,100*w,0*h,100*w,30*h);
    //texture
    diagonals2(25*w,60*h,40*w,58*h,40*w,58*h,50*w,45*h);//left
    diagonals2(25*w,60*h,40*w,58*h,40*w,58*h,50*w,75*h);
    diagonals2(75*w,60*h,60*w,58*h,60*w,58*h,50*w,45*h);//right
    diagonals2(75*w,60*h,60*w,58*h,60*w,58*h,50*w,75*h);
    diagonals2(50*w,75*h,30*w,80*h,30*w,80*h,35*w,85*h);//bottom left
    diagonals2(50*w,75*h,70*w,80*h,70*w,80*h,65*w,85*h);//bottom right
    noLoop();

}


function diagonals(x1,y1,x2,y2,x3,y3,x4,y4){ //diagonal/straight lines between 2 lines
    line(x1,y1,x2,y2);
    line(x3,y3,x4,y4);
    dx1=(x2-x1)/numLines;
    dy1=(y2-y1)/numLines;
    dx3=(x3-x4)/numLines;
    dy3=(y3-y4)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1,y1,x3,y3);
        x1 += dx1;
        y1 += dy1;
        x3 -= dx3;
        y3 -= dy3; 
    }
}

function diagonals2(x1,y1,x2,y2,x3,y3,x4,y4){ //less lines
    line(x1,y1,x2,y2);
    line(x3,y3,x4,y4);
    numLines=20;
    dx1=(x2-x1)/numLines;
    dy1=(y2-y1)/numLines;
    dx3=(x3-x4)/numLines;
    dy3=(y3-y4)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1,y1,x3,y3);
        x1 += dx1;
        y1 += dy1;
        x3 -= dx3;
        y3 -= dy3; 
    }
}

function diagonals3(x1,y1,x2,y2,x3,y3,x4,y4){ //less lines second version
    line(x1,y1,x2,y2);
    line(x3,y3,x4,y4);
    numLines=30;
    dx1=(x2-x1)/numLines;
    dy1=(y2-y1)/numLines;
    dx3=(x3-x4)/numLines;
    dy3=(y3-y4)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1,y1,x3,y3);
        x1 += dx1;
        y1 += dy1;
        x3 -= dx3;
        y3 -= dy3; 
    }
}