Dani Delgado Project 05 – Wallpaper

sketch

/* Dani Delgado
Section E
ddelgad1@andrew.cmu.edu
Project-05
*/

function setup() {
    createCanvas(450, 350);
}

function draw() {
    //draw a dark blue background
    background(28, 33, 82);

    //draw the polka dotted bakcground
    for (var p = 0; p < width - 10; p += 18) {
    	for (var d = 0; d < height - 10; d += 22) {
    		polkaDot(p, d);
    	}
    }

    //draw the blue mountain and the pink shadow
    for (var mx1 = 0; mx1 < width - 60; mx1 += 60) {
     	for (var my1 = 0; my1 < height; my1 += 70) {
     		mountainBase(mx1, my1);
     		mountainShadow(mx1, my1);
        }
    }    
    //draw the white  offset outline 
    for (var mx2 = 0; mx2 < width - 65; mx2 += 60){
    	for (var my2 = 0; my2 < height; my2 += 70){
    		mountainOutline(mx2, my2);
    	}
    }
    noLoop(); 
}

function polkaDot(x, y) {
	//draw the polka dotted background
	push();
	translate(x, y);
	noStroke();
	fill(48, 53, 102);
	ellipse(10, 10, 10, 10);
	pop();
}

function mountainBase(x, y) {
    //define the variables to make the mountain points at 
    //all variables are fixed based on the first set of triangle coordinates
    //writing out variables like this helps me to understand the placement of my shapes
    var mx1 = 20;
    var mbase = 50;
    var mx2 = mx1 + (mx1 / 2);
    var mpeak1 = mbase - 20;
    var mx3 = mx1 * 2;
    var mx4 = mx2;
    var mpeak2 = mbase - 30;
    var mx5 = mx4 + 15;
    var mx6 = mx4 + 30;
    var mx7 = mx5;
    var mx8 = mx7 + 12;
    var mpeak3 = mbase - 20;
    var mx9 = mx8 + 12;

    //draw the first mountain base
    push();
    translate(x, y);
    fill (108, 113, 182);
    noStroke();
    triangle(mx1, mbase, mx2, mpeak1, mx3, mbase);
    triangle(mx4, mbase, mx5, mpeak2, mx6, mbase);
    triangle(mx7, mbase, mx8, mpeak3, mx9, mbase);
    pop();
}

function mountainShadow(x, y) { 
	//repeat variables
    var mx1 = 20;
    var mbase = 50;
    var mx2 = mx1 + (mx1 / 2);
    var mpeak1 = mbase - 20;
    var mx3 = mx1 * 2;
    var mx4 = mx2;
    var mpeak2 = mbase - 30;
    var mx5 = mx4 + 15;
    var mx6 = mx4 + 30;
    var mx7 = mx5;
    var mx8 = mx7 + 12;
    var mpeak3 = mbase - 20;
    var mx9 = mx8 + 12;

    //draw the mountain shadow
    push();
    translate(x, y);
    fill(255, 128, 160);
    noStroke();
    triangle(mx1, mbase, mx2, mpeak1, mx2 + 2, mbase);
    triangle(mx4, mbase, mx5, mpeak2, mx5 + 5, mbase);
    triangle(mx8, mpeak3 + (0.5 * mpeak3), mx6 - 7.5, mpeak3 + 4.5, mx8, mpeak3);
    pop();
}

function mountainOutline(x, y){
    //repeat variables
	var mx1 = 20;
    var mbase = 50;
    var mx2 = mx1 + (mx1 / 2);
    var mpeak1 = mbase - 20;
    var mx3 = mx1 * 2;
    var mx4 = mx2;
    var mpeak2 = mbase - 30;
    var mx5 = mx4 + 15;
    var mx6 = mx4 + 30;
    var mx7 = mx5;
    var mx8 = mx7 + 12;
    var mpeak3 = mbase - 20;
    var mx9 = mx8 + 12;

    //draw the mountain white, offset outline
    push();
    translate (x, y);
    stroke(255);
    strokeWeight(0.75);
    line(mx1 + 5, mbase - 5, mx9 + 5, mbase - 5);
    line(mx1 + 5, mbase - 5, mx2 + 5, mpeak1 - 5);
    line(mx2 + 5, mpeak1 - 5, mx3 + 2, mbase - 15);
    line(mx3 + 2, mbase - 15, mx5 + 5, mpeak2 - 5);
    line(mx5 + 5, mpeak2 - 5, mx6 - 2, mbase - 20);
    line(mx6 - 2, mbase - 20, mx8 + 5, mpeak3 - 5);
    line(mx8 + 5, mpeak3 -5, mx9 + 5, mbase - 5);
    pop();
}

For this project, I wanted to create a crisp pattern that would like nice on a backpack or maybe a skirt. I went through a few ideas, including rain clouds and flower patterns, before deciding on drawing mountain ranges. I have always loved how mountains are graphically represented; the clean lines and clever usage of color blocking to create dimension are just very pleasant to look at for me. With that in mind, I decided to create something similar with a fun color palette.

 
As far as coding goes, this was a bit of a challenge for me since I am still trying to fully understand for-loops and creating my own functions. I tried to incorporate functions into my code instead of drawing the shapes in the loops to practice these skills some more (and so that I could relate all of the mountain’s shape points to one primary point using arithmetic and not having the loop mess with these relationships).