Wallpaper art

I try to build a pattern that fakes depth through gradients in brightness. The important part is to write a function for the arrows so I can make nested loops with them and array the arrows throughout the canvas.

//Jason Jiang
//Section E

//Setting variables 

//Creating Sky
function setup() {
    createCanvas(600, 500);
    background(255);
    colorMode(HSB);
    }
    


function draw() {
    //draw rows of arrows
    for(col = 0; col < 10; col++){
    for(row = 0; row < 32; row++){
        push()
        //Changing size of arrows
        var scale = 0.25 * (col+3)
        var l = 20
        translate(2*scale*l*row, 2*40*(col))
        rotate(radians(180))
        Arrow(0, 0, 20, 20, 250-col*6, 10*(col+1), scale);
        pop()
    }
    }
   noLoop()
}

    //Arrow gradient function
function Arrow(x, y, l, step, H, S, scale){
    strokeWeight(5);
    push()
    translate(x, y)
    for (i = 0; i<step; i++){
        stroke(H, S, 5*i);
        line(0, 5*i, scale*l, l+5*i)
        line(0, 5*i, -scale*l, l+5*i)
    }
    pop()
}

Leave a Reply