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

Final Project: Electoral Map Swing States

alyssa — Sun, 13 Dec 2020 03:47:51 +0000

//Alyssa Song
//Section C

var trump; //trump and trump 2 are the animations of trump talking
var trump2;
var biden; //biden and biden 2 are the animations of biden talking
var biden2;
var repLead; //decorative marks when trump wins a state
var demLead; //decorative marks when biden wins a state
var trumpWin; //trump illustration when he gets more than 270 votes
var bidenWin; //biden illustration when he gets more tahn 270 votes
var mapUs; //US map of states
var counter = 0; 
var mouseCount = 0;

var demVote = 264; //controls democratic electoral votes
var repVote = 232; //controls republican electoral votes

var mouseCountNV = 0; //mousepress count for nevada
var mouseCountPA = 0; //mousepress count for pennsylvania
var mouseCountGA = 0; //mousepress count for georgia

var rx = []; //controls x, y, speed, and color of red confetti
var ry = [];
var rdx = [];
var rc = [];

var dx = []; //controls x, y, speed, and color of blue confetti
var dy = [];
var ddx = [];
var dc = [];

var vNV, vPA, vGA; 

function preload() {
  trump = loadImage('https://i.imgur.com/vs8qJCA.png');
  trump2 = loadImage('https://i.imgur.com/vSXFveX.png');
  biden = loadImage('https://i.imgur.com/KyIf8lC.png');
  biden2 = loadImage('https://i.imgur.com/s50pOcq.png');
  mapUs = loadImage('https://i.imgur.com/JZU3xQQ.png');
  repLead = loadImage('https://i.imgur.com/aTzVMNw.png');
  demLead = loadImage('https://i.imgur.com/XqAbIHD.png');
  trumpWin = loadImage('https://i.imgur.com/XY9IJ0M.png');
  bidenWin = loadImage('https://i.imgur.com/4NKsHuM.png');

}

function setup() {
  createCanvas(600, 400);
  background(220);
  frameRate(10);
  textSize(32);

  //sets up different speeds, x, y, and color for confetti
  for (var i = 0; i < 120; i++) {
    rx[i] = random(width);
    ry[i] = random(height);
    rdx[i] = random(-10, 10);
    rc[i] = color(random(150, 255),
    random(0, 100), random(0, 50));
    dx[i] = random(width);
    dy[i] = random(height);
    ddx[i] = random(-10, 10);
    dc[i] = color(random(0, 100),
    random(0, 100), random(150, 255));
  }

  //create object of states
  vNV = vState(0);
  vPA = vState(1);
  vGA = vState(2);

}

function draw() {
  imageMode(CENTER);
  strokeWeight(0);

  //writes the swing states and number of electoral votes
  push();
  fill(50);
  textSize(12);
  text("Nevada: 6 electoral votes", 200, 280);
  text("Pennsylvania: 20 electoral votes", 200, 300);
  text("Georgia: 16 electoral votes", 200, 320);
  pop();

  image(mapUs, 275, 150, 600, 400);
  fill(0);

  //nevada dot
  circle(140, 100, 10);

  //pennsylvania dot
  circle(420, 100, 10);

  //georgia dot
  circle(390, 180, 10);


  if (repVote > demVote) {
    image(repLead, 500, 275, 300, 250);
  }

  //animation of biden and trump talking
  if (counter % 2 == 0) {
    image(biden, 100, 275, 300, 250);
    image(trump2, 500, 275, 300, 250);
  }

  if (counter % 2 == 1) {
    image(biden2, 100, 275, 300, 250);
    image(trump, 500, 275, 300, 250);
  }

  //rep electoral votes display
  fill(179, 82, 64);
  text(repVote, width - 90, 100);

  //dem electoral votes display
  fill(75, 108, 199);
  text(demVote, 10, 100);

  counter++;

  electionWin(); //function that displays election winner when they reach 270 votes
  }


function mouseClicked() {
  mouseCount++;
  vNV.update(); //updates votes for Nevada
  vPA.update(); //updates votes for Pennsylvania
  vGA.update(); //updates votes for Georgia
}


function vState(stateNo) { //defines object
  let w = {
    state: stateNo,

    update: function() {
      if (this.state == 0)
        updateNV();
      else if (this.state == 1)
        updatePA();
      else if (this.state == 2)
        updateGA();
      else
        print(state);
    }

  }
  return w;
}


function confetti(x, y, dx, c) { //draws confetti
  fill(c);
  ellipse(x, y, 20, 20);
}


function updateNV() {
  if (mouseX > 110 & mouseX < 160 && mouseY > 80 && mouseY < 130) {
    var originalRep = 232;
    var originalDem = 264;
    mouseCountNV++;

    if (mouseCountNV % 3 == 0) {
      fill(220);
      rect(110, 70, 50, 80);
      image(mapUs, 275, 150, 600, 400);
      demVote = demVote - 6;
      updateVotes(); //updates electoral vote display
    }

    // 1 is turning state red
    if (mouseCountNV % 3 == 1) {
      fill(199, 102, 84);
      rect(110, 70, 50, 80);
      image(mapUs, 275, 150, 600, 400);

      repVote = repVote + 6;

      updateVotes();
    }

    //2 is turning state blue
    if (mouseCountNV % 3 == 2) {
      fill(95, 128, 219);
      rect(110, 70, 50, 80);
      image(mapUs, 275, 150, 600, 400);


      demVote = demVote + 6;
      repVote = repVote - 6;

      updateVotes();

    }
    showLead(mouseCountNV); //shows marks for whoever won the state
  }

}

function updatePA() {
  if (mouseX > 390 & mouseX < 450 && mouseY > 80 && mouseY < 130) {
    mouseCountPA++;

    if (mouseCountPA % 3 == 0) {
      fill(220);
      rect(400, 80, 50, 40);
      image(mapUs, 275, 150, 600, 400);
      demVote = demVote - 20;

      updateVotes();
    }

    // 1 is turn state red
    if (mouseCountPA % 3 == 1) {
      fill(199, 102, 84);
      rect(400, 80, 50, 40);
      image(mapUs, 275, 150, 600, 400);

      repVote = repVote + 20;

      updateVotes();
    }

    //2 is turn state blue
    if (mouseCountPA % 3 == 2) {
      fill(95, 128, 219);
      rect(400, 80, 50, 40);
      image(mapUs, 275, 150, 600, 400);

      demVote = demVote + 20;
      repVote = repVote - 20;

      updateVotes();
    }
    showLead(mouseCountPA);
  }


}

function updateGA() {
  if (mouseX > 370 & mouseX < 420 && mouseY > 150 && mouseY < 210) {
    mouseCountGA++;

    if (mouseCountGA % 3 == 0) {
      fill(220);
      rect(360, 150, 60, 60);
      image(mapUs, 275, 150, 600, 400);
      demVote = demVote - 16;

      updateVotes();
    }

    // 1 is red
    if (mouseCountGA % 3 == 1) {
      fill(199, 102, 84);
      rect(360, 150, 60, 60);
      image(mapUs, 275, 150, 600, 400);

      repVote = repVote + 16;

      updateVotes();
    }

    //2 is blue
    if (mouseCountGA % 3 == 2) {
      fill(95, 128, 219);
      rect(360, 150, 60, 60);
      image(mapUs, 275, 150, 600, 400);

      demVote = demVote + 16;
      repVote = repVote - 16;

      updateVotes();
    }
  }
  showLead(mouseCountGA);
}

function updateVotes() {
  push();
  fill(220);
  rect(width - 100, 70, 70, 40);
  pop();

  //republican electoral vote
  fill(179, 82, 64);
  text(repVote, width - 90, 100);

  push();
  fill(220);
  rect(0, 70, 70, 40);
  pop();

  //democrat electoral vote
  fill(75, 108, 199);
  text(demVote, 10, 100);
}

function showLead(state) { //displays mark for whoever won the state
  if (state % 3 == 1) {
    image(repLead, 500, 275, 300, 250);
  }
  if (state % 3 == 2) {
    image(demLead, 100, 275, 300, 250);
  }
}

function electionWin() { //displays whoever wins the election
  if (demVote >= 270) { //biden displayed
      background(0, 0, 0, 100);

      background(75, 108, 199);
      for (i = 0; i < 104; i++) {
        confetti(dx[i], dy[i], ddx[i], dc[i]);
        dx[i] += ddx[i];
        if (dx[i] > width || dx[i] < 0) {
          ddx[i] = -ddx[i];
        }
      }

      image(bidenWin, 300, 200, 500, 400);

    }
    if (repVote >= 270) { //trump displayed
      background(0, 0, 0, 100);
      background(179, 82, 64);
      for (i = 0; i < 104; i++) {
        confetti(rx[i], ry[i], rdx[i], rc[i]);
        rx[i] += rdx[i];
        if (rx[i] > width || rx[i] < 0) {
          rdx[i] = -rdx[i];
        }
      }
      image(trumpWin, 300, 200, 500, 400);
    }
}

Alyssa Song

My program is an electoral map of the last few swing states in the 2020 election. You can test the electoral map and use it to see who can win the election based on who wins which swing states, and try different permutations and combinations of states.

For example:

Click Nevada once to turn the state red, and add 6 electoral votes to the republican count.

Next, click Pennsylvania once to turn the state red, which adds 20 electoral votes to the republican count.

Finally, click Georgia once to turn the state red. You should see an image with Trump 2020. Winning Georgia would put Trump over 270 electoral votes, so he would win the election.

To replay the program, refresh the page. Double click on any state to turn the state blue and make Biden win the election.

To use the program, you can click on the dot on the key swing states that are originally grey on the map. Clicking the dot once will turn the state red and add the respective amount of electoral votes to the Republican electoral count on the right, and clicking the dot twice will turn the state blue and do the same thing for the Democratic electoral count on the left.

LO11: Women Practitioners

alyssa — Mon, 16 Nov 2020 01:42:24 +0000

Mimi Son – Lit Tree

Mimi Son’s installation called “Lit Tree” was a work that I found very interesting. A small potted tree is augmented with video projection, which allows different lights, patterns, and visualizations appear through the branches and leaves of the tree. It can also interact with the visitors, and the work symbolizes the relationship between humankind and nature. I found the work interesting because Son tried to recreate how humans intervene and disrupt nature.

LIT TREE -2011 – FutureEverything 2011, Manchester UK

Mimi Son founded a Korean creative studio in called “Kimchi and Chips”in 2009. The goal of her studio is to connect the arts, sciences and philosophy through their research-based approach. She works in South Korea, but has created projects that are installed all over the world. She also became the first Korean artist to win the Award of Distinction at Ars Electronica, which is an award that signifies importance of work within the field of media art.

Project 11: Landscape

alyssa — Sun, 15 Nov 2020 19:48:37 +0000

sketch Download

var waveDetail = 0.003; // detail in shallow wave
var waveSpeed = 0.0002; // speed of waves
var waveDetail2 = 0.002; //detail of mid wave
var waveDetail3 = 0.001; //detail of deep wave
var seaGround = []
var sunset;

function preload() {
    sunset = loadImage("https://i.imgur.com/14AlgbU.png");
    seaweed = loadImage("https://i.imgur.com/JHftB8t.png");
    fish = loadImage("https://i.imgur.com/BFimCOm.png")
}
function setup() {
    createCanvas(600, 400);
    for (var i = 0; i < 5; i ++){
        var rx = random(width);
        var ry = random(10, 50)
        seaGround[i] = makeSeaweed(rx, ry);
    }
    frameRate(15);
}

function draw() {
    background(153, 153, 204);

    image(sunset, 0, 0, 600, 400);
    makeWaves();
    updateSeaweed();
    removeSeaweed();
    image(fish, 300, 200, 300, 200);  
    addSeaweed();

}

function makeWaves() {
    fill(95, 191, 254);
    noStroke();
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * waveDetail) + (millis() * waveSpeed);
        var y = map(noise(t), 0, 1, height / 8 * 2, height / 8 * 4);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();

    //second wave
    beginShape();
    fill(41, 160, 255);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t2 = (x * waveDetail2) + (millis() * waveSpeed);
        var y = map(noise(t2), 0, 1, 100, 300);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();

    //third wave
    beginShape();
    fill(19, 138, 233);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t3 = (x * waveDetail3) + (millis() * waveSpeed);
        var y = map(noise(t3), 0, 1, 300, height);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
}

function updateSeaweed(){
    for (var i = 0; i < seaGround.length; i ++){
        seaGround[i].move();
        seaGround[i].display();
    }
}

function removeSeaweed(){
    var keepSeaweed=[];
    for (var i = 0; i < seaGround.length; i++) {
        if (seaGround[i].x < 600) {
            keepSeaweed.push(seaGround[i]);
        }
    }
}

function addSeaweed(){
    //little probability
    var newSeaweedLikelihood = 0.02; 
    if (random(0,1) < newSeaweedLikelihood) {
        seaGround.push(makeSeaweed(15, 15));
    }
}

function moveSeaweed(){
    this.x += this.speed;
}

function displaySeaweed(){
    fill(0);
    stroke(0);
    push();
    translate(this.x, height-300);
    image(seaweed, 0, 0, 400, 320);
    pop();

}

function makeSeaweed(birthLocationX, birthLocationY){
    var seaweeds = {x: birthLocationX,
                y:birthLocationY,
                speed:random(3, 7),
                move: moveSeaweed,
                display: displaySeaweed};
    return seaweeds;
}

I wanted to illustrate a fish swimming in the ocean, as the ocean waves and seaweed passed by. I was inspired by the sunset, and I started to think about how i can make the sunset a moving landscape. I drew the sunset, seaweed, and fish objects on Procreate.

sunset that i drew that was the source of inspiration

rough sketch

final sketch

Looking Outwards 10

alyssa — Tue, 10 Nov 2020 02:38:18 +0000

Coin Switch – Fedde ten Berge

Video of installation experience in the perspective of a visitor.

Coin Switch is an installation that plays different sounds and alters lighting based on movement within the room. It is interactive art that reacts differently based on the visitor’s unique sequence of movements. This installation was inspired by old coin switches, which was used to count coins. Berge incorporates this old principle by making the visitor flip a coin switch in order to start the sound and light.

I admire how the visitor’s movements reflect different sounds that can evoke different emotions. For example, if the visitor moves quickly, the sounds and lights are more brisk and high pitched, suggesting a sense of urgency. If a visitor moves slowly, the lights flicker more slowly and the sound pitch is lower. I admire how the sounds and lighting is not random, but deliberately affected by the speed and types of movement of the visitor.

Coin Switch uses context-sensitive electronic sound synthesis and sound design to play the sound and change the lights synchronously. The installation has a variety of algorithms that can create a range of different sound and light operations.

photo of Coin Switch installation that projects the light

10: Sonic Story

alyssa — Tue, 10 Nov 2020 01:46:04 +0000

The sonic story is a person sleeping throughout the day. He never wakes up, despite the sounds of the day and night. During the daytime, birds chirp and others are awake, and during the nighttime, the person is snoring and crickets are chirping.

sketch Download="">

var sun;
var moon;
var crow;
var awake;
var nightSounds;
var snores;
var frameCounter = 0;
var sunset = 0;
var x = -200;
function preload () {
    moon = loadImage("https://i.imgur.com/jmfcmVw.png");
    sun = loadImage("https://i.imgur.com/on477my.png");
    morning = loadImage("https://i.imgur.com/xGVPDr2.png");
    night = loadImage("https://i.imgur.com/3XAUSES.png");

    crow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/435507__benjaminnelan__rooster-crow-2.wav")
    awake = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/401338__ckvoiceover__yawning.wav");
    chirp = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birdsound-1.wav");
    nightSounds = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/200167__ebonny__cicadas.wav");
    snores = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/409015__marisca16__old-man-snoring.wav");

}

function setup() {
    createCanvas(600, 400);
    frameRate(15);
    useSound();
}

function soundSetup() {
        crow.setVolume(0.3);
        awake.setVolume(0.4);
        chirp.setVolume(0.5);
        nightSounds.setVolume(0.9);
        snores.setVolume(0.5);
}


function draw() {
    imageMode(CENTER);

    if (sunset % 2 == 0) { //sunrise
        background(190, 230, 244);
        push();
        translate(115 + x, -50);
        image(sun, 200, 200, 600, 400);
        pop();
        image(morning, 300, 200, 600, 400);
    } else {

        background(46, 38, 86); //nighttime
        push();
        translate(115 + x, -50);
        image(moon, 200, 200, 600, 400);
        pop();
        image(night, 300, 200, 600, 400);
    }

    if (x == 300) {
        x = -200;
        sunset ++;
    }

    x += 5;


//morning
    if (x == -100 & sunset % 2 == 0) {
        crow.play();
    }
    if (x == -100 & sunset % 2 == 0) {
        chirp.play();
    }
    if (x == -100 & sunset % 2 == 0) {
        awake.play();
    }
//night
    if (x == -100 & sunset % 2 == 1) {
        nightSounds.play();
    }
    if (x == -100 & sunset % 2 == 1) {
        snores.play();
    }
}

I used 6 sounds. I used crowing, birds chirping, and someone yawning for the daytime sounds, and used snoring and crickets for the nighttime sounds. The biggest challenge was finding a way to align the sounds with the daytime and nighttime, and ended up using the x width and a counter to track if it is daytime or nighttime.

Project 09 Computational Landscape

alyssa — Sat, 31 Oct 2020 18:32:00 +0000

sketch Download="">

let img;
let smallPoint, largePoint;

function preload() {
  img = loadImage('https://pbs.twimg.com/profile_images/640666088271839233/OTKlt5pC_400x400.jpg');
}

function setup() {
  createCanvas(300, 300);
  smallPoint = 4;
  largePoint = 40;
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
  //frameRate(20);
}

function draw() {
  let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
  let x = floor(random(img.width));
  let y = floor(random(img.height));
 
  let xx = x;
  let yy = y;
  let count = 0;
  while (xx 0 && yy>0) {
        let pix = img.get(xx, yy);
        fill(pix);
        ellipse(xx, yy, pointillize, pointillize);

        count = count +1;
        xx = xx+1;
        yy=yy+1;
    }
}

If you move the mouse around, you can alter how the landscape is being drawn.

LO-09

alyssa — Sat, 31 Oct 2020 18:29:32 +0000

This post is a response to Xander’s Looking Outwards post on randomness, about the website thispersondoesnotexist.com. This website generates hyper-realistic photographs of people that do not exist. It is powered by AI and GAN (generative adverbial network).

this person does not exist

To some degree, I agree with Xander’s post and find it really cool and inspiring that AI and technology is able to create such realistic looking faces. I am really interested to learn how this program works and how it is able to create such realistic faces with so much detail.

this person does not exist

However, this website is also scary because the power of this technology can have many positive and negative implications. If this type of software can alter the face so realistically, any portrait photo can easily be edited to a “non-existing person’ without anyone noticing the difference. This could be really dangerous if mugshot photos or criminal photos were altered, or any important photo identification was altered.

Looking Outwards 08

alyssa — Sat, 24 Oct 2020 17:43:25 +0000

Catherine D’Ignazio

Catherine D’Ignazio at Eyeo 2019, Feminist Data, Feminist Futures

Catherine D’Ignazio is the director of the Data + Feminism Lab and an Assistant Professor of Urban Science and Planning at MIT’s Department of Urban Studies and Planning. She also goes by “Kanarinka.”

Before MIT, D’Ignazio was an Assistant Professor of Data Visualization and Civic Media at Emerson College in the Journalism Department, and was teaching in the Digital + Media graduate program at Rhode Island School of Design. She has also done freelance software development for over 10 years. She holds an MS from the MIT Media Lab, an MFA from Maine College of Art, and a BA in International Relations from Tufts University.

Catherine is very passionate about social justice. One project I really admire is her creation of “DataBasic.io,” which simplifies data analysis for policymakers, journalists, and people who are unfamiliar with advanced data analysis tools. I admire how the program automatically finds patterns in data that people can incorporate into their storytelling. I think there is great potential for creating change and creates equity for people that are less familiar with code, computer science, and data analytics.

Data basic.io is a simplified data analysis tool for people unfamiliar with little coding experience.

Another project I admire is Catherine’s book called “Data Feminism,” which discusses the importance and power of data in today’s society. Most of the discourse about data is dominated by white men, and are often used for militaries, war, and Catherine gives a feminist perspective on the topic, like incorporating emotion into data, and using data to further social justice causes for female equity.

Some strategies Catherine uses to present her work is the use of statistics and data to support her point. For example, she uses statistics of the percentage of white men who work in data analysis, to demonstrate how there is a need for more women in the data analytics field so there is less bias. I can learn from Catherine by using statistics to tell a story and support why there is a need for my work and why it is important.

Looking Outwards: Data Visualization

alyssa — Sat, 17 Oct 2020 13:54:18 +0000

Bible Cross References by Chris Harrison, 2007

Bible Cross References Data visualization, Chris Harrison and Christoph Röhmild, 2007. It resembles a rainbow, similar to Noah’s Ark mentioned in the Bible.

This data visualization was a collaboration between Chris Harrison and Christoph Römhild. The data visualization depicts all of the cross-references in the Bible. There were over 63,000 cross references in total, and the challenge was to visualize this large amount of information in an elegant way. The bar graph at the bottom of the visualization represents all the chapters in the Bible. The length of each bar depicts the length of each chapter. Each cross reference is depicted by an arc, and the color of each arc corresponds to the stance of the cross reference between the chapters.

I admire the visual aspect of the data visualization. The data visualization was made so it resembles a rainbow, which also has symbolic meaning in the famous story from the Bible, “Noah’s Ark.” The connection between the Bible and data visualization was very interesting and relevant to the information Harrison was displaying.

I’m now sure about the algorithms that generated the work, but I think Harrison used an algorithm that was able to find cross references in the Bible, and compute its distance across chapters. Then, he would change the colors of the arcs based on the distance.

Project 7: Curves

alyssa — Sat, 17 Oct 2020 13:50:21 +0000

I played around with some of the different roulettes I found on Wolfram Math World. I wanted my project to have a psychedelic effect and change colors depending on the location of the mouse. If you move your mouse around the screen, the colors and sizes of the shapes change on the screen. The background color also changes based on the which quadrant the mouse is in.

My favorite part of the project was experimenting with the shapes’ equations. A simple change in a subtraction sign, variable, or coefficient can drastically change the shape. I also attached a few screenshots below of what the program looks like at different mouse locations.

sketch Download

var a;    //radius of fixed circle
var b;   //radius of moving circle
var h = 10;  //height of the moving circle 
var theta;   
 
function setup() {
    createCanvas(480, 480);
    background(220);
}

function draw() {
	drawBackground(); 

	for (var x = 0; x <= 480; x += 120) {
        for (var y = 0; y <= 480; y += 120) {
            push();
            translate(x+60, y+60);
            drawEpitrochoid();
            pop();
        }

    	for (var y = 0; y <= 480; y += 120) {
    		push();
    		translate(x + 60, y + 60);
    		drawRanunculoid();
    		pop();
    	}

    	for (var y = 0; y <= 480; y += 120) {
    		push();
    		translate(x + 60, y + 60);
    		drawInnerRanunculoid();
    		pop();
    	}
    }
                
}
//background changes color based on what quadrant the mouse is in.
function drawBackground() {
	if (mouseX < width / 2 & mouseY < height / 2) {
    	background(51, 0, 54);
    } else if (mouseX < width / 2 & mouseY > height / 2) {
    	background(173, 178, 211);
    } else if (mouseX > width / 2 & mouseY < height / 2) {
    	background (47, 57, 77);
    } else {
    	background (86, 102, 107);
    }
}

//draws large epitroid in the background
function drawEpitrochoid() {
	strokeWeight(0);
	fill(mouseX + 100, mouseY + 100 , 223);
	beginShape();    

	a = map(mouseX/2, 0, 480, 1, 50);
	b = map(mouseY/2, 0, 480, 1, 50);
	h = map(mouseX/2, 0, 480, 1, 50);

	    for (var i = 0; i < 480; i++) {

	        var x = (a+b) * cos(theta) - h * cos(((a+b) / b) * theta);
	        var y = (a+b) * sin(theta) - h * sin(((a+b) / b) * theta);
	        var theta = map(i, 0, 360, 0, TWO_PI);
	    
	        vertex(x, y);
	    }  

	endShape();
}

//draws flower-like shape
function drawRanunculoid() {
	strokeWeight(0);
	fill(mouseY / 5, mouseX / 5, 77);
	beginShape();    

	a = map(mouseY/10, 0, 480, 1, 50);
	b = map(mouseY/10, 0, 480, 1, 50);
	h = map(mouseX/10, 0, 480, 1, 50);

	    for (var i = 0; i < 480; i++) {

	        var x = a * (6 * cos(theta) - cos(6 * theta));
	        var y = a * (6 * sin(theta) - sin(6 * theta));
	        var theta = map(i, 0, 360, 0, TWO_PI);
	    
	        vertex(x, y);
	    }  

	endShape();
}

//draws inner flower-like shape
function drawInnerRanunculoid() {
	strokeWeight(0);
	fill(mouseY + 80, mouseY - 50, 100);
	beginShape();    

	a = map(mouseX/10, 0, 480, 1, 30);
	b = map(mouseY/10, 0, 480, 1, 30);
	h = map(mouseX/10, 0, 480, 1, 30);

	    for (var i = 0; i < 480; i++) {

	        var x = a * (6 * cos(theta) - cos(6 * theta));
	        var y = a * (6 * sin(theta) - sin(6 * theta));
	        var theta = map(i, 0, 360, 0, TWO_PI);
	    
	        vertex(x, y);
	    }  

	endShape();
}

These are some screenshots of the program at different mouse locations including top left, top right, bottom left, bottom right, and center.