![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-05 (Wallpaper)
var paleyellow = [255, 252, 125];
var clovergreen = [127, 201, 108];
var lightBlue = [232, 242, 247];
var gray = [122, 122, 122];
var circleSize1 = 6;
var circleSize2 = 10;
var petalWidth = 19;
var petalHeight = 46;
var angle = 0;
var spacingx = 80;
var spacingy = 60;
var offset = 30;
function setup() {
createCanvas(480, 480);
background(256);
angleMode(DEGREES);
noStroke();
//Light blue circles between main elements
for (var x = 1; x <=7; x++) {
for (var y = 1; y <= 9; y++) {
fill(lightBlue);
ellipse(x*spacingx-(70), y*spacingy-(60), 20);
}
}
//Draws alternating clovers and flowers down several columns
for (var x = 1; x <= 7; x++) {
if (x%2 === 0) {
for (var y = 1; y <= 8; y++) {
if (y%2 === 0) {
drawFlower(x*spacingx -offset, y*spacingy -offset, .4);
} else {
drawClover(x*spacingx -offset, y*spacingy -offset, .4);
}
}
} else {
for (var y = 1; y <= 8; y++) {
if (y%2 === 0) {
drawClover(x*spacingx -offset, y*spacingy -offset, .4);
} else {
drawFlower(x*spacingx -offset, y*spacingy -offset, .4);
}
}
}
}
noLoop();
}
//Draws a flower at designated coordinates and at selected scale
function drawFlower(x, y, SCALE) {
//Gray center circle
fill(122);
ellipse(x, y, circleSize2 * SCALE);
//Draws 8 yellow petals rotated around a center point
for(var i = 0; i < 8; i++) {
fill(paleyellow);
push();
translate(x, y);
rotate(angle);
ellipse(0, -35 * SCALE, petalWidth * SCALE, petalHeight * SCALE);
fill(122);
//Draws accent circles at top and bottom of flower
if (i === 0 || i === 4) {
fill(gray);
ellipse(0, (-30-petalHeight) * SCALE, circleSize1 * SCALE);
ellipse(0, (-20-petalHeight) * SCALE, circleSize2 * SCALE);
}
//Small gray circles between petals (8)
pop();
push();
translate(x, y);
rotate(angle+22.5);
fill(gray);
ellipse(0, -45 * SCALE, circleSize1 * SCALE);
pop();
angle += 45;
}
}
function drawClover(x, y, SCALE) {
fill(clovergreen);
//Middle Leaf
beginShape();
vertex(x, y+(38.5*SCALE));
bezierVertex(x, y+(38.5*SCALE),
x+(38*SCALE), y-(52.5*SCALE),
x+(27*SCALE), y-(59.5*SCALE));
bezierVertex(x+(16*SCALE), y-(66.5*SCALE),
x, y-(38.5*SCALE),
x, y-(38.5*SCALE));
bezierVertex(x, y-(38.5*SCALE),
x-(16*SCALE), y-(66.5*SCALE),
x-(27*SCALE), y-(59.5*SCALE));
bezierVertex(x-(27*SCALE), y-(59.5*SCALE),
x-(38*SCALE), y-(52.5*SCALE),
x, y+(38.5*SCALE));
endShape();
//Middle-Right Leaf
beginShape();
vertex(x+(5.4*SCALE), y+(38.5*SCALE));
bezierVertex(x+(5.4*SCALE), y+(38.5*SCALE),
x+(70*SCALE), y+(3.5*SCALE),
x+(67*SCALE), y-(5.5*SCALE));
bezierVertex(x+(65*SCALE), y-(15.5*SCALE),
x+(42*SCALE), y-(7.5*SCALE),
x+(42*SCALE), y-(7.5*SCALE));
bezierVertex(x+(42*SCALE), y-(7.5*SCALE),
x+(47*SCALE), y-(31.5*SCALE),
x+(37*SCALE), y-(33.5*SCALE));
bezierVertex(x+(28*SCALE), y-(34.5*SCALE),
x+(5.4*SCALE), y+(38.5*SCALE),
x+(5.4*SCALE), y+(38.5*SCALE));
endShape();
//Middle-Left Leaf
beginShape();
vertex(x-(5.4*SCALE), y+(38.5*SCALE));
bezierVertex(x-(5.4*SCALE), y+(38.5*SCALE),
x-(70*SCALE), y+(3.5*SCALE),
x-(67*SCALE), y-(5.5*SCALE));
bezierVertex(x-(65*SCALE), y-(15.5*SCALE),
x-(42*SCALE), y-(7.5*SCALE),
x-(42*SCALE), y-(7.5*SCALE));
bezierVertex(x-(42*SCALE), y-(7.5*SCALE),
x-(47*SCALE), y-(31.5*SCALE),
x-(37*SCALE), y-(33.5*SCALE));
bezierVertex(x-(28*SCALE), y-(34.5*SCALE),
x-(5.4*SCALE), y+(38.5*SCALE),
x-(5.4*SCALE), y+(38.5*SCALE));
endShape();
//Far-Right Leaf
beginShape();
vertex(x+(15*SCALE), y+(38.5*SCALE));
bezierVertex(x+(15*SCALE), y+(38.5*SCALE),
x+(75*SCALE), y+(37.5*SCALE),
x+(77*SCALE), y+(32.5*SCALE));
bezierVertex(x+(79*SCALE), y+(27.5*SCALE),
x+(60*SCALE), y+(26.5*SCALE),
x+(60*SCALE), y+(26.5*SCALE));
bezierVertex(x+(60*SCALE), y+(26.5*SCALE),
x+(74*SCALE), y+(15.5*SCALE),
x+(69*SCALE), y+(12.5*SCALE));
bezierVertex(x+(63*SCALE), y+(9.5*SCALE),
x+(15*SCALE), y+(38.5*SCALE),
x+(15*SCALE), y+(38.5*SCALE));
endShape();
//Far-Left Leaf
beginShape();
vertex(x-(15*SCALE), y+(38.5*SCALE));
bezierVertex(x-(15*SCALE), y+(38.5*SCALE),
x-(75*SCALE), y+(37.5*SCALE),
x-(77*SCALE), y+(32.5*SCALE));
bezierVertex(x-(79*SCALE), y+(27.5*SCALE),
x-(60*SCALE), y+(26.5*SCALE),
x-(60*SCALE), y+(26.5*SCALE));
bezierVertex(x-(60*SCALE), y+(26.5*SCALE),
x-(74*SCALE), y+(15.5*SCALE),
x-(69*SCALE), y+(12.5*SCALE));
bezierVertex(x-(63*SCALE), y+(9.5*SCALE),
x-(15*SCALE), y+(38.5*SCALE),
x-(15*SCALE), y+(38.5*SCALE));
endShape();
//Gray ellipsoidal accents
fill(gray);
ellipse(x+(23*SCALE), y+(38.5*SCALE), 40 * SCALE, 12 * SCALE);
ellipse(x-(23*SCALE), y+(38.5*SCALE), 40 * SCALE, 12 * SCALE);
ellipse(x, y+(50.5*SCALE), circleSize2 * SCALE);
ellipse(x, y+(61.5*SCALE), circleSize1 * SCALE);
ellipse(x, y-(53.5*SCALE), circleSize2 * SCALE);
ellipse(x, y-(64.5*SCALE), circleSize1 * SCALE);
}
I definitely enjoyed putting this project together and playing around with different elements, which forced me to figure out how to draw more complex forms using p5.js. Before trying to code this right away, I made different possible mockups in Adobe Illustrator, then translated it into Javascript. As for the final result, I’m happy with how it came out – my initial sketches had even more accent dots than the final, but it wound up looking too busy and were therefore removed.
