Author: amui1@andrew.cmu.edu

amui1 – Project-07-Curves

amui1-p7

//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

amui1-p6

//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


    //alien head
    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

amui1-p5

//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);
    //middle beads design
    //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

amui1-p4

//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

amui1-p3

//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.