![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
//flower size
var fradius1 = 30;
var fradius2 = 60;
var fradius3 = 120;
//petal size
var pradius1 = 4;
var pradius2 = 80;
var pradius3 = 160;
//number of petals on flower
var numpetals = 6;
//Boolean if mouse on flower
var onFlower1 = false;
var onFlower2 = false;
var onFlower3 = false;
//color of flower
var fcolor1 = 'yellow';
var fcolor2 = 'yellow';
var fcolor3 = 'yellow';
//color of petal
var pcolor1 = 255;
var pcolor2 = 255;
var pcolor3 = 255;
//color of text & boolean of if mouse is on text
var textcolor = 255;
var ontext = false;
function setup() {
createCanvas(480, 640);
}
function draw() {
noStroke();
background('blue');
//change background color according to mouseX
if (mouseX <= width/2) {
background('orange');
}
//to insert text and change the color of text according to position of mouse
fill(textcolor);
if (mouseX <= width/2) {
text('Oopsie Daisy', 10,30);
}
if (mouseX >= 10 & mouseY <= 30 && mouseX<=100 && mouseY >= 15) {
if (!ontext) {
textcolor = color(random(0,255), random(0,255), random(0,255));
} ontext = true;
} else {
ontext = false;
textcolor = 255;
}
if (mouseX <= width & mouseY <= height) {
numpetals = 2*mouseX/48 + 6; //changing the number of petals dependant on mouse
pradius1 = mouseX/48 * 4 + 4; //modifying radius of petals based on mouse
pradius2 = mouseX/48 * -8 + 80;
pradius3 = mouseX/48 * -16 + 160;
}
//changing the color of the flowers based on the location of the mouse
if ((mouseX - width/4) * (mouseX - width/4) + (mouseY - height*0.20) * (mouseY - height*0.20) < fradius1 * fradius1) {
if(!onFlower1) {
fcolor1 = random(0,255);
pcolor1 = color(random(0,255), random(0,255), random(0,255));
}
onFlower1 = true;
} else {
onFlower1 = false;
fcolor1 = 'yellow';
pcolor1 = 255;
}
fill(fcolor1);
ellipse(width*0.25, height*0.20, fradius1, fradius1); // drawing the center of flower
//changing the color of the flowers based on the location of the mouse
if ((mouseX - width*0.75) * (mouseX - width*0.75) + (mouseY - height*0.30) * (mouseY - height*0.30) < fradius2 * fradius2) {
if(!onFlower2) {
fcolor2 = random(0,255);
pcolor2 = color(random(0,255), random(0,255), random(0,255));
}
onFlower2 = true;
} else {
onFlower2 = false;
fcolor2 = 'yellow';
pcolor2 = 255;
}
fill(fcolor2);
ellipse(width*0.75, height*0.30, fradius2, fradius2);// drawing the center of flower
//changing the color of the flowers based on the location of the mouse
if ((mouseX - width*0.4) * (mouseX - width*0.4) + (mouseY - height*0.65) * (mouseY - height*0.65) < fradius3 * fradius3) {
if(!onFlower3) {
fcolor3 = random(0,255);
pcolor3 = color(random(0,255), random(0,255), random(0,255));
}
onFlower3 = true;
} else {
onFlower3 = false;
fcolor3 = 'yellow';
pcolor3 = 255;
}
fill(fcolor3);
ellipse(width*0.4, height*0.65, fradius3, fradius3);// drawing the center of flower
//flower 1 (top left)
fill(pcolor1); //color and number of petals based upon the location of mouse
for (var i = 0; i < 24-numpetals; i++) { //flower that grows proportionately in the opposite direction as the other flowers
var angle = i * radians(360/(24-numpetals));
ellipse(width * 0.25 + (fradius1/2 + pradius1/2) * cos(angle), height * 0.20 + (fradius1/2 + pradius1/2) * sin(angle), pradius1, pradius1);
}
//flower 2 (top right)
fill(pcolor2); //color and number of petals based upon the location of mouse
for (var i = 0; i < numpetals; i++) {
var angle = i * radians(360/numpetals);
ellipse(width * 0.75 + (fradius2/2 + pradius2/2) * cos(angle), height * 0.30 + (fradius2/2 + pradius2/2) * sin(angle), pradius2, pradius2);
}
//flower 3 (bottom)
fill(pcolor3); //color and number of petals based upon the location of mouse
for (var i = 0; i < numpetals; i++) {
var angle = i * radians(360/numpetals);
ellipse(width * 0.4 + (fradius3/2 + pradius3/2) * cos(angle), height * 0.65 + (fradius3/2 + pradius3/2) * sin(angle), pradius3, pradius3);
}
}
For this project, I decided to use daisies as my inspiration. At first I was kind of confused as to how I was going to execute this image, but after planning it out and figuring out the appropriate code for each movement, I was able to successfully draw this out.
