# Dani Delgado Project 05 – Wallpaper

``````/* Dani Delgado
Section E
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) {
}
}

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

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

//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;

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).