## amui1 – Project-07-Curves

``````//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-07

//global variables
var nPoints = 100;

function setup() {
createCanvas(480,480);
}

function draw() {
background(0,0,63);
//places bottom left corner
drawAstroid(70,height-80);
//places top right corner
drawAstroid(width-60,80);
drawRose();
}

function drawAstroid(xPos,yPos) {

//size
var a = 30;

beginShape();
noFill();

stroke(255,242,254);
strokeWeight(1);

//loops ten times to make layer of astroid
for (var num = 0; num < 10; num += 1) {
//test loop
//print(num);
//loops through 100 times to make the curve
for (var i = 0; i < nPoints; i++) {
//constrains and maps theta to be between 0 and two pi
var theta = map(i, 0, nPoints, 0, TWO_PI);

//formulas provided by MathWorld
x = xPos + a*(cos(theta)**3);
y = yPos + a*(sin(theta)**3);

vertex(x,y);

}
endShape();
//decreases size of astroid in accordance with mouseX
a = a - constrain(mouseX,0,width);
}
}

function drawRose() {
stroke(255,252,201);
noFill();
//size of rose inm accordance with mouseX
var roseA = constrain(mouseX,50,200);
//number of petals
var roseFactor = 6;

//loop through 10 times for extra layers
for (var roseNum = 0 ; roseNum < 10; roseNum += 1) {
for (var i = 0; i < nPoints; i++) {
//constrains theta to be between 0 and two pi
var roseTheta = map(i,0,nPoints,0,TWO_PI);

//formulas from mathworld
r = roseA*sin(roseFactor*roseTheta);

roseX = width/2 + r*cos(roseTheta);
roseY = height/2 + r*sin(roseTheta);

ellipse(roseX,roseY,1,1);
}
//decreases size of rose in accordance with mouseX
roseFactor = roseFactor - mouseX;
//to test
// print(roseFactor);
}
}
``````

This project was pretty challenging. I found mathWorld extremely useful in showcasing the x and y equations in order to make the shape. However, I found it difficult to come up with a creative idea that implemented the curve shape. What I came up with was inspired by the stars. Overall, I’m satisfied with my end product. However, in the future, I would like to explore more and maybe implement something new using the time function. Another thing that I wish I could have taken more time researching was finding a way to make the astroid curve into a rose curve over the movement of mouseX. But, that was too hard and too much of a time constraint for the time being. Overall, I’m satisfied with my end product which gives off a “sparkly” feel.

## amui1-LookingOutwards-07

The project I chose to reflect on for this week’s Looking Outwards is called “Facebook Flowers.” This project is by Stamen Designs.

This first video is called “Marvin the Martian.” The artists follow the viral activity after George Takei, an American Actor, most well known as Hikaru Sulu in Star Trek, shares a “Marvin the Martian” picture on Facebook. They realized that the sharing and connections that follow a thread create this ever continuing strand, which branches indefinitely off of numerous points. The artists compare this large and complex data set to a living organism such as a plant or algae.

Caption: “Marvin the Martian.” This video is showing the thread after George Takei shared a picture on Facebook.

Caption: “Famous Failures.” Facebook thread after posting of the most famous failures.

This video is called “Famous Failures.” I admire this video in particular because it contrasts significantly to the video above. This “algae” is much more concentrated and sprouting much more quickly. This represents how fast and how far “bad news” spreads. I can only imagine how large and complex the data set behind this visualization was. So, it is really inspirational that the artists were able to symbolize and communicate the same meaning from the data set in such a representative, graceful experience.

I couldn’t find any information on how exactly the artists related the data set points to the points on the visualization. However, I suspect there is a mapping of points (each time the thread is continued) from an original point (the beginning post). I suspect, after that, maybe the points are transferred to an x-y plot.

The full page can be found here

## amui1-Project-06-Abstract-Clock

``````//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-06

//variables for solar system
solarSize = 325;
//variables for star

function setup() {
createCanvas(400,400);
}

function draw() {
background(25,25,62);

//get time
var hr = hour();
var twelveHr = hr%12;
var min = minute();
var sec = second();

//print time
fill(255);
strokeWeight(0);
text(nf(twelveHr,2,0) + ':' + nf(min,2,0) + ':' + nf(sec,2,0),30,30);

//border of solar system
noFill();
stroke(60,60,85);
strokeWeight(6);
ellipse(width/2,height/2,solarSize,solarSize);
ellipse(width/2,height/2,solarSize-100,solarSize-100);

//HOURS

//flag stick
push();
translate(width/2,height/2);
rotate(hr);
stroke(255);
strokeWeight(5);
line(0,0,0,90);
pop();

//flag
push();
translate(width/2,height/2);
fill(255);
strokeWeight(0);
rotate(hr);
rectMode(CENTER);
fill(164,216,150);
rect(-25,78,40,30,5);
pop();

//flag symbol
push();
translate(width/2,height/2);
fill(255,255,0);
strokeWeight(0);
rotate(hr);
ellipse(-25,78,10,10);

pop();

//sun

//assign random variables to make sun move
var sunX = random(-.5,.5);
var sunY = random(-.5,.5);

fill(255,198,0);
strokeWeight(0);
ellipse(width/2,height/2,solarSize/4,solarSize/4);
//flares
for (i=0; i < 20; i++) {
push();
translate(width/2,height/2);
rotate(TWO_PI*i/20);
fill(255,172,0);
triangle(10+sunX,50+sunY,40-sunX,20+sunY,20+sunX,30+sunY);
pop();
}

//SECONDS

//star
fill(255,255,0);
//makes star move
var offset = second();
//maps second to width of the canvas
var offset = map(offset,0,60,0,width);
translate(0,50);
var xStar = [16+offset,20+offset,
30+offset,25+offset,
23+offset,15+offset,
7+offset,9+offset,
4+offset,14+offset];
var yStar = [5,10,
15,20,
30,25,
30,20,
15,10];

var lenStar = xStar.length;

beginShape();
for (var i = 0; i <lenStar; i++) {
vertex(xStar[i],yStar[i]);
}
endShape();
//shooting star
stroke(255);
strokeWeight(2);
line(-50+offset,15,0+offset,15);
line(-50+offset,20,0+offset,20);

//spaceship
fill(211,211,211);
strokeWeight(1);

//MINUTES

//makes spaceship move
var shipOff = minute();
var shipOff = map(shipOff,0,60,0,width);
//variables for ship x and y movement
var sxDist = 6;
var syDist = 10;
//to test
//print('subtracted=' + shipOff/syDist);

//draws ship
stroke(0);
translate(0,0);

//right side of circle
//left side of circle
//base triangle
triangle(-5+shipOff,height-90-shipOff/syDist,
27.5+shipOff,height-75-shipOff/syDist,
60+shipOff,height-90-shipOff/syDist);
//base little circles
ellipse(27.5+shipOff,height-73-shipOff/syDist,8,3);
ellipse(27.5+shipOff,height-70-shipOff/syDist,6,3);
ellipse(27.5+shipOff,height-66-shipOff/syDist,4,3);

//body of ship
strokeWeight(0);
//light pink
fill(249,170,202);
rect(-5+shipOff,height-95-shipOff/syDist,63,10,5);
//darker pink
fill(241,43,122);
rect(-10+shipOff,height-100-shipOff/syDist,75,8,5);

// top triangle
fill(172,153,198);
triangle(-5+shipOff,height-100-shipOff/syDist,
27.5+shipOff,height-120-shipOff/syDist,
60+shipOff,height-100-shipOff/syDist);
fill(209,209,227);
//top window thingy
arc(27.5+shipOff,height-106-shipOff/syDist,35,40,PI,0,CHORD);

//draws alien

fill(164,216,150);
ellipse(27.5+shipOff,height-111-shipOff/syDist,10,10);
stroke(164,216,150);
strokeWeight(2);
//alien attenae
line(27.5+shipOff,height-111-shipOff/syDist,
23.5+shipOff,height-119-shipOff/syDist);
line(27.5+shipOff,height-111-shipOff/syDist,
31.5+shipOff,height-119-shipOff/syDist);
ellipse(22.5+shipOff,height-120-shipOff/syDist,5,1);
ellipse(33.5+shipOff,height-120-shipOff/syDist,5,1);

//alien eyes
fill(0);
strokeWeight(0);
ellipse(25.5+shipOff,height-112-shipOff/syDist,2,2);
ellipse(29.5+shipOff,height-112-shipOff/syDist,2,2);

}
``````

I found this project to be one of the more challenging assignments. However, I liked it because there was a lot of room for creativity. Similar to the other projects, I wanted to tell time, but somehow include a story. I had the most trouble coordinating the rotations with the hours/seconds/minutes. In the future, I would like to spend more time expanding on that further.

This was what my idea started out as.

## amui1-LookingOutwards-06

The piece I chose to reflect on today is “Two hands, one loop.” This is a piece by the artist, J.Eric Morales.

I chose this piece because the shapes and outlines are computed and drawn to be very random. But in the end, the shapes and outlines have a purpose and form something recognizable. In fact, the shapes are created of a single line. Learning this, I admire this piece even more. At first glance, the portions besides the hand look unstructured. However, all being strung together by one single line gives the piece unity and cohesiveness. The random movement of the line forms shapes come together that and even form a greater story. I really admire this because it shows that the artist had such an abstract way of thinking, but a very definite plan and objective of the piece.

I couldn’t find any information on how the artist computed the algorithms and randomness in the work. But, I suppose he had the line have random distance between the first and second point and then when it got to the placements of the hand, the random possibilities of distances got smaller.

Link to other projects Morales completed are found here

Morales full page can be found here

## amui1-LookingOutwards-05

For this Looking Outwards, I decided to reflect on this piece:

It is called “One is the Loneliest Number” by Stefan Morrell. When it comes to 3D computer graphics, I usually gravitate towards CGI animations and short stories. However, just like what the post says, looking outwards is about searching for inspiration in new things.

I thought this piece was really inspiring because of the immense amount of detail the artist included in each piece of the graphic. If you zoom into the buildings, you can see that the artist rendered every single piece of it: from buttons, to panels, to gateways, to objects, etc. In addition, I really like the concept of this piece. It shows one lonely space craft in a humongous arena. When I looked at this piece, I immediately thought of the phrase: “small fish in a big pond.” I really like the contrast in size and sense of depth portrayed throughout this whole piece.

Lastly, the artist did not release any information on his process for this piece. However, I discovered that Stefan Morrell is an environmental artist from New Zealand and the bulk of his pieces have won awards for being extremely photo realistic 3d.

Find piece in better quality here

Link to Stefan Morrell’s full page of pieces here and here

## amui1-Project-05-Wallpaper

``````//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-05

var x = 50;
var y = 50;

function setup() {
createCanvas(480,480);
}

function draw() {
background(187,0,0)
stroke(234,247,206);
strokeWeight(1);
//flower design
for (xPosition = 40; xPosition < width - 20; xPosition += 100) {
//don't make lines through middle
if (xPosition <= 150 || xPosition > 300) {
line(xPosition,0,xPosition,height);
var y = 20;
//loops for height of canvas - 100 arbitrary number
for (i = 0; i < 100; i++) {
//checks if odd or even tick
if (i%2==0) {
fill(234,247,206);
//flower shape
ellipse(xPosition-10,y-10,5,5);
arc(xPosition-10,y-10,5,15,PI,0);
arc(xPosition-10,y-10,15,5,HALF_PI,3*HALF_PI);
//flower stem
line(xPosition,y,xPosition-10,y-10);
y+= 30;
} else {
//flower stem
line(xPosition,y-15,xPosition+10,y-25);
//flower shape
ellipse(xPosition+10,y-25,5,5);
arc(xPosition+10,y-25,5,15,PI,0);
arc(xPosition+10,y-25,15,5,3*HALF_PI,HALF_PI);
}

}
}
}

//middle line

line(width/2,0,width/2,height/2-75);
line(width/2,height/2+75,width/2,height);
//top half
ellipse(width/2,50,10,10);
ellipse(width/2,60,7,7);
ellipse(width/2,67,5,5);
//bottom half
ellipse(width/2,height-67,5,5);
ellipse(width/2,height-60,7,7);
ellipse(width/2,height-50,10,10);

//chinese oriental symbol
noFill();
stroke(218,0,0);
strokeWeight(5);
ellipse(width/2,height/2,125,125);
ellipse(width/2,height/2,50,50);
ellipse(width/2,height/2,20,20)

//inside of middle symbol
//rotate 8 times
for (var i = 0; i <8; i++) {
push();
//move to center of canvas
translate(width/2,height/2);
//rotate 8 times
rotate(TWO_PI * i/8);
strokeWeight(2);
//design
line(30,28,35,33);
line(35,33,40,28);
line(40,28,30,18);
line(30,18,20,30);
line(20,30,35,42);
line(35,42,55,15);
line(55,15,35,12);
line(35,12,33,15);
line(33,15,44,23);
pop();
}

noLoop();
}
``````

Again, I really enjoyed this project and how challenging it was. Using loops is extremely efficient, however, I found it hard to conceptualize. For my project this week, I wanted to connect it with my culture. I am satisfied with my final product. However, originally, I wanted to draw a dragon. But, it was too hard to figure out curves, quadratic curves, bezier curves, etc. In the future, I’d like to expand upon that and how I can utilize loops to make it easier to draw. I started with sketching and as you can see see from my attached pictures, my wallpaper changed many times throughout the iterations.

Above is my original sketch.

Above is what I used to figure out and conceptualize how to do the for loops with the middle oriental symbol.

## amui1-LookingOutwards-04

I researched a lot of artists and watched a lot of installations and videos. Finally, the piece, NOMIS, by Jonathan Sparks really stood out and inspired me.

Nomis is a musical instrument. He wanted to make loop based music expressive and transparent with the use of human gesture and light.The artist combines three different sensibilities: sight, sound, and touch. Throughout this piece, Sparks looped and layered multiple sounds in order to make different melodies in real time. Each sound was represented by a different color. He emphasized the inclusion of light and gesture in order to make his piece more expressive and compelling at live performances.

This piece inspired me because this piece is highly interactive and demonstrates a response with every action. Every action is individualized and brought attention to. However, every action becomes part of a whole melody. This also reminds me of the DJ set many electric music performers use. But, I never thought it had this type of technology behind it.

Full website found here

## amui1-Project-04-String-Art

``````//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-04

//variables for main triangle
var trgStep = 5;
//variables for eye
var eyeStep = 2;
//variables for mini triangle
var trgStepmin = 3;
//variables for left wing
var winStep = 4;

function setup() {
createCanvas(400,300);
}

function draw() {
background(0);

//maintriangle
stroke(255);
strokeWeight(2);
//leftside
for (var midX = 150; midX <= 166; midX += trgStep) {
line(60,230,midX,50);
}
//rightside
for (var midX = 150; midX <= 166; midX += trgStep) {
line(midX,50,270,230);
}
//base
strokeWeight(1);
var baseXa = 60;
var baseYa = 235;
var baseXb = 270;
var baseYb = 235;
for (var i = 0; i < 3; i++) {
line(baseXa,baseYa,baseXb,baseYb);
baseXa += 3;
baseYa -= 3;
baseXb -= 3;
baseYb -= 3;
}

//eye
//outereye

stroke(255,255,0);
strokeWeight(1);

//vertical lines

//part left up
var eyeXa = 120;
var eyeYa = 190;
var eyeXb = 120;
var eyeYb = 155;
for (var i = 0; i < 16; i++){
line(eyeXa,eyeYa,eyeXb,eyeYb);
eyeXa += 3;
eyeYa -= 2;
eyeXb += 5;
}
//part right up
var eyeXa = 200;
var eyeYa = 190;
var eyeXb = 200;
var eyeYb = 155;
for (var i = 0; i < 16; i++){
line(eyeXa,eyeYa,eyeXb,eyeYb);
eyeXa -= 3;
eyeYa -= 2;
eyeXb -= 5;
}
//part left down
var eyeXa = 120;
var eyeYa = 190;
var eyeXb = 120;
var eyeYb = 220;
for (var i = 0; i < 16; i++){
line(eyeXa,eyeYa,eyeXb,eyeYb);
eyeXa += 3;
eyeYa += 2;
eyeXb += 5;
}
//part right down
var eyeXa = 200;
var eyeYa = 190;
var eyeXb = 200;
var eyeYb = 220;
for (var i = 0; i < 16; i++){
line(eyeXa,eyeYa,eyeXb,eyeYb);
eyeXa -= 3;
eyeYa += 2;
eyeXb -= 5;
}

//eyeball
var eyeXa = 155
var eyeYa = 190
var eyeXb = 160
var eyeYb = 185
stroke(255);
for (var i = 0; i < 5; i++) {
line(eyeXa,eyeYa,eyeXb,eyeYb)
eyeXa += eyeStep
eyeXb += eyeStep
}
var eyeXa = 160
var eyeYa = 190
var eyeXb = 155
var eyeYb = 185
stroke(255);
for (var i = 0; i < 5; i++) {
line(eyeXa,eyeYa,eyeXb,eyeYb)
eyeXa += eyeStep
eyeXb += eyeStep
}
var eyeXa = 160
var eyeYa = 190
var eyeXb = 155
var eyeYb = 195
stroke(255);
for (var i = 0; i < 5; i++) {
line(eyeXa,eyeYa,eyeXb,eyeYb)
eyeXa += eyeStep
eyeXb += eyeStep
}
var eyeXa = 155
var eyeYa = 190
var eyeXb = 160
var eyeYb = 195
stroke(255);
for (var i = 0; i < 5; i++) {
line(eyeXa,eyeYa,eyeXb,eyeYb)
eyeXa += eyeStep
eyeXb += eyeStep
}

//inner box

//horizontal leg
stroke(255);
strokeWeight(1);
miniXa = 120;
miniYa = 148;
miniXb = 200;
miniYb = 148;
for (var i = 0; i < 3; i++){
line(miniXa,miniYa,miniXb,miniYb);
miniXa -= 1;
miniYa += 2;
miniXb += 1;
miniYb += 2;
}
//left vertical leg
miniXa = 115;
miniYa = 150;
miniXb = 115;
miniYb = 220;
for (var i = 0; i < 3; i++){
line(miniXa,miniYa,miniXb,miniYb);
miniXa -= 2;
miniYa += 5;
miniXb -= 2;
miniYb -= 1;
}
//right vertical leg
miniXa = 205;
miniYa = 150;
miniXb = 205;
miniYb = 220;
for (var i = 0; i < 3; i++){
line(miniXa,miniYa,miniXb,miniYb);
miniXa += 2;
miniYa += 5;
miniXb += 2;
miniYb -= 1;
}

//rainbow design
//left side lines
for (var leftWinX = -20; leftWinX <= 15; leftWinX += winStep){
line(leftWinX,165,150,108);
}
//horizontal
horizWinX = 180;
horizWinY = 80
for (var i = 0; i < 11; i++){
line(150,108,horizWinX,horizWinY);
horizWinX += 3;
horizWinY += 5;
}
//actual rainbow
//red rainbow lines
stroke(255,0,0);
rainXa = 180;
rainYa = 80;
rainXb = 400;
rainYb = 75;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//orange
stroke(255,140,0);
rainXa = 183;
rainYa = 85;
rainXb = 400;
rainYb = 90;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//yellow
stroke(255,255,0);
rainXa = 186;
rainYa = 90;
rainXb = 400;
rainYb = 106;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//darkgreen
stroke(0,128,0);
rainXa = 189;
rainYa = 95;
rainXb = 400;
rainYb = 122;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//lightgreen
stroke(124,252,0);
rainXa = 192;
rainYa = 100;
rainXb = 400;
rainYb = 138;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//darkblue
stroke(0,0,255);
rainXa = 195;
rainYa = 105;
rainXb = 400;
rainYb = 154;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//lightblue
stroke(0,191,255);
rainXa = 198;
rainYa = 110;
rainXb = 400;
rainYb = 170;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//darkpurple
stroke(128,0,128);
rainXa = 201;
rainYa = 115;
rainXb = 400;
rainYb = 186;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//lightpurple
stroke(186,85,211);
rainXa = 204;
rainYa = 120;
rainXb = 400;
rainYb = 202;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//pink
stroke(255,192,203);
rainXa = 207;
rainYa = 125;
rainXb = 400;
rainYb = 218;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
}
``````

Conceptually, this project was pretty difficult to me.  I was inspired by Pink Floyd’s “Dark Side of the Moon”. It was difficult for me to figure out the points and the way in which the curve would change from loop to loop. I started off by sketching an idea, just like the 7th grade planning sheet. I manually calculated the first few lines in a for loop, and then I figured out a pattern. In the future, I would try to improve the middle section of the triangle to represent an eye better.

## amui1-LookingOutwards-03

For this Looking Outwards, I decided to blog about a custom wedding ring that the Nervous System created. The Nervous System created the custom wedding ring in 2014 for a client. They used their Cell Cycle app to create a model of the client’s ring. Digitally, they identified the horizontal and vertical cell structure, edge style, twist, and shape. After this, the Nervous System 3d printed an 18 karat yellow gold ring and placed a diamond surrounded by four rubies in the center.

Almost every married person has a standard silver colored diamond wedding ring. I chose to do this project for my Looking Outwards because I really admired how the Nervous System took something so common/mainstream, a standard diamond wedding ring, and transformed it into something completely new and technologically advanced. This project is so intricate, yet so graceful and sleek.

Full Custom Wedding ring project here

Link to the Cell Cycle here

Other Nervous System project here

## amui1-Project-03-Dynamic-Drawing

Click to change time of day

``````//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-03

//variables for cloud
var cloud1x = 50;
var cloud1y = 100;
var cloud2x = 90;
var cloud2y = 90;
var cloud3x = 130;
var cloud3y = 100;
var speed = .30;
var dir = 1;
//variables for rain
var rainY = 110
var rainSpeed = 5;
//variables for bird
var birdHx = 300;
var birdHy = 250;
//variables for easing
var easing = .005;
//variables to switch b/w time of daytime
var day = 0;

function setup() {
createCanvas(640,480);
}

function draw() {
if (day == 0) {
background(151,214,216);
//sun
fill(255,255,0);
ellipse(600,0,225,225);
//flower
//flowerstem
stroke(0,100,0);
strokeWeight(8);
var stemY = constrain(mouseY,350,480);
line(100,stemY,100,480);
//flowerbody
stroke(0);
strokeWeight(0);
fill(0);
//restrict flower height
var flowerY = constrain(mouseY,350,480);
var flowerSize = flowerY*20/175;
fill(255,255,0);
arc(100,flowerY,flowerSize*2-25,flowerSize*2+5,PI,0);
arc(100,flowerY,flowerSize*2-25,flowerSize*2+5,0,PI);
arc(100,flowerY,flowerSize*2+10,flowerSize*2-30,HALF_PI,3*HALF_PI);
arc(100,flowerY,flowerSize*2+10,flowerSize*2-30,3*HALF_PI,HALF_PI);
fill(0);
ellipse(100,flowerY,flowerSize,flowerSize);

//clouds
fill(255);
strokeWeight(0);
//firstcloud
ellipse(cloud1x,cloud1y,50,50);
ellipse(cloud2x,cloud2y,70,80);
ellipse(cloud3x,cloud3y,50,50);
//secondcloud
ellipse(cloud1x+200,cloud1y,50,50);
ellipse(cloud2x+200,cloud2y,70,80);
ellipse(cloud3x+200,cloud3y,50,50);
//thirdcloud
ellipse(cloud1x+400,cloud1y,50,50);
ellipse(cloud2x+400,cloud2y,70,80);
ellipse(cloud3x+400,cloud3y,50,50);
//movecloud
cloud1x += dir*speed;
cloud2x += dir*speed;
cloud3x += dir*speed;
//loopclouds
if (cloud3x > width-25 || cloud1x < 25){
dir = -dir;
}
if (cloud3x + 200 > width-25 || cloud1x+200 < 25){
dir = -dir;
}
if (cloud3x + 400 > width-25 || cloud1x+400 < 25){
dir = -dir;
}
} else{
background(25,25,112);
fill(255);
strokeWeight(0);
//firstcloud
ellipse(cloud1x,cloud1y,50,50);
ellipse(cloud2x,cloud2y,70,80);
ellipse(cloud3x,cloud3y,50,50);
//secondcloud
ellipse(cloud1x+200,cloud1y,50,50);
ellipse(cloud2x+200,cloud2y,70,80);
ellipse(cloud3x+200,cloud3y,50,50);
//thirdcloud
ellipse(cloud1x+400,cloud1y,50,50);
ellipse(cloud2x+400,cloud2y,70,80);
ellipse(cloud3x+400,cloud3y,50,50);
//movecloud
cloud1x += dir*speed;
cloud2x += dir*speed;
cloud3x += dir*speed;
//loopclouds
if (cloud3x > width-25 || cloud1x < 25){
dir = -dir;
}
if (cloud3x + 200 > width-25 || cloud1x+200 < 25){
dir = -dir;
}
if (cloud3x + 400 > width-25 || cloud1x+400 < 25){
dir = -dir;
}

//rain
fill(220,220,220);
ellipse(cloud1x,rainY+10,10,10);
ellipse(cloud2x,rainY+10,10,10);
ellipse(cloud3x,rainY+10,10,10);
ellipse(cloud1x+200,rainY+10,10,10);
ellipse(cloud2x+200,rainY+10,10,10);
ellipse(cloud3x+200,rainY+10,10,10);
ellipse(cloud1x+400,rainY+10,10,10);
ellipse(cloud2x+400,rainY+10,10,10);
ellipse(cloud3x+400,rainY+10,10,10);
rainY += rainSpeed;
if (rainY > height/2 - 40){
rainY = cloud1y + 10;
}
}

//drawbird
//bird flying right
if (mouseX > birdHx) {
var targetX = mouseX;
var distX = mouseX - birdHx;
birdHx += distX*easing;
//where bird wants to travel y
var targetY = mouseY;
var distY = mouseY - birdHy;
birdHy += distY*easing;

//birdhair
stroke(255,255,153);
strokeWeight(5);
line(birdHx-2,birdHy-25,birdHx+3,birdHy-10);
line(birdHx+6,birdHy-25,birdHx-2,birdHy-10);
//birdlegs
strokeWeight(0);
fill(255,140,0);
rect(birdHx-30,birdHy+50,3,10);
rect(birdHx-20,birdHy+50,3,10);
ellipse(birdHx-27,birdHy+60,5,5);
ellipse(birdHx-17,birdHy+60,5,5);
//birdbody
if (mouseY < 100){
fill(255,250,250);
strokeWeight(0);
ellipse(birdHx,birdHy,40,40);
ellipse(birdHx-20,birdHy+30,60,45);
ellipse(birdHx-45,birdHy+20,25,20);
//halo
noFill();
stroke(0,191,255);
strokeWeight(3);
ellipse(birdHx+3,birdHy-35,20,5);
} else {
fill(255,255,153);
strokeWeight(0);
ellipse(birdHx,birdHy,40,40);
ellipse(birdHx-20,birdHy+30,60,45);
ellipse(birdHx-45,birdHy+20,25,20);
}
//birdbeak
strokeWeight(0);
fill(255,140,0);
triangle(birdHx+20,birdHy-2,birdHx+30,birdHy+10,birdHx+16,birdHy+10);
//wing
arc(birdHx-20,birdHy+28, 13, 25, 0, PI+QUARTER_PI, CHORD);
//eye
fill(255);
ellipse(birdHx,birdHy,15,15);
fill(0);
ellipse(birdHx+3,birdHy,8,8);
}
if (mouseX < birdHx) {
//bird flying left
var targetX = mouseX;
var distX = mouseX - birdHx;
birdHx += distX*easing;
//where bird wants to travel y
var targetY = mouseY;
var distY = mouseY - birdHy;
birdHy += distY*easing;
//birdhair
stroke(255,255,153);
strokeWeight(5);
line(birdHx-7,birdHy-25,birdHx-2,birdHy-10);
line(birdHx+3,birdHy-25,birdHx-2,birdHy-10);
//birdlegs
strokeWeight(0);
fill(255,140,0);
rect(birdHx,birdHy+50,3,10);
rect(birdHx+10,birdHy+50,3,10);
ellipse(birdHx,birdHy+60,5,5);
ellipse(birdHx+10,birdHy+60,5,5);
if (mouseY < 100){
fill(255,250,250);
strokeWeight(0);
ellipse(birdHx,birdHy,40,40);
ellipse(birdHx+10,birdHy+30,60,45);
ellipse(birdHx+30,birdHy+20,25,20);
//halo
noFill();
stroke(0,191,255);
strokeWeight(3);
ellipse(birdHx+3,birdHy-35,20,5);
} else {
fill(255,255,153);
strokeWeight(0);
ellipse(birdHx,birdHy,40,40);
ellipse(birdHx+10,birdHy+30,60,45);
ellipse(birdHx+30,birdHy+20,25,20);
}
strokeWeight(0);
//birdbeak
fill(255,140,0);
triangle(birdHx-20,birdHy-2,birdHx-30,birdHy+10,birdHx-16,birdHy+10);
//wing
arc(birdHx+10,birdHy+28, 13, 25, 0, PI+QUARTER_PI, CHORD);
//eye
fill(255);
ellipse(birdHx,birdHy,15,15);
fill(0);
ellipse(birdHx-2,birdHy,8,8);
}
}
function mousePressed() {
if (day == 0) {
day = 1;
} else {
day = 0;
}
}
``````

For this project, I made a little story about a bird/duck that can fly. I had a lot of fun with this project, trying out new ways to incorporate mouseX and mouseY. I first sketched out the background and then started to hardcode in p5js. After that, I changed my objects to be coordinated with mouseX and mouse Y. The most difficult part was coordinating the size of the flower with mouseY. The things I controlled with my mouse was: size of the flower, position of the flower, color of the duck, and direction of the duck.