moon – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Final Project: Self-Care Roulette

I wanted to do an interactive code that gives the user a thing to do during COVID-19. It will generate random tasks that the user can complete each day in light of COVID-19 that allows them to look forward to achieving something each day, despite how sometimes we may just want to stay in bed. These tasks can be give a call to someone you miss, water your plants, or do some skincare. For me, I feel like it has been really easy to get lost in not having a plan for the day or having the motivation to do something for myself since COVID had started. I hope this project can be a daily reminder that self-care can be something small but it is essential to maintain. It is fairly easy to navigate, with a play button to start. Then the user will be prompt to pick one category of activities. There is a next button that will display random activities from the chosen category. The user can choose to refresh to get a new activity or move on and finish the roulette. To restart the game, you just have to refresh the page. Some activities are time based, such as making breakfast or go stargazing.

sketch

//Jessie Chen
//D
//Final Project
//Self Care Roulette

//global variables
var title;
var activities = [];
//homepage
var home = true;
//boolean for all categories are not selected
var rel = false;
var soc = false;
var phy = false;
var lng = false;
var qck = false;
//buttons
var play;
var homeButton;
var refresh;
var next;
//cateogies
var relax;
var quick; 
var long;
var social;
var physical;

//load illustration

function preload() {
    //
    title = loadImage("https://i.imgur.com/Q6l9wlM.png");
    play = loadImage("https://i.imgur.com/U4YlZmG.png");


    var activitiesPage = [];
    //long
    activitiesPage[0] = "https://i.imgur.com/sNZV5FH.png"; //sewing
    activitiesPage[1] = "https://i.imgur.com/82QiPiY.png"; //read
    activitiesPage[2] = "https://i.imgur.com/Xld0YcB.png"; //instrument
    activitiesPage[3] = "https://i.imgur.com/4AubEbi.png"; //bake
    //quick
    activitiesPage[4] = "https://i.imgur.com/W1H2LbU.png"; //music
    activitiesPage[5] = "https://i.imgur.com/VJqD19E.png"; //draw
    activitiesPage[6] = "https://i.imgur.com/3wyiMdR.png"; //breakfast
    activitiesPage[7] = "https://i.imgur.com/5wUW5VD.png"; //water plants
    //social
    activitiesPage[8] = "https://i.imgur.com/jtYM2kP.png"; //call
    activitiesPage[9] = "https://i.imgur.com/jrhmmlA.png"; //game
    activitiesPage[10] = "https://i.imgur.com/W4TCa01.png"; //facemask
    activitiesPage[11] = "https://i.imgur.com/fot757c.png"; //movies
    
    //physical
    activitiesPage[12] = "https://i.imgur.com/0zokbRX.png"; //laundry
    activitiesPage[13] = "https://i.imgur.com/pO77RCB.png"; //stretch
    activitiesPage[14] = "https://i.imgur.com/PpYiJD3.png"; //swim
    activitiesPage[15] = "https://i.imgur.com/ew1Hfa5.png"; //run
    //relaxing
    activitiesPage[16] = "https://i.imgur.com/Yg5lxNt.png" //to do list
    activitiesPage[17] = "https://i.imgur.com/TtuDd51.png"; //bath
    activitiesPage[18] = "https://i.imgur.com/8bqSaWf.png"; //cloud
    activitiesPage[19] = "https://i.imgur.com/2oOvf88.png"; //stars

    for (var i = 0; i < activitiesPage.length; i++) {
        activities[i] = loadImage(activitiesPage[i]);
    }
    //buttons
    homeButton = loadImage("https://i.imgur.com/b1m90d7.png");
    categoryPage = loadImage("https://i.imgur.com/ZhCdUXE.png");
    refresh = loadImage("https://i.imgur.com/zR5a1pG.png");
    next = loadImage("https://i.imgur.com/tWvuonn.png");
    end = loadImage("https://i.imgur.com/KEkaCCC.png");

    //categories
    relax = loadImage("https://i.imgur.com/nuImFqN.png");
    quick = loadImage("https://i.imgur.com/K7NvO7p.png");
    long = loadImage("https://i.imgur.com/yWSUDxx.png");
    social = loadImage("https://i.imgur.com/1GUldUu.png");
    physical = loadImage("https://i.imgur.com/Hpf91kH.png");
}

function setup() {
    createCanvas(600, 450);
}

//set to home page, when home is false, shows categories page
function draw() {
    homePage();
    if (home == false) {
            categories();
}
}

//home page, when home is true
function homePage() {
    if (home) {
    background(215, 167, 167);
    circles();
    image(title, 0, 0, width, height);
    image(play, 0, 0, width, height);
    
    }
}

//categories page
function categories() {
    
    background(215, 167, 167);
    circles();
    push();
    imageMode(CENTER);

    //when relaxing is selected it enlarges
    if (!rel) {
        image(relax, 150, 230, 200, 80);
    } else if (rel) {
         image(relax, 150, 230, 300, 130);
    }

    //when social is selected, it enlarges
    if (!soc) {
        image(social, 300, 140, 200, 80);
    } else if (soc) {
        image(social, 300, 140, 300, 130);
    }

    //when physcial is selected, it enlarges
    if (!phy) {
        image(physical, 450, 230, 200, 80);
    } else if (phy) {
        image(physical, 450, 230, 300, 130);
    }

    //when long is selected, it enlarges
    if (!lng) {
        image(long, 200, 330, 200, 80);
    } else if (lng) {
        image(long, 200, 330, 300, 130);
    }

    //when quick is selected, it enlarges
    if (!qck) {
        image(quick, 400, 330, 200, 80);
    } else if (qck) {
        image(quick, 400, 330, 300, 130);
    }
    pop();

    //buttons
    image(homeButton, 0, 0, width, height);
    image(categoryPage, 0, 0, width, height);
}

//display activities
function activity() {
    background(random(150, 200), random(150, 200), random(150, 200));
    circles();
    var r;

    //relaxing activities based on index
    if (rel) {
        if (hour() > 6 & hour() < 18) { //mornings, excluding the stars
            r = int(random([16, 17, 18]));
        } else if (hour(0 > 20 & hour() < 4)) { //night time, excluding the clouds
            r = int(random([16, 17, 19]));
        }
    //long activities
    } else if (lng) { 
        r = int(random(0, 4));
    //physical activities
    } else if (phy) { 
        r = int(random(12, 16));
    //quick activities
    } else if (qck) { 
        if (hour() > 4 & hour() < 12) { //morning including breakfast
            r = int(random(4, 8));
        } else {
            r = int(random([4, 5, 7])); //excluding breakfast past morning
        }
    //social activities
    } else if (soc) {
        r = int(random(8, 12));
    }

    //display image
    image(activities[r], 0, 0, width, height);
    //buttons
    image(next, 0, 0, width, height);
    image(refresh, 0, 0, width, height);
    noLoop();
}

//thanks for playing
function endPage() {
    background(215, 167, 167);
    circles();
    image(end, 0, 0, width, height);
}    

//circles in the background
function circles() {
    for (var x = 0; x <= width; x += 20) {
        for (var y = 0; y<= height; y += 20) {
            noStroke();
            fill(242, 220, 203, 120);
            ellipse(x, y, 10, 10);
        }
    }
}

function mousePressed() {
    //returns to the home page
    if(mouseX >= 30 & mouseX <= 80 && mouseY >= 30 && mouseY <= 80) {
        home = true;
        homePage();
    } 
    // play button brings to categories page
    if (mouseX >= 220 & mouseX <= 380 && mouseY >= 250 && mouseY <= 320) {
        home = false;
        categories();
    //next button displays activies
    } else if(mouseX >= 510 & mouseY >= 370 && mouseX <= 560 && mouseY <= 415) {
        activity();
    //refresh button displays another activity
    } else if(mouseX <= 80 & mouseX >= 25 && mouseY <= 420 && mouseY >= 360) {
        activity();
    //end button to thanks for playing
    } else if (mouseX >= 515 & mouseY >= 15 && mouseX <= 570 && mouseY <= 70) {
        endPage();
    }

    //checks to see if boolean is selected by the user, can click to select and unselect
    if (mouseX >= 10 & mouseX <= 230 && mouseY <= 250 && mouseY >= 210) {
        rel = !rel;
    } else if(mouseX >= 230 & mouseY >= 125 && mouseX <= 360 && mouseY <= 150) {
        soc = !soc;
    } else if(mouseX >= 375 & mouseY >= 210 && mouseX <= 530 && mouseY <= 245) {
        phy = !phy;
    } else if(mouseX >= 145 & mouseY >= 310 && mouseX <= 250 && mouseY <= 340) {
        lng = !lng;
    } else if(mouseX >= 340 & mouseY >= 320 && mouseX <= 455 && mouseY <= 345) {
        qck = !qck;
    }
}

LO: A Focus on Women Practitioners

As a fellow female, I love how this week’s LO is focused on women. While I was looking through the list, Camille Utterback caught my eye because she creates interactive artworks and installations. Utterback has a master’s degree from the Interactive Telecommunications Program at NYU’s Tisch School of the Arts. She is currently an Assistant Professor of the Art and Art History Department at Stanford University. This one project by Utterback, Flourish, particularly got my attention. It is a 70-foot long site-specific artwork commissioned by the Liberty Mutual Group. Flourish combines interactive installation through the projection onto multiple layers of glass. It consists of seven, double-layered five by eight-foot glass panels. It has three interactive panels in which it reacts to a viewer’s position in front of the glass. Flourish represents how fluidity can flow through a linear composition and its references to life, creativity, and growth. Working with different glass techniques, the glass reflects and interacts with one another to create a special experience that can only be experienced in-person. The colors are so bright and playful and the shapes have such fluidity.

Camille Utterback: http://camilleutterback.com/

Flourish (2013): http://camilleutterback.com/projects/flourish/

Project 11- Generative Landscape

sketch Download

//Jessie Chen
//D
//Project 11
//Generative Landscape

var kiki = [];
var stars = [];
var clouds = [];
var animation = 0;

function preload() {
    //loads kiki animation frames
    var kikiFrames = [];
    kikiFrames[0] = "https://i.imgur.com/LxKITCM.png";
    kikiFrames[1] = "https://i.imgur.com/535FqDb.png";

    for (var i = 0; i < kikiFrames.length; i++) {
        kiki[i] = loadImage(kikiFrames[i]);
    }
}


function setup() {
    createCanvas(400, 300);
    imageMode(CENTER);
    frameRate(5);
    noStroke();

    //create an initial collection of stars
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        var ry = random(height)
        stars[i] = makeStars(rx, ry);
    }

    //creates an initial collection of clouds
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        var ry = random(height);
        clouds[i] = makeClouds(rx, ry);
    }
}

function draw() {
    background(39, 36, 55);

    //draws the moon
    fill(233, 220, 152);
    ellipse(200, 150, 200, 200);


    updateStars();
    removeStars();
    addNewStars();

    updateClouds();
    removeClouds();
    addNewClouds();

    //plays kiki animation
    image(kiki[animation%kiki.length], 200, 150, 270, 200);
    animation ++;
}

//update positions
function updateStars() {
    for (var i = 0; i < stars.length; i++) {
        stars[i].move();
        stars[i].display();
    }
}

//remove stars that have gone off canvas
function removeStars() {
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++) {
        if (stars[i].x < width) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep;
}
//add new stars from the left
function addNewStars() {
    var newStarLikelihood = 0.05; 
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStars(-10, random(0, height)));
    }
}

//stars move to the right
function starsMove() {
    this.x += this.speed;
}

//draws stars
function starsDisplay() {
    fill(233, 220, 152, 100);
    ellipse(this.x, this.y, this.size + 10);
    fill(233, 220, 152)
    ellipse(this.x, this.y, this.size);
}

//stars object
function makeStars(startX, startY) {
    var star = {x: startX,
                y: startY,
                speed: 0.5,
                size: random(2, 5),
                move: starsMove,
                display: starsDisplay}
    return star;
}

//update positions
function updateClouds() {
    for (var i = 0; i < clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }
}

//remove clouds that have gone off canvas
function removeClouds() {
    var cloudToKeep = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x < width + 100) {
            cloudToKeep.push(clouds[i]);
        }
    }
    clouds = cloudToKeep;
}

//add new clouds from the left
function addNewClouds() {
    var newCloudLikelihood = 0.05; 
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeClouds(-100, random(0, height)));
    }
}

//clouds move to the right
function cloudsMove() {
    this.x += this.speed;
}

//draws clouds
function cloudsDisplay() {
    fill(102, 94, 110, 60);
    noStroke();
    arc(this.x, this.y, 25 * this.size, 20 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 10, this.y, 25 * this.size, 45 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 25, this.y, 25 * this.size, 35 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 40, this.y, 30 * this.size, 20 * this.size, PI + TWO_PI, TWO_PI);
}

//clouds object
function makeClouds(startX, startY) {
    var cloud = {x: startX,
                y: startY,
                speed: 2,
                size: random(0, 8),
                move: cloudsMove,
                display: cloudsDisplay}
    return cloud;
}

This was inspired by Kiki’s Delivery Service by Studio Ghibli. I used Procreate to draw out the animation frames of Kiki and imported them to my code to create a little animation. I was reminded of this scene where she flew on her broom at night, so I decided to base the project on that. As she flies through the sky, accompanied by her cat, Jiji, she moves through clouds and passes stars.

LO: Computer Music

Iamus: Hello World! (first piece composed by Iamus)

While I was doing some exploring in Computer Music, I stumbled upon Iamus. Iamus is a computer that can write contemporary classical music scores. It needs only 8 minutes to create a full composition in different musical formats. Iamus is taught the basics of human composition, such as the limitations of what can be played. Iamus is constantly evolving as more source material is added to the software, similar to how a musician only grows with more practice. Iamis is inspired by evolution, as it picks and alters the source material to create complex music pieces. So far, it can only compose contemporary classical music, but it has the potential to evolve and compose other genres of music. It is so weird to think about how a computer can compose music to the same level as the composers we admire. However, there is the question of whether artificial intelligence can match the authenticity of humans, especially the drive and passion of composers translated into music.

Iamus: http://melomics.com/iamus

Project 10: Sonic Story

sketch

//Jessie Chen
//D
//Project 10
//Sonic Story

//Description: A girl in her room, 
//whistling and playing guitar as the wind howls. 
//Rain follows after the wind, darkening the room and the sky. 


var windows = [];
var girl = [];
var animation = 0;
var wind;
var guitar;
var whistle;
var rain;

function preload() {
    //load window animation
    var windowFrames = [];
    windowFrames[0] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[1] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[2] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[3] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[4] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[5] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[6] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[7] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[8] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[9] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[10] = "https://i.imgur.com/znUBSxa.png";

    for (var i = 0; i < windowFrames.length; i++) {
        windows[i] = loadImage(windowFrames[i]);
    }

    //load girl animation
    var girlFrames = [];
    girlFrames[0] = "https://i.imgur.com/cJf8oUc.png";
    girlFrames[1] = "https://i.imgur.com/StszbDY.png";
    girlFrames[2] = "https://i.imgur.com/1AHGiCS.png";
    girlFrames[3] = "https://i.imgur.com/BB829DI.png";
    girlFrames[4] = "https://i.imgur.com/6T6wsTS.png";
    girlFrames[5] = "https://i.imgur.com/KQz7nSy.png";
    girlFrames[6] = "https://i.imgur.com/BF26KsD.png";
    girlFrames[7] = "https://i.imgur.com/YGI1D50.png";
    girlFrames[8] = "https://i.imgur.com/GzWvcdv.png";
    girlFrames[9] = "https://i.imgur.com/LADpf8C.png";

    for (var i = 0; i < girlFrames.length; i++) {
        girl[i] = loadImage(girlFrames[i]);
    }

    //load sounds
    wind = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/wind.wav");
    rain = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rain-2.wav");
    whistle = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/whistle.wav");
    guitar = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/guitar-1.wav");
}


function setup() {
    createCanvas(400, 400);
    imageMode(CENTER);
    frameRate(5);
    useSound();
}


function soundSetup() {
    wind.setVolume(0.25);
    rain.setVolume(1.5);
}


function draw() {
    //sets background to light peach
    background(212, 187, 168);
    //background becomes darker as rain starts
    if (animation >= 50) {
        background(148, 139, 132);
    }

    //dots in the background
    circles();

    //color of the sky
    sky();

    //wind and rain animation and sound
    windNrain();

    //girl whistling and guitar
    playingguitar();

    animation ++;

    //stop animation when sounds end
    if(frameCount === 145) {
        noLoop();
    }
 }

function windNrain() {
    image(windows[animation%windows.length], 275, 175, 320, 350);
    //plays wind at the beginning
    if (animation == 0) {
        wind.play();
    //after wind, comes the rain
    } else if (animation == 50) {
        rain.play();
    }
}

 function playingguitar() {
    frameRate(4);
    image(girl[animation%girl.length], 150, 250, 300, 290);
    //girl is whistling
    if (animation == 1) {
        whistle.play();
    //after whistling, she starts singing and playing guitar
    } else if (animation == 6) {
        guitar.play();
    }
 }

 function sky() {
    noStroke();
    fill(153, 165, 166);
    //sky darkens with rain
    if (animation >= 50) {
        fill(85, 90, 95);
    }
    //constrain inside the window
    rect(230, 55, 100, 170);
 }

 function circles() {
    for (var x = 0; x <= width; x += 20) {
        for (var y = 0; y<= height; y += 20) {
            noStroke();
            fill(242, 220, 203, 120);
            ellipse(x, y, 10, 10);
        }
    }
}

I wanted to make a girl strumming a guitar so I drew frames for the animation using Procreate. I also made a separate animation for the window, to add extra sounds to the project (the wind and the rain). All the sounds I used were found on freesound.org (including the guitar.) Also, as the rain starts, the sky and the room darken.

LO: On Looking Outwards

While I was browsing through the different Looking Outwards, this project by Manolo Gamboa Naon stood out to me. It is a generative digital art, but when I first looked at it, it screamed 3D to me. Despite it being digital, I kept on thinking of how they could bring to life in the real world, Such as using see-through fabric (like chiffon) to mimic the translucent outer circles and maybe even cardboard with the center circles to create a sense of depth and height. It is so interesting to me to envision this in reality and make it into something that is touchable. There are so many textures to explore. I agree with laurel in how the simpleness in the randomness makes the work complex. The explosion of color and circles is really mesmerizing and beautiful.

Manolo Gamboa Naon: https://www.behance.net/manoloide

laurel’s looking outwards post

Project 09: Custom Pixels

sketch

//Jessie Chen
//D
//Project 09
//Computational Portrait
//Custom Pixel

var img;
let flowers = ['✽', '✾', '✿', '❀', '❁']

function preload() {
    img = loadImage("https://i.imgur.com/p0nMT7R.jpg")
}

function setup() {
    createCanvas(480, 480);
    //image in the center
    imageMode(CENTER);
    img.loadPixels();
    //resize image to canvas
    img.resize(480, 480);
    frameRate(10000);
    //pink background
    background(200, 170, 170);
}

function draw() {
    //pick random x and y
    var x = floor(random(img.width));
    var y = floor(random(img.height));
    
    //pull pixel color from that x and y
    var pix = img.get(x, y);
    
    //fill using the pixel color
    fill(pix);
    
    //keeps the pixels where the face is 
    //smaller so it can have more detail
    if (x > 90 & x < 270 && y > 80 && y < 350) {
        textSize(random(5, 15));
    } else {
        textSize(random(10, 20));
    }

    //draws flower in place of the pixels
    text(random(flowers), x, y);
}

//when the mouse is clicked the blobs enlarge 
//until it no longer becomes a face
function mousePressed() {
        filter(ERODE);
}

I took a selfie with a filter that drew flowers on my face. From that, I wanted to create this project using flower symbols as my custom pixel. I chose to make the pixels where the face is smaller than the background so the face would have more detail. I also added an effect where every time you click on it, the symbols would enlarge into blobs to make it seem a little bit more creepy (yay for Halloween!).

LO: The Creative Practice of an Individual

Christina “Phazero” Curlee is an anti-disciplinary artist that focuses on game level and narrative design. She has a traditional arts background and almost two (one and 3/4ths) of degrees in fine arts. She is started primarily as a painter and installation artist and began working with video games around 2015. It is inspiring that she is self-taught in game design, 3-D art, and programming. She combines the elements from fine arts with game elements to develop her own style of game. Her art practice focuses a lot on participation and design in which games really aid in those elements. I think it is amazing how she represents the minority in the game industry, especially when it is a very masculine driven industry. She reaches out to those who are afraid of their own works are valid in the game world. It is inspiring for me to see that type of representation as I also want to pursue something in game design. She has the ability to communicate with her audience well and speaks to them almost as a friend. She reinforces the idea that the game industry is very young and there’s so much more in the game frontier that has not been reached. There is no limit and anything can be valid.

Christina “Phazero” Curlee: http://christinazero.com/

LO: Information Visualization

Apricot Graph: Analysis of Apricot Trends from 2004 – 2016 (Rhythm of Food)

While I was looking through the list of recommended works, this one project by Moritz Stefaner stood out. Stefaner is an independent designer that specializes in data visualization. The project that stood out to me was “The Rhythm of Food,” which analyzes food seasonality. Using data from Google News Lab, they developed a new type of radial “year clock” graph that shows the seasonal trends of food. With the months spread evenly around the “clock”, viewers can easily distinguish when certain food items are popular in certain times of the year. We are able to see the general trend of any sort of food item and can search specifically for that item or browse food items based on seasonal popularity. The website “Rhythm of Food” showcase the findings and allow visitors to explore the data themselves. Personally, it was very fun and indulging to look through the numerous graphs. The project takes on food, an item very prominent in our lives and visualizes the data in a very appealing way.

Moritz Stefaner (Truth & Beauty): http://truth-and-beauty.net/projects/the-rhythm-of-food

Project 07: Curves

When looking through the curves, I thought it would be perfect to use them and create a flower with multiple layers. I decided to use the hypotrochoid and the epitrochoid curves with pastel-ish colors. As you move across x and y, the flower should grow in size relative to where mouseX and mouseY are. The background color also changes relative to the x and y positions of the mouse.

sketch

//Jessie Chen
//jessiech@andrew.cmu.edu
//D
//Project 07
//Curves

var nPoints = 100;
var angle = 0;
var radius = 200;
var r = 200;
var g = 170;
var b = 170;

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

function draw() {

    var xcolorchange = map(mouseX, 0, width, 0, 50);
    var ycolorchange = map(mouseY, 0, height, 0, 50);

    //slight change in the background as mouse moves across x and y
    background(r - ycolorchange, g + xcolorchange, b + ycolorchange);

    //origin at the center of the canvas
    translate(width/2, height/2);
    
    //purple layer of petals
    push(radians(angle));
    rotate(radians(-angle))
    angle += mouseX;
    stroke(240, 192, 236);
    //fill(152, 115, 148);
    fill(207, 181, 210)
    hypotrochoid(mouseX/2);
    pop()

    //pink layer of petals
    push();
    rotate(radians(angle));
    angle += mouseY;
    stroke(232, 164, 184);
    fill(193, 116, 139);
    epitrochoid(mouseX/3);
    pop(); 

    //yellow layer of petals
    push();
    rotate(radians(angle));
    angle += mouseX;
    stroke(239, 216, 142);
    fill(193, 175, 116);
    hypotrochoid(mouseX/4);
    pop();

    //green layer of petals
    push();
    rotate(radians(angle));
    angle += mouseY;
    stroke(216, 240, 192);
    fill(164, 176, 148);
    epitrochoid(mouseX/8);
    pop();

    //orange circles
    push();
    rotate(radians(angle));
    angle += mouseX;
    radius = mouseX/3;
    fill(164, 209, 232);
    circles(radius);
    pop();

    //blue circles
    push();
    rotate(radians(angle));
    angle += mouseY;
    radius = mouseX/2;
    fill (233, 175, 109);
    circles(radius);
    pop();

    //yellow circles
    push();
    rotate(radians(angle));
    angle += mouseX;
    radius = mouseX/15;
    fill(239, 216, 142);
    circles(radius);
    pop();
}


function epitrochoid(size) {
    var x;
    var y;
    var a = size;
    var b = a/15;
    var h = constrain(mouseY/30, a/5, b*5);

    beginShape();
    for(var i = 0; i<nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = (a + b) * cos(t) + h * cos(((a + b) / b) * t);
        y = (a + b) * sin(t) + h * sin (((a + b) / b) * t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

function hypotrochoid(size) {
    var x;
    var y;
    var a = size;
    var b = a/15;
    var h = constrain(mouseY/30, a/5, b*10);
    var ph = mouseX/60;

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = (a - b) * cos(t) + h * cos(((a - b) / b) * t);
        y = (a - b) * sin(t) + h * sin (((a - b) / b) * t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

//array of circles
function circles(radius) {
    for (t = 0; t < 360; t = t + 30) {
        var x = radius * cos(radians(t));
        var y = radius * sin(radians(t));
        stroke(255);
        ellipse(x, y, mouseX/35, mouseX/35);
    }
}