![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2023/09/stop-banner.png)
kstargio proj 05Download
// Katherine Stargiotti, kstargio, B
function setup() {
createCanvas(600, 400);
background(235, 220, 230);
}
//draws a randomized flower-covered wallpaper with vines and leaves.
//color, placement, flower style, size, and rotation are all randomized to
//produce a completely new wallpaper each time the program runs:
function draw() {
for (l=random(25); l<width; l+=50) { //vines go accross the entire canvas
drawVine(l, random(20)); //each vine is drawn before the flowers
for (d=0; d<2; d+=1) { // density of the flowers
for (h=random(45); h<height+25; h+=random(45,75)) { //parameters randomized to create variability throughout the piece
drawFlowerHead(l+random(-5, 5), h, random(.35, 1.25), int(random(4, 7)), int(random(3)));
}
}
}
}
//draws a vine; random() used to add variation for weight, color, curve.
function drawVine(x, y) {
push();
translate(x, y);
vineColor = color(random(100, 150), random(150,200), random(100,150));
stroke(vineColor);
strokeWeight(random(1,2));
noFill();
den = random(10, 20)
beginShape();
curveVertex(0, -20);
curveVertex(0, -20);
curveVertex(3, height/den);
curveVertex(0, 2*height/den);
curveVertex(-3, 3*height/den);
curveVertex(0, 4*height/den);
curveVertex(3, 5*height/den);
curveVertex(0, 6*height/den);
curveVertex(-3, 7*height/den);
curveVertex(0, 8*height/den);
curveVertex(3, 9*height/den);
curveVertex(0, 10*height/den);
curveVertex(-3, 11*height/den);
curveVertex(0, 12*height/den);
curveVertex(3, 13*height/den);
curveVertex(0, 14*height/den);
curveVertex(-3, 15*height/den);
curveVertex(0, 16*height/den);
curveVertex(3, 17*height/den);
curveVertex(0, 18*height/den);
curveVertex(-3, 19*height/den);
curveVertex(0, height);
curveVertex(0, height);
endShape();
drawLeaves(0, vineColor);
pop();
}
//draws leaves onto a vine using the vineColor and x placement:
function drawLeaves(x, vineColor) {
fill(vineColor);
for (f=0; f<height; f+=random(45, 65)) {
drawLeaf(x, f);
}
}
//draws one leaf of random size at point x,y:
function drawLeaf(x, y) {
let leafSize = random(1, 3);
x += random(-.5, .5);
//if the leaf is to the left of the vine it faces left; to the right is pointed right:
if (x>0) {
beginShape();
vertex(x+(8*leafSize), y);
curveVertex(x+(7*leafSize), (y-.2));
curveVertex(x+(6*leafSize), (y-.5));
curveVertex(x+(4.5*leafSize), (y-1.2));
curveVertex(x+(3*leafSize), (y-2.1));
curveVertex(x+(2.2*leafSize), (y-2.25));
curveVertex(x+(1.5*leafSize), (y-2));
curveVertex(x, (y-1.1));
curveVertex(x, y);
curveVertex(x, (y+1.1));
curveVertex(x+(1.5*leafSize), (y+2));
curveVertex(x+(2.2*leafSize), (y+2.25));
curveVertex(x+(3*leafSize), (y+2.1));
curveVertex(x+(4.5*leafSize), (y+1.2));
curveVertex(x+(6*leafSize), (y+.5));
curveVertex(x+(7*leafSize), (y+.2));
vertex(x+(8*leafSize), y);
endShape(CLOSE);
} else {
beginShape();
vertex(x-(8*leafSize), y);
curveVertex(x-(7*leafSize), (y-.2));
curveVertex(x-(6*leafSize), (y-.5));
curveVertex(x-(4.5*leafSize), (y-1.2));
curveVertex(x-(3*leafSize), (y-2.1));
curveVertex(x-(2.2*leafSize), (y-2.25));
curveVertex(x-(1.5*leafSize), (y-2));
curveVertex(x, (y-1.1));
curveVertex(x, y);
curveVertex(x, (y+1.1));
curveVertex(x-(1.5*leafSize), (y+2));
curveVertex(x-(2.2*leafSize), (y+2.25));
curveVertex(x-(3*leafSize), (y+2.1));
curveVertex(x-(4.5*leafSize), (y+1.2));
curveVertex(x-(6*leafSize), (y+.5));
curveVertex(x-(7*leafSize), (y+.2));
vertex(x-(8*leafSize), y);
endShape(CLOSE);
}
}
//draws a flowerhead using petals:
function drawFlowerHead(x, y, flowerSize, petalNum, style) {
push();
translate(x, y); //centers flower at (0,0)
//colors randomized in a specific range to create a cohesive pallet:
var c = color(random(170,225), random(100,180), random(130,200));
var co = color(130, 110, 140); // purpley used for all flowers
var rot = random(180); // flowers start at different angles
// drawing petals:
for (q=0; q<petalNum; q++) {
rotate(rot);
if (style == 0) { drawPetalA(flowerSize*2, 0, c, co, flowerSize) }
else if (style == 1) {drawPetalB(flowerSize*2, 0, c, co, flowerSize) }
else { drawPetalC(flowerSize*2, 0, c, co, flowerSize) }
rot = 2*PI/petalNum; // rotation value based on number of petals
}
// center of flower drawn on top of petals:
fill(120, 100, 110);
circle(0, 0, flowerSize*5);
fill(127, 100, 110);
circle(0, 0, flowerSize*3);
fill(135, 100, 110);
circle(0, 0, flowerSize);
pop();
}
// draws a petal in the FIRST[0] style. (pointy)
function drawPetalA(x, y, petalColor, outerColor, petalSize) {
petalSize = petalSize/5;
noStroke();
fill(outerColor);
beginShape();
vertex((x+85)*petalSize, y*petalSize);
curveVertex((x+70)*petalSize, (y-2)*petalSize);
curveVertex((x+60)*petalSize, (y-5)*petalSize);
curveVertex((x+45)*petalSize, (y-12)*petalSize);
curveVertex((x+30)*petalSize, (y-21)*petalSize);
curveVertex((x+22)*petalSize, (y-22.5)*petalSize);
curveVertex((x+15)*petalSize, (y-20)*petalSize);
curveVertex((x+5)*petalSize, (y-11)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+11)*petalSize);
curveVertex((x+15)*petalSize, (y+20)*petalSize);
curveVertex((x+22)*petalSize, (y+22.5)*petalSize);
curveVertex((x+30)*petalSize, (y+21)*petalSize);
curveVertex((x+45)*petalSize, (y+12)*petalSize);
curveVertex((x+60)*petalSize, (y+5)*petalSize);
curveVertex((x+70)*petalSize, (y+2)*petalSize);
vertex((x+85)*petalSize, y);
endShape(CLOSE);
fill(petalColor);
beginShape();
vertex((x+75)*petalSize, y*petalSize);
curveVertex((x+60)*petalSize, (y-3)*petalSize);
curveVertex((x+45)*petalSize, (y-9)*petalSize);
curveVertex((x+30)*petalSize, (y-17)*petalSize);
curveVertex((x+15)*petalSize, (y-17)*petalSize);
curveVertex((x+5)*petalSize, (y-9)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+9)*petalSize);
curveVertex((x+15)*petalSize, (y+17)*petalSize);
curveVertex((x+30)*petalSize, (y+17)*petalSize);
curveVertex((x+45)*petalSize, (y+9)*petalSize);
curveVertex((x+60)*petalSize, (y+3)*petalSize);
vertex((x+75)*petalSize, y);
endShape(CLOSE);
fill(outerColor);
beginShape();
curveVertex(x, y);
curveVertex(x+petalSize*15, y+7);
curveVertex(x+petalSize*35, y+2);
curveVertex(x+petalSize*15, y+6);
endShape(CLOSE);
beginShape();
curveVertex(x, y);
curveVertex(x+petalSize*10, y+12);
curveVertex(x+petalSize*30, y+9);
curveVertex(x+petalSize*15, y+12);
endShape(CLOSE);
beginShape();
curveVertex(x, y);
curveVertex(x+petalSize*15, y-7);
curveVertex(x+petalSize*35, y-2);
curveVertex(x+petalSize*15, y-6);
endShape(CLOSE);
beginShape();
curveVertex(x, y);
curveVertex(x+petalSize*10, y-12);
curveVertex(x+petalSize*30, y-9);
curveVertex(x+petalSize*15, y-12);
endShape(CLOSE);
beginShape();
curveVertex(x, y);
curveVertex(x+petalSize*17, y-.5);
curveVertex(x+petalSize*40, y);
curveVertex(x+petalSize*17, y+.5);
endShape(CLOSE);
noLoop();
}
// draws a petal in the SECOND[1] style. (squiggled)
function drawPetalB(x, y, petalColor, outerColor, petalSize) {
petalSize = petalSize/5;
noStroke();
fill(outerColor);
beginShape();
vertex((x+80)*petalSize, y*petalSize);
curveVertex((x+70)*petalSize, (y-7)*petalSize);
curveVertex((x+60)*petalSize, (y-12)*petalSize);
curveVertex((x+45)*petalSize, (y-18)*petalSize);
curveVertex((x+30)*petalSize, (y-22)*petalSize);
curveVertex((x+22)*petalSize, (y-22.5)*petalSize);
curveVertex((x+15)*petalSize, (y-20)*petalSize);
curveVertex((x+5)*petalSize, (y-12)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+12)*petalSize);
curveVertex((x+15)*petalSize, (y+20)*petalSize);
curveVertex((x+22)*petalSize, (y+22.5)*petalSize);
curveVertex((x+30)*petalSize, (y+22)*petalSize);
curveVertex((x+45)*petalSize, (y+18)*petalSize);
curveVertex((x+60)*petalSize, (y+12)*petalSize);
curveVertex((x+70)*petalSize, (y+7)*petalSize);
vertex((x+80)*petalSize, y);
endShape(CLOSE);
fill(petalColor);
beginShape();
vertex((x+70)*petalSize, y*petalSize);
curveVertex((x+60)*petalSize, (y-2)*petalSize);
curveVertex((x+57)*petalSize, (y-4)*petalSize);
curveVertex((x+53)*petalSize, (y-2)*petalSize);
curveVertex((x+50)*petalSize, (y-4)*petalSize);
curveVertex((x+47)*petalSize, (y-9)*petalSize);
curveVertex((x+44)*petalSize, (y-12)*petalSize);
curveVertex((x+37)*petalSize, (y-10)*petalSize);
curveVertex((x+30)*petalSize, (y-17)*petalSize);
curveVertex((x+15)*petalSize, (y-17)*petalSize);
curveVertex((x+5)*petalSize, (y-9)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+9)*petalSize);
curveVertex((x+15)*petalSize, (y+17)*petalSize);
curveVertex((x+30)*petalSize, (y+17)*petalSize);
curveVertex((x+37)*petalSize, (y+10)*petalSize);
curveVertex((x+44)*petalSize, (y+12)*petalSize);
curveVertex((x+47)*petalSize, (y+9)*petalSize);
curveVertex((x+50)*petalSize, (y+4)*petalSize);
curveVertex((x+53)*petalSize, (y+2)*petalSize);
curveVertex((x+57)*petalSize, (y+4)*petalSize);
curveVertex((x+60)*petalSize, (y+2)*petalSize);
vertex((x+70)*petalSize, y);
endShape(CLOSE);
noLoop();
}
// draws a petal in the THIRD[2] style. (rounded)
function drawPetalC(x, y, petalColor, outerColor, petalSize) {
petalSize = petalSize/5;
noStroke();
fill(outerColor);
beginShape();
vertex((x+70)*petalSize, y*petalSize);
curveVertex((x+68)*petalSize, (y-6)*petalSize);
curveVertex((x+65)*petalSize, (y-10)*petalSize);
curveVertex((x+60)*petalSize, (y-15)*petalSize);
curveVertex((x+45)*petalSize, (y-22)*petalSize);
curveVertex((x+30)*petalSize, (y-25)*petalSize);
curveVertex((x+22)*petalSize, (y-24)*petalSize);
curveVertex((x+15)*petalSize, (y-22)*petalSize);
curveVertex((x+5)*petalSize, (y-11)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+11)*petalSize);
curveVertex((x+15)*petalSize, (y+22)*petalSize);
curveVertex((x+22)*petalSize, (y+24)*petalSize);
curveVertex((x+30)*petalSize, (y+25)*petalSize);
curveVertex((x+45)*petalSize, (y+22)*petalSize);
curveVertex((x+60)*petalSize, (y+15)*petalSize);
curveVertex((x+65)*petalSize, (y+10)*petalSize);
curveVertex((x+68)*petalSize, (y+6)*petalSize);
vertex((x+70)*petalSize, y);
endShape(CLOSE);
fill(petalColor);
beginShape();
vertex((x+60)*petalSize, y*petalSize);
curveVertex((x+58)*petalSize, (y-6)*petalSize);
curveVertex((x+45)*petalSize, (y-15)*petalSize);
curveVertex((x+30)*petalSize, (y-17)*petalSize);
curveVertex((x+15)*petalSize, (y-15)*petalSize);
curveVertex((x+5)*petalSize, (y-9)*petalSize);
curveVertex(x, y);
curveVertex((x+5)*petalSize, (y+9)*petalSize);
curveVertex((x+15)*petalSize, (y+15)*petalSize);
curveVertex((x+30)*petalSize, (y+17)*petalSize);
curveVertex((x+45)*petalSize, (y+15)*petalSize);
curveVertex((x+58)*petalSize, (y+6)*petalSize);
vertex((x+60)*petalSize, y);
endShape(CLOSE);
noLoop();
}
I was inspired by flowers for this project. I did not sketch out any patterns before programming, but I knew that I wanted to create a few different types of petals that could be turned into many unique flowers. By starting with the petals and smaller units of the images, I was able to randomize parameters to produce completely different flowers each time the program is run. I also recorded my screen while creating this project and condensed the progress into a short video embedded below.