# data[].attributes.body
https://editor.p5js.org/Valeria_Dominguez/sketches/HgBCPj5EC

# data[].attributes.body
var b //defines variable b
var c //defines variable c
var speed//defines speed
var mouse = false//defines mouse = false
function setup() {//sets up the canvas
createCanvas(600, 400); //creates canvas
speed = 5;//assigns the value
b = 200;//assigns the values
c = 300;//assigns the values
}

function draw() { //creates what will be displayed
barn(100,100,100,100);//calls barn function
grass(100,100,100,100);//calls grass function
cloud(100,100,100,100);//calls cloud function
sun(100,100,100,100);//calls sun function
var w = width/2; //give variable w a value
var h = w/2; //gives variable h a value
body(250, 245, 200, w);//body of the truck
wheel(490, 350, 45, 45);//front wheel
head(455, 275, 80, 70);//head of the truck
wheel(290, 350, 50, 50);//back wheel of the truck
wheel(370, 350, 50, 50);//middle wheel
cow(100,100,100,100);//calls cow function
for (var p = 0; p <= 600; p = p + 30) {//for loop for our flowers
flower(p, 380);}//calls flower function
bee(100,100,100,100);//calls bee function
if(mouse === true){//if statement for animation
b = 200//gives b a value
speed= 5//gives speed a value
mouse = false}//variable
b+=speed

if (b > 400 || b < 0){
speed = -2 }
if (b < 0){
speed = 5}

}

function barn (x,y,width,height){ //creates function barn
if(mouseIsPressed){
background(142, 142, 251)//darker background
for(var v = 30; v < 600; v+=60){//for loop for stars
noStroke()//no outline
fill('yellow')//yellow color
ellipse(v ,c  ,8,16);//top row of stars
ellipse(v,c ,16,8);//top row of stars
ellipse(v, c + 100,16,8);//middle row of stars
ellipse(v ,c + 100,8,16);//middle row of stars
ellipse(v, c + 200,16,8);//last row of stars
ellipse(v,c + 200,8,16);//last row of stars
if(mouse === true){//if statement for animation
c = 100//assigns c a value
speed= -2//how fast it'll go
mouse = false}//variable
c+=speed
if (c > 320){
speed = -2}
if (c < 0){
speed = 2}
}}

else { background(178,255,255);//creates lighter background
}//closes if statement
noStroke()//no outline
fill(255, 77, 77) //color of the barn
rect(40,205,200,150); //size of the barn
noStroke() //no stroke on the roof
triangle(40, 204, 140, 100, 240, 204); //roof of the barn
fill(214, 255, 255) //color of the windows
rect(70,220,40,40);//left window
rect(170,220,40,40);//right window
noStroke()//nostroke on the door
if (mouseIsPressed){ //action will open the door
fill(124, 78, 32)//color of the door
rect(120,305,10,50);}//size & position of the opened door
else {fill(124,78,32)//color of the door
rect(120,305,50,50);   //size &positon of closed door
} //door opens
noStroke() //no stroke on the windows
if (mouseIsPressed){//open and close the windows
fill(255)//color of the windows open
rect(70,220,40,40);//left window
rect(170,220,40,40);//right window
fill(0)//black color of the person
ellipse(190,239,15,15);//persons head
rect(194,246,10,3);//right arm
rect(177,246,10,3);//left arm
rect(186,245,8,16);//persons body
} //person in the window when it opens
else { //what appears when mouse isn't pressed
fill(255, 181, 255)//curtain color
rect(70,220,40,40);//left curtain positon
rect(170,220,40,40);//right curtain position
} //curtains open

} //closes barn function
function grass (x,y,width,height){ //creates grass function
noStroke() //no outline
fill(102,255,102)//green color of the grass
rect(-50,345,720,60,100); //size & position of the grass
}///closes grass function
function cloud(x,y,width,height){//creates cloud function
fill(255)//white color in the clouds
ellipse(b + 5, 87,50,50); //far left cloud
ellipse(b + 130,84,50,50); //far right cloud
ellipse(b+110,64,50,50); //right part cloud
ellipse(b + 30,54,50,50); //left part cloud
ellipse(b + 70,54,50,50);//middle part cloud
rect(b, 68, 155, 45, 120);//bottom part of the cloud
}//closescloud function
function sun(x, y , width,height){ //creates sun funtion
if (mouseIsPressed){ //makes moon appear
fill(0) //moon
ellipse(0,0,150,150);//bigger sun
}
else { fill(255,255,127);//lighter color
ellipse( 0, 0, 150,150);//smaller sun
}    }//closes sun function
function flower (p, o) {//controls & creates flowers

stroke('green');//color of the outline
line(p, o, p, o + 20);//stem of the flower
noStroke();//no outline
fill('pink');//color
ellipse(p - 9, o, 7, 7);//petals
ellipse(p - 7, o - 5, 7, 7);//petals
ellipse(p - 2, o - 8, 7, 7);//petals
ellipse(p + 4, o - 7, 7, 7);//petals
ellipse(p + 8, o - 4, 7, 7);//petals
ellipse(p + 9, o + 2, 7, 7);//petals
ellipse(p + 5, o + 7, 7, 7);//petals
ellipse(p - 1, o + 8, 7, 7);//petals
ellipse(p - 7, o + 6, 7, 7);//petals
fill('yellow');//color
ellipse(p, o, 15, 15);//middle part of the flower
}//closes flower function
function cow(x,y,width,height){ //creates cow function
stroke(0)//black outline
strokeWeight(3)//thickness of the stroke
fill(255)//white color
ellipse(50,370,60,40);//body of the cow
ellipse(40,390,15,15); //left foot of the cow
ellipse(65,390,15,15); //right foot of the cow
ellipse(70,350,30,30);//head of the cow
fill(0)//black color
ellipse(33,359,10,10);//spot on top left
ellipse(73,378,10,10);//right lower spot
ellipse(47,375,10,10);//almost middle spot
ellipse(87,340,10,5);//right cow ear
ellipse(53,340,10,5);//left cow ear
}//closes cow functiom
function bee (x,y,width,height){//creates a bee/bat
if(mouseIsPressed){//if mouse was pressed this would happen
noStroke()//no outine
fill(36)//grey color
ellipse(mouseX,mouseY - 7,75,15)//top wing
ellipse(mouseX,mouseY,55,15)//lower wing

fill(0)//black color
ellipse(mouseX,mouseY,20,40);//bat body
ellipse(mouseX,mouseY - 23,25,25)//bat head
ellipse(mouseX - 10,mouseY -32,10,15);//left ear
ellipse(mouseX + 10,mouseY -32,10,15);//right ear
fill(255)//white color
ellipse(mouseX - 6,mouseY - 27,3,3); // left eye
ellipse(mouseX + 6,mouseY - 27,3,3); //right eye
ellipse(mouseX - 4,mouseY - 19,2,4); //left eye
ellipse(mouseX + 4,mouseY - 19,2,4); //right fang
}//closes what would happen if mouse was pressed
else{//if mouse isnt pressed this happens
fill('yellow')//yellow
stroke(0)//color of the stroke
ellipse(mouseX,mouseY,50,40);//body shape and size
ellipse(mouseX + 20, mouseY - 20,30,30);//head shape and size
fill(0)//black color on the bee
ellipse(mouseX,mouseY,7,40);//middle line
ellipse(mouseX - 15,mouseY,7,30);//2nd left line
ellipse(mouseX - 27,mouseY,7,10);//last line
ellipse(mouseX + 15,mouseY + 6,7,20);//right line
ellipse(mouseX+25,mouseY - 24,3,3);//stinger
fill(128, 223, 255)//color of the bees wing
ellipse(mouseX - 10,mouseY,30,15);//shape&size of the bees wing
}}//closes the bee function
function body(x, y, width, w) {//body of the truck
stroke(0)//color of the stroke
strokeWeight(3);//thickness of the stroke
w = width/2;//how the var w is going to be worked
fill('orange');//color of the trucks body
rect(x, y, width, w);//shape of the truck's body
}//closes the body function
function wheel(x, y, width, height) {//creates the wheels
width = height;//these values are meant to be the same
fill(0);//color of the wheel
ellipse(x, y, width, height);//shape of the wheel
}//closes the wheel function

function head(x, y, width, h) {//head of the truck
stroke(0)//black stroke line
strokeWeight(3)//thickness of the stroke
fill('green');//color of the head of the truck
rect(x, y, width, h);//shape
}//closes the function

# data[].attributes.body
Sam Aqsa Alyssa

# data[].attributes.body
Sam Aqsa and Alyssa

# data[].attributes.body
https://editor.p5js.org/omar_Najih/sketches/hBHxI28i0

# data[].attributes.body
var rain = [];
var rainingNow = true;
var bgcolor = (100, 100, 100);

function setup() {
createCanvas(600, 600);
//frameRate(60);

for (i = 0; i < 100; i++) {
rain[i] = new Rain(random(50, 550), random(0, -3000));
}
}

function draw() {
background(bgcolor);
flower();
ground();
//Rain();
//console.log(mouseX, mouseY);

//Check if it's raining or sunny
if (rainingNow == true) {
//background(100);
for (i = 0; i < rain.length; i++) {
rain[i].dropRain();
rain[i].splash();
}
} else {
drawSun();
//background(160,209,230);
}
}

function ground() {
//noStroke();
fill(170, 150, 146, 240);
rect(0, 530, 600, 530);
}

function Rain(x, y) {
this.x = x;
this.y = y;
//this.gravity = 9.8;
this.length = 15;
this.r = 0;
this.opacity = 200;

this.dropRain = function() {
noStroke();
fill(255);
//rect(this.x, this.y,3,15);
ellipse(this.x, this.y, 3, this.length);
this.y = this.y + 6 //+ frameCount/60;
if (this.y > 540) {
this.length = this.length - 5;
//this.y= random(0,-100);
}
if (this.length < 0) {
this.length = 0;
}
}

this.splash = function() {
strokeWeight(2);
//stroke(245, 200/frameCount);
stroke(245, this.opacity);
noFill();
if (this.y > 540) {
ellipse(this.x, 550, this.r * 2, this.r / 2);
this.r++;
this.opacity = this.opacity - 10;

//keep the rain dropping
if (this.opacity < 0) {
this.y = random(0, -100);
this.length = 15;
this.r = 0;
this.opacity = 200;
}
}
}
}

function flower() {
//drawFlower();

//flower1
for (var r11 = 0; r11 < 10; r11++) {
stroke(85,107,47,20);
strokeWeight(3);
if (frameCount <= 600) {
line(400, 550, 400, 400 + frameCount / 10);
}
if (frameCount > 600) {
line(400, 550, 400, 460);
}
noStroke();
}

push();
fill(230, 190, 230, 240);
translate(400, 400);
noStroke();
//rotate(radians(frameCount / 2));
for (var r1 = 0; r1 < 10; r1++) {
if (frameCount <= 600) {
ellipse(0, 10 + frameCount / 20, 10 + frameCount / 40, 20 + frameCount / 20);
}
if (frameCount > 600) {
ellipse(0, 40, 25, 50);
}
rotate(PI / 5);
}
pop();

//flower2
for (var r21 = 0; r21 < 10; r21++) {
stroke(85,107,47,20);
strokeWeight(3);
if (frameCount <= 600) {
line(300, 580, 300, 430 + frameCount / 10);
}
if (frameCount > 600) {
line(300, 580, 300, 490);
}
noStroke();
}

push();
fill(235, 194, 204, 240);
translate(300, 430);
noStroke();

for (var r2 = 0; r2 < 10; r2++) {
if (frameCount <= 600) {
ellipse(0, 10 + frameCount / 20, 10 + frameCount / 40, 20 + frameCount / 20);
}
if (frameCount > 600) {
ellipse(0, 40, 25, 50)
}
rotate(PI / 5);
}
pop();

//flower3
for (var r31 = 0; r31 < 10; r31++) {
stroke(85,107,47,20);
strokeWeight(3);
if (frameCount <= 600) {
line(180, 535, 180, 390 + frameCount / 10);
}
if (frameCount > 600) {
line(180, 535, 180, 435);
}
noStroke();
}

push();
fill(245, 204, 174, 240);
translate(180, 385);
noStroke();
for (var r3 = 0; r3 < 10; r3++) {
if (frameCount <= 600) {
ellipse(0, 10 + frameCount / 20, 10 + frameCount / 40, 20 + frameCount / 20);
}
if (frameCount > 600) {
ellipse(0, 40, 25, 50)
}
rotate(PI / 5);
}
pop();

//flower4
for (var r41 = 0; r41 < 10; r41++) {
stroke(85,107,47,20);
strokeWeight(3);
if (frameCount <= 600) {
line(510, 575, 510, 425 + frameCount / 10);
}
if (frameCount > 600) {
line(510, 575, 510, 485);
}
noStroke();
}

push();
fill(245, 174, 154, 240);
translate(510, 425);
noStroke();
for (var r4 = 0; r4 < 10; r4++) {
if (frameCount <= 600) {
ellipse(0, 10 + frameCount / 20, 10 + frameCount / 40, 20 + frameCount / 20);
}
if (frameCount > 600) {
ellipse(0, 40, 25, 50)
}
rotate(PI / 5);
}
pop();

//flower5
for (var r51 = 0; r51 < 10; r51++) {
stroke(85,107,47,20);
strokeWeight(3);
if (frameCount <= 600) {
line(70, 600, 70, 450 + frameCount / 10);
}
if (frameCount > 600) {
line(70, 600, 70, 510);
}
noStroke();
}

push();
fill(245, 174, 184, 240);
translate(70, 450);
noStroke();
for (var r5 = 0; r5 < 10; r5++) {
if (frameCount <= 600) {
ellipse(0, 10 + frameCount / 20, 10 + frameCount / 40, 20 + frameCount / 20);
}
if (frameCount > 600) {
ellipse(0, 40, 25, 50)
}
rotate(PI / 5);
}
pop();
}

function mousePressed() {
//background(160,209,230);
rainingNow = false;
//Change to blue sky
bgcolor = ('lightblue');
}

function drawSun() {

fill(245, 187, 87);
stroke(245, 187, 87);
push();
translate(100, 80);
rotate(radians(frameCount / 2));
ellipse(0, 0, 60, 60);
line(0, -60, 0, -40);
line(0, 40, 0, 60);
line(-45, -45, -30, -30);
line(45, -45, 30, -30);
line(-60, 0, -40, 0);
line(40, 0, 60, 0);
line(-45, 45, -30, 30);
line(45, 45, 30, 30);
pop();
noFill();
}

# data[].attributes.body
The first lines of code are the variables being assigned values than I use the for loop for the rain drops and when rain is true and the background is a dark color.the ground is made by the rect shapes and is a brown color. Than I used an else statement to make a sun when the rain is gone when I press the picture to change the weather. Than I made flowers with functions than I used an if statement to make the flowers and i made 5 and changed the location on the canvas for each flower. than I used mouse press to change the weather manually. I made it so the flowers bloom and rotate with the pop command and rotate command. I also used the these commands in the sun.

# data[].attributes.body
https://editor.p5js.org/wildgetcoo126/sketches/RoT4jn4-F

# data[].attributes.body
https://editor.p5js.org/meilynchan/sketches/-9_hU3J3e

# data[].attributes.body
https://editor.p5js.org/NZelinger/sketches/IJ46u3tP7

# data[].attributes.body
function setup() {
createCanvas(800, 600);
sy = 0
}

function draw() {
//the blue background
background(0,220,220)

sky(400);
house();
trees(90, 90, 20, 100);
robot();
robotFace(20, 10);
pond(200, 90);

}

function house(){
stroke(0);
fill('grey');
triangle(35, 150, 357, 152, 200,60);

// house
fill('rosybrown');
rect(75,150,250,250);

// door
fill('black');
rect(100,250, 75,150);

// door knob
fill('yellow');
noStroke();
ellipse(110, 330, 10,10);
}

function trees(leavesX, leavesY, trunkX, trunkY){
//the tree trunks
fill('brown')
rect(595,300,trunkX, trunkY);
rect(695,300,trunkX, trunkY);

//the tree leaves
fill('green')
ellipse(605,295,leavesX, leavesY);
ellipse(705,295,leavesX, leavesY);
}

//this function draws the sky
function sky(skyWidth){

if(mouseX > skyWidth || mouseX < 0){
background(0)

noStroke();
fill('white')
ellipse(mouseX, mouseY, 70, 70);

fill('white')
rect(-100, 350, 2000, height, 20);
}
else{
noStroke();
fill('gold')
ellipse(mouseX, mouseY, 100, 100);

fill('white')
rect(-100, 350, 2000, height, 20);
}

if(mouseX > 400){
for(var x = 0; x < 800; x = x + 40){
fill('white')
ellipse(x, sy + 50, 10, 10);
ellipse(x, sy + 100, 10, 10);
ellipse(x, sy, 10, 10);
ellipse(x, sy - 50, 10, 10);

sy += .05
}

}
}

function robot(){

fill('silver')

//body
rect(450, 380, 55, 75, 20);

//neck
rect(465, 370, 20, 20);

//head
rect(440, 300, 70, 70);

//the shoulders
ellipse(445, 390, 20, 20);
ellipse(510, 390, 20, 20);

//the arms
rect(440, 390, 5, 50);
rect(510, 390, 5, 50);

//the hands
ellipse(443, 450, 10, 20);
ellipse(513, 450, 10, 20);

//the upper legs
rect(455, 450, 5, 50);
rect(495, 450, 5, 50);

//knees and feet
ellipse(460, 490, 20, 20);
ellipse(500, 490, 20, 20);
ellipse(460, 545, 20, 15);
ellipse(500, 545, 20, 15);

//the lower legs
rect(455, 490, 5, 50);
rect(500, 490, 5, 50);

}

//this function draws the small pond in front of the house
function pond(pondWidth, pondHeight){
fill('blue')
rect(140, 450, pondWidth, pondHeight, 40);
}

//this function draws the robot's face
function robotFace(eyeLength, eyeHeight){
//this draws the mouth of the robot
fill('brown')
rect(470, 350, eyeLength, eyeHeight)

//this if else statement uses mouseIsPressed to make the robot blink
if(mouseIsPressed){
fill('brown')
rect(450, 330, 10, 5)
rect(490, 330, 10, 5)
}

else{
fill('brown')
rect(450, 330, 10, 10)
rect(490, 330, 10, 10)
}

}

# data[].attributes.body
https://www.lucidchart.com/documents/edit/1e29da8d-51fa-45ca-bcf1-e851f8df2f72?shared=true&

# data[].attributes.body
Our code first starts off with the setup. After setting our canvas size, we created six functions. One function contains two if statements and one for loop to make up the changing sky background. The user can change the sky by moving their mouse. The sky will change from a nice sunny day to a snowy night. Two functions create both the trees and the house. We have one function for a pond and one for the body of our robot. Lastly we have a separate function that draws the robot's face. This function includes an if statement with mouseIsPressed that basically allows the robot to blink when the screen is pressed.

# data[].attributes.body
The size of our canvas was (600,400) and before began to go more into the code, we had to call the variables we were going to use which were b,c, speed, and mouse = false. In the Draw Function we had to call all our functions and add the if statement for our animation. The Barn function draws our barn using a rectangle and a triangle, it also uses rectangles for the windows and doors. We included a If statement with the mouseIsPressed to mix up our scene, when the mouse is pressed the barns door opens, the curtains open to show a person in the window, the time is now night time and a shower of stars occur that we created using a for loop and our variables c,speed, and mouse = false . The cloud function draws our cloud into the sky using ellipses and a curved rectangle. We used variables b, speed, and mouse = false to be able to add animation to our cloud, now with this if statement, our cloud moves from left ot right across the sky. The grass function creates a green rectangle which makes the scene have grass in it. The Sun function uses ellipses to make the canvas have a sun. This function also has a if statement with the mouseIsPressed that turned the yellow ellipse into a black one to represent a moon. The Flower function draws flowers onto the grass, in this function we used a for loop to make a row of flowers. The cow function draws a small cute cow visible in the bottom left screen. The Bee function creates a bee out of ellipses that follows you around due to mouseX, we added an if statement that when the mouse is clicked the bee will turn into a bat to go with the night time theme. The Function head,body, and wheels creates the truck visible on the east side of the screen.

# data[].attributes.body
We began our code by using the create canvas function imbedded into p5 and changing the arguments to create the canvas we wanted (600 by 400). Then we created the car functions by making wheels using ellipses and an arc to make the general shape of the car. We also created the building, sters and cheese moon functions in order to make the parts of the scene. At first we wrote out what we wanted in each function and created parameters (all of our functions use x and y), then called them and put in arguments .We added loops and if statements to certain functions in order to make the scene more artistically appealing. For example we used a “for loop” in order to repeat the row of sters function and used a random function in order to create the color blinking for the stars.

We also used and “if statement” in order to change background color when we press the mouse in order to make the code more interactive.  When mouseIsPressed is true the background color is gray but when it’s false the color is black. The most important if statement used in our code was to create animation for the cars. If x was less than 900 the cars would move x+1 which means they moved forwards on the x axis. If x was greater than 900 the cars would go back to the starting point and the animation would start again. Together all of these elements worked together to create a our cityscape/highway scene.