![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2023/09/stop-banner.png)
var angle = 80;
function setup() {
createCanvas(600,450);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(mouseX,mouseY, 155);
//leaves
/*This part of the code draws two ellipses of grass green color. I used push() and pop()
commans to remember new positions of two ellipses due to translation and rotation*/
if(mouseX>300) {
push();
noStroke();
fill(124, 252, 0);
translate(300, 300); //chnages a (0, 0) point to (300, 300)
rotate(radians(50)); //rotates an ellipse 50 degrees in radians clockwise
ellipse(66, 20, 30, 70);
rotate(radians(-83)); //rotates an ellipse 80 degrees in radians counterclockwise
ellipse(-30, 20, 25, 50);
pop();
}
//This part of the code draws dark green stem of a flower
noStroke();
fill(0, 100, 0);
rect(298, 230, 5, mouseX);
//This part of the code restricts mouseX to 0-115
var m = max(min(mouseX, 115), 0);
var size = m * 350.0 / 400.0;
/*I used push() and pop() commands to remember new positions of petals becuase I used
translation and rotation. I drew 9 petals of a flower by rotating them 40 degrees in radians
from previous petal's location*/
push();
stroke(255);
strokeWeight(1);
fill(55, mouseX, mouseY, 150); /*This changes the color of petals in regards with (x,y)
location and it has 150 transparency*/
translate(300, 225); //changes a (0, 0) point to (300, 225)
rotate(radians(40));
ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
rotate(radians(40));
ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
rotate(radians(40));
ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
rotate(radians(40));
ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
rotate(radians(40));
ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
rotate(radians(40));
ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
rotate(radians(40));
ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
rotate(radians(40));
ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
rotate(radians(40));
ellipse(0 + m * 190.0 / 400.0, 0, 100, 35);
pop();
//This part of the code draws a stigma of a flower
noStroke();
fill(150, mouseX, mouseY); /*This changes the color of stigma in regards with (x,y)
location*/
circle(300, 225, 15);
//This part of the code draws 3 cluds that are moving with regards of mouseX
noStroke();
fill(max(mouseX, mouseY)); /*This changes clouds' color by choosing the greater value from
mouseX and mouseY locations*/
ellipse(mouseX, 50, 70, 35);
ellipse(mouseX+25, 40, 50, 20);
ellipse(mouseX-25, 60, 50, 20);
ellipse(mouseX+120, 80, 70, 35);
ellipse(mouseX+145, 70, 50, 20);
ellipse(mouseX+95, 90, 50, 20);
ellipse(mouseX+240, 25, 70, 35);
ellipse(mouseX+265, 15, 50, 20);
ellipse(mouseX+215, 35, 50, 20);
//This part of the code draws grass
fill(55, 143, 80);
noStroke();
//first moving part of grass in regards with mouseX
triangle(mouseX-540, 450, mouseX-530, 400, mouseX-520, 450);
triangle(mouseX-520, 450, mouseX-510, 400, mouseX-500, 450);
triangle(mouseX-500, 450, mouseX-490, 400, mouseX-480, 450);
triangle(mouseX-480, 450, mouseX-470, 400, mouseX-460, 450);
triangle(mouseX-460, 450, mouseX-450, 400, mouseX-440, 450);
triangle(mouseX-440, 450, mouseX-430, 400, mouseX-420, 450);
triangle(mouseX-420, 450, mouseX-410, 400, mouseX-400, 450);
triangle(mouseX-400, 450, mouseX-390, 400, mouseX-380, 450);
triangle(mouseX-380, 450, mouseX-370, 400, mouseX-360, 450);
triangle(mouseX-360, 450, mouseX-350, 400, mouseX-340, 450);
triangle(mouseX-340, 450, mouseX-330, 400, mouseX-320, 450);
//constant part of grass
triangle(200, 450, 210, 400, 220, 450);
triangle(220, 450, 230, 400, 240, 450);
triangle(240, 450, 250, 400, 260, 450);
triangle(260, 450, 270, 400, 280, 450);
triangle(280, 450, 290, 400, 300, 450);
triangle(300, 450, 310, 400, 320, 450);
triangle(320, 450, 330, 400, 340, 450);
triangle(340, 450, 350, 400, 360, 450);
triangle(360, 450, 370, 400, 380, 450);
triangle(380, 450, 390, 400, 400, 450);
//second moving part of grass in regards with mouseX
triangle(mouseX-930, 450, mouseX-920, 400, mouseX-910, 450);
triangle(mouseX-910, 450, mouseX-900, 400, mouseX-890, 450);
triangle(mouseX-890, 450, mouseX-880, 400, mouseX-870, 450);
triangle(mouseX-870, 450, mouseX-860, 400, mouseX-850, 450);
triangle(mouseX-850, 450, mouseX-840, 400, mouseX-830, 450);
triangle(mouseX-830, 450, mouseX-820, 400, mouseX-810, 450);
triangle(mouseX-810, 450, mouseX-800, 400, mouseX-790, 450);
triangle(mouseX-790, 450, mouseX-780, 400, mouseX-770, 450);
triangle(mouseX-770, 450, mouseX-760, 400, mouseX-750, 450);
triangle(mouseX-750, 450, mouseX-740, 400, mouseX-730, 450);
if(mouseX>width/2){ //checks if mouseX is on the right side of a screen
translate(500, 100); //changes a (0, 0) point to (500, 100)
var mapX = map(mouseX, 100, 300, 250, 250); //remaping a mouseX from one range to another.
var mapY = map(mouseY, 100, 0, 100, 200); //remaping a mouseY from one range to another.
//This part of the code draws sunrays that will follow mouseX and mouseY
strokeWeight(5);
stroke(255,165,0); //orange
line(0, 0, mapX, mapY);
line(0, 0, mapX-20, mapY-20);
line(0, 0, mapX-80, mapY-80);
line(0, 0, mapX-140, mapY-140);
line(0, 0, mapX-200, mapY-200);
stroke(218,165,32); //golden rod
line(0, 0, mapX, mapY);
line(0, 0, mapX+20, mapY-20);
line(0, 0, mapX+80, mapY+80);
line(0, 0, map-140, mapY+140);
line(0, 0, mapX+200, mapY+200);
stroke(255,215,0); //gold
line(0, 0, mapX*1, mapY*1);
line(0, 0, mapX*1.5, mapY*1.5);
line(0, 0, mapX*2, mapY*2);
line(0, 0, mapX*0.5, mapY*0.5);
line(0, 0, mapX, mapY*1.5);
line(0, 0, mapX*1.5, mapY);
stroke(255,69,0); //orange red
line(0, 0, mapX-50, mapY+20);
line(0, 0, mapX+200, mapY);
line(0, 0, mapX-30, mapY+55);
line(0, 0, mapX*0.2, mapY+100);
line(0, 0, mapX-20, mapY+130);
line(0, 0, mapX*1.4, mapY/1.2);
//This part of the code draws a sun
strokeWeight(3);
stroke(255);
fill(249, 215, 28);
circle(0, 0, 70);
}
}
During the process of my work, I thought of things that change their position or their colors all the time in real world and I came up with a small drawings of a flower, clouds, grass, sun and sky. I followed the idea that flowers grow and clouds move which made it easier to follow the procedures.