Category: Project-05-Wallpaper

Project 5: Wallpaper

I decided to go full floral vintage and make a flower wallpaper! Also thought it would be cute to have a little tear in the corner, revealing the wood paneling underneath.

sketch
function setup() {
    createCanvas(600, 400);
    background(224, 224, 197);
}

function draw() {
	background(224, 224, 197);
	for(var y = 0; y < 500; y += 100){
		for(var x = 0; x < 800; x += 200){
			drawFlower(x, y);
		}
	}

	for(var y = -50; y < 500; y += 100){
		for(var x = 100; x < 800; x += 200){
			drawFlower(x, y);
		}
	}

    for(var col = 500; col < 600; col += 40){
        strokeWeight(2)
        stroke(110, 94, 66);
        fill(186, 156, 95);
        rect(col, 350, 40, 50);
    }

    strokeWeight(3);
    stroke(250, 245, 237);
    fill(250, 245, 237);
    triangle(500, 350, 500, 400, 600, 350);
}

function drawFlower(x, y) {
	push();
	translate(x, y); 
	strokeWeight(8);
	stroke(184, 176, 79); //green stem color
	line(-25, 35, -40, 50);
	line(-40, 50, -45, 60);
	line(-45, 60, -55, 20);
	line(-55, 20, -55, 0);
	line(-45, 60, -55, 90);

	strokeWeight(0);
	fill(184, 176, 79); //same green
	ellipse(-55, 0, 20, 30);

	push();
	rotate(radians(30));
	fill(209, 187, 96); //underside of stem color
    rect(-10, 0, 15, 45);
    pop();

    fill(230, 158, 57); //main flower orange color
    rect(-15, -35, 30, 50); //base of the flowers
    rect(-35, -5, 40, 20);
    rect(5, -5, 30, 30); 
    rect(-15, 15, 20, 20);

    push();
    rotate(radians(45));
    rect(-14, 6, 15, 30);
    rect(-32, -4, 30, 15);
    rect(-5, -35, 15, 30);
    pop();

    strokeWeight(1);
    stroke(212, 127, 42); //dark orange thin line flower color
    line(0, 0, -3, -25);
    line(0, 0, 7, -25);
    line(0, 0, -8, -25);
    line(0, 0, 12, -25);
    line(0, 0, -30, 1);
    line(0, 0, -30, -2);
    line(0, 0, -25, 15);
    line(0, 0, -20, 20);
    line(0, 0, 27, 15);
    line(0, 0, 25, 20);
    line(0, 0, 30, 5);
    line(0, 0, 30, 0);

    stroke(250, 231, 180); //flower light cream color
    strokeWeight(2);
    line(0, 0, 3, -25);
    line(0, 0, -30, 5);
    line(0, 0, 30, 10);

    strokeWeight(1);
    stroke(242, 223, 145); //lines connecting seeds color
    line(0, 0, 10, -10);
    line(0, 0, 9, -5);
    line(0, 0, 13, -13);
    line(0, 0, 15, -18);
    line(0, 0, 10, -15);

    strokeWeight(0);
    fill(69, 43, 31); //seed color
    ellipse(10, -10, 3, 3);
    ellipse(9, -5, 3, 3);
    ellipse(13, -13, 3, 3);
    ellipse(15, -18, 3, 3);
    ellipse(10, -15, 3, 3);
    pop();
}

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()
}