Author: Shannon

Shannon Case – Final Project

sketch

//Shannon Case
//Section D
//scase@andrew.cmu.edu
//final project

var eye = [];
var eyeframes = [];

var jar = [];
var jarframes = [];

var fish = [];
var fishframes = [];

var fl = [];
var flframes = [];

var tummy = [];
var tummyframes = [];

var bubbles = [];
var bubblesframes = [];

var pows = [];
var powsframes = [];

var cigs = [];
var cigsframes = [];

var lips = [];
var lipsframes = [];

var swirl = [];
var swirlframes = [];

var word = [];
var wordframes = [];

//global variables for the arrays to store all of my images 

var index;
var index2;
var index3;
var index4;
var index5;
var index6;
var index7;
var index8;
var index9;
var index10;
var index11;

//create index to display images

var s1;
var s2;
var s3;
var s4;
var s5;
var s6;
var s7;
var s8;
var s9;
var s10;
var s11;

//variables for each sound

function preload(){
   s1 = loadSound("audio/sound1.ogg");
   s2 = loadSound("audio/sound2.ogg");
   s3 = loadSound("audio/sound3.ogg");
   s4 = loadSound("audio/poppopPOP.ogg");
   s5 = loadSound("audio/sound4.wav");
   s6 = loadSound("audio/sound6.wav");
   s7 = loadSound("audio/sound7.wav");
   s8 = loadSound("audio/sound8.wav");
   s9 = loadSound("audio/sound9.wav");
   s10 = loadSound("audio/sound10.wav");
   s11 = loadSound("audio/sound11.wav");

  myLoop = loadSound("audio/bgsound.ogg");

//load sounds
  
  eye[0]="images/eye1.png";
  eye[1]="images/eye2.png";
  eye[2]="images/eye3.png";
  eye[3]="images/eye4.png";
  eye[4]="images/eye5.png";
  eye[5]="images/eye6.png";
  eye[6]="images/eye7.png";
  eye[7]="images/eye8.png";
  
  jar[0]="images/jar1.png";
  jar[1]="images/jar2.png";
  jar[2]="images/jar1 2.png";
  jar[3]="images/jar2 2.png";
  jar[4]="images/jar1 3.png";
  jar[5]="images/jar2 3.png";
  jar[6]="images/jar1 4.png";
  jar[7]="images/jar1 4.png";
  
  fish[0]="images/fish1.png";
  fish[1]="images/fish2.png";
  fish[2]="images/fish3.png";
  fish[3]="images/fish4.png";
  fish[4]="images/fish5.png";
  fish[5]="images/fish3.png";
  fish[6]="images/fish7.png";
  fish[7]="images/fish8.png";
  
  fl[0]="images/f1.png";
  fl[1]="images/f2.png";
  fl[2]="images/f3.png";
  fl[3]="images/f4.png";
  fl[4]="images/f5.png";
  fl[5]="images/f6.png";
  fl[6]="images/f7.png";
  fl[7]="images/f8.png";
  
  tummy[0]="images/tummy1.png";
  tummy[1]="images/tummy2.png";
  tummy[2]="images/tummy3.png";
  tummy[3]="images/tummy4.png";
  tummy[4]="images/tummy5.png";
  tummy[5]="images/tummy6.png";
  tummy[6]="images/tummy7.png";
  tummy[7]="images/tummy8.png";
  
  bubbles[0]="images/bubbles1.png";
  bubbles[1]="images/bubbles2.png";
  bubbles[2]="images/bubbles3.png";
  bubbles[3]="images/bubbles4.png";
  bubbles[4]="images/bubbles5.png";
  bubbles[5]="images/bubbles6.png";
  bubbles[6]="images/bubbles7.png";
  bubbles[7]="images/bubbles8.png";
  
  pows[0]="images/pow1.png";
  pows[1]="images/pow2.png";
  pows[2]="images/pow3.png";
  pows[3]="images/pow4.png";
  pows[4]="images/pow5.png";
  pows[5]="images/pow6.png";
  pows[6]="images/pow7.png";
  pows[7]="images/pow8.png";
  
  cigs[0]="images/cig1.png";
  cigs[1]="images/cig2.png";
  cigs[2]="images/cig3.png";
  cigs[3]="images/cig4.png";
  cigs[4]="images/cig5.png";
  cigs[5]="images/cig6.png";
  cigs[6]="images/cig7.png";
  cigs[7]="images/cig8.png";
  
  lips[0]="images/lips1.png";
  lips[1]="images/lips2.png";
  lips[2]="images/lips3.png";
  lips[3]="images/lips4.png";
  lips[4]="images/lips5.png";
  lips[5]="images/lips6.png";
  lips[6]="images/lips7.png";
  lips[7]="images/lips8.png";
  
  swirl[0]="images/swirl1.png";
  swirl[1]="images/swirl2.png";
  swirl[2]="images/swirl3.png";
  swirl[3]="images/swirl4.png";
  swirl[4]="images/swirl5.png";
  swirl[5]="images/swirl6.png";
  swirl[6]="images/swirl7.png";
  swirl[7]="images/swirl8.png";
  
  word[0]="images/word1.png";
  word[1]="images/word2.png";
  word[2]="images/word3.png";
  word[3]="images/word4.png";
  word[4]="images/word5.png";
  word[5]="images/word6.png";
  word[6]="images/word7.png";
  word[7]="images/word8.png";
  
//load all the images
  
  for(var a = 0; a<8; a++){
    eyeframes[a] = loadImage(eye[a]);
    }
    
  for(var b = 0; b<8; b++){
    jarframes[b] = loadImage(jar[b]);
    }
    
  for(var c = 0; c<8; c++){
    fishframes[c] = loadImage(fish[c]);
    }
    
  for(var d = 0; d<8; d++){
    flframes[d] = loadImage(fl[d]);
    }
  
  for(var e = 0; e<8; e++){
    tummyframes[e] = loadImage(tummy[e]);
    }
    
  for(var f = 0; f<8; f++){
    bubblesframes[f] = loadImage(bubbles[f]);
    }
    
  for(var g = 0; g<8; g++){
    powsframes[g] = loadImage(pows[g]);
    }
    
  for(var h = 0; h<8; h++){
    cigsframes[h] = loadImage(cigs[h]);
    }
    
  for(var i = 0; i<8; i++){
    lipsframes[i] = loadImage(lips[i]);
    }
    
  for(var j = 0; j<8; j++){
    swirlframes[j] = loadImage(swirl[j]);
    }
    
  for(var k = 0; k<8; k++){
    wordframes[k] = loadImage(word[k]);
    }
    
  //put all the images into arrays
}

function setup() {
  createCanvas(windowWidth,windowHeight);
  myLoop.loop(); //play background sound
   background(0,0,80);
   imageMode(CENTER); 
   frameRate(10); //set frame rate for the animations
}

function draw() {
  background(0,0,80); //refresh background to play through animations
  

index++;

    if(index < eyeframes.length)
      image(eyeframes[index], width/2, height/2, eyeframes[index].width/2, eyeframes[index].height/2);
      
index2++;

    if(index2 < jarframes.length)
      image(jarframes[index2], width/2, height/2, jarframes[index2].width/2, jarframes[index2].height/2);
      
index3++;

    if(index3 < fishframes.length)
      image(fishframes[index3], width/2, height/2, fishframes[index3].width/5, fishframes[index3].height/5);
      
index4++;

    if(index4 < flframes.length)
      image(flframes[index4], width/2, height/2, flframes[index4].width/3, flframes[index4].height/3);
      
index5++;

    if(index5 < tummyframes.length)
      image(tummyframes[index5], width/2, height/2, tummyframes[index5].width/3, tummyframes[index5].height/3);
      
index6++;

    if(index6 < bubblesframes.length)
      image(bubblesframes[index6], width/2, height/2, bubblesframes[index6].width/3, bubblesframes[index6].height/3);
      
index7++;

    if(index7 < powsframes.length)
      image(powsframes[index7], width/2, height/2, powsframes[index7].width/3, powsframes[index7].height/3);
      
index8++;

    if(index8 < cigsframes.length)
      image(cigsframes[index8], width/2, height/2, cigsframes[index8].width/3, cigsframes[index8].height/3);
     
index9++;

    if(index9 < lipsframes.length)
      image(lipsframes[index9], width/2, height/2, lipsframes[index9].width/2, lipsframes[index9].height/2);
      
index10++;

    if(index10 < swirlframes.length)
      image(swirlframes[index10], width/2, height/2, swirlframes[index10].width/2, swirlframes[index10].height/2);
      
index11++;

    if(index11 < swirlframes.length)
      image(wordframes[index11], width/2, height/2, wordframes[index11].width/2, wordframes[index11].height/2);
 
 //plays each image if its index is set to 0     
} 


function keyPressed(){
  if(key==="A"){
    s2.pause();
    s3.pause();
    s4.pause();
    s1.play();
    index=0;
  }
  if(key==="B"){
    s1.pause();
    s3.pause();
    s4.pause();
    s2.play();
    index2 = 0;
  }

  if(key==="C"){
    s1.pause();
    s2.pause();
    s4.pause();
    s3.play();
    index3 = 0;
  }
  
  if(key==="D"){
    s1.pause();
    s2.pause();
    s3.pause();
    s4.play();
    index4 = 0;
  }
  
  if(key==="E"){
    s1.pause();
    s2.pause();
    s3.pause();
    s5.play();
    index5 = 0;
  }
  
  if(key==="F"){
    s1.pause();
    s2.pause();
    s3.pause();
    s6.play();
    index6 = 0;
  }
  
  if(key==="G"){
    s1.pause();
    s2.pause();
    s3.pause();
    s7.play();
    index7 = 0;
  }
  
if(key==="H"){
    s1.pause();
    s2.pause();
    s3.pause();
    s8.play();
    index8 = 0;
  }
  
if(key==="I"){
    s1.pause();
    s2.pause();
    s3.pause();
    s10.play();
    index9 = 0;
  }
  
if(key==="J"){
    s1.pause();
    s2.pause();
    s3.pause();
    s9.play();
    index10 = 0;
  }
  
if(key==="K"){
    s1.pause();
    s2.pause();
    s3.pause();
    s11.play();
    index11 = 0;
  }
  // if the key is pressed for a certain image, this sets the image index to 0, and plays the animation
 }

For my final project I chose to do a series of short animations and sounds. I wanted to hand draw each of these animations to contrast with the digital way that they are presented. I spend a lot of time drawing each frame for these animations, and then I edited the frames in photoshop so that they would fit into my code. If you press on any keyboard letter A-K, an animation and sound will play. I really struggled to get the animations to play at first, but once I figured out how to play each one separately as related to a key I spent the most amount of time drawing each animation and editing them in photoshop, and recording/editing sounds .

All of the images in my project were created by me. Most of the sounds were things that I recorded using my iPhone, and a few were dowloaded from Freesound.org. I used Audacity to edit all the sounds so that they matched with my animations.

I have to include a link to download my file, as I have over 100 files in my assets folders and they exceed the maximum file size for a wordpress post. It takes a few seconds for all these assets to load. Also my project needs a local server to run.

screen-shot-2016-12-09-at-9-57-53-pm

Here is an example of one of the animations, but it’s really hard to screenshot these short animations so I would definitely recommend downloading it and trying it yourself 🙂

Shannon Case Project Proposal

For my final project I would like to make an interactive animation. I would like to draw images and create different short animations when different keys are pressed. I would like to also incorporate sounds for when these images are played, and maybe have some interactions with the mouse if time allows.

I am thinking of creating different animations with different sounds similar to the keyboard example you gave, but I would like to combine this sound element with hand drawn elements. I think it would be really interesting to juxtapose the hand drawn with the computer generated.

I am also considering making this into some sort of game, but I haven’t really thought much about this yet and would like to just try and get the animations done and working first.

I have already started on a few series of drawings, like the one below:

eyereal

Shannon Case Project 11

sketch

//Shannon Case
//Section D
//scase@andrew.cmu.edu
//Project 11



function setup() {
    createCanvas(600, 600);
    background('#230133');
}


function draw() {
    background('#230133');

    var rot = map(mouseY, 0, width, 130, 137.507764);

    var turtle = makeTurtle(width/2, height/2); //center turtle
    var turtle2 = makeTurtle(width/2, height/2);
    var turtle3 = makeTurtle(width/2, height/2);

if (mouseX < 200){
        turtle.penDown();
        turtle.setColor('#7100a5'); //purple turtle
    for (var i = 0; i < 300; i++) { //draw many turtles

        turtle.forward(3);
        turtle.right(60);
        turtle.forward(3);
        turtle.right(60);
        turtle.forward(3);
        turtle.right(60);
        turtle.forward(3);
        turtle.right(60);
        turtle.forward(3);
        turtle.right(60);
        turtle.forward(3);
        turtle.right(60);
        //draw the hexagons
        turtle.penUp(); //stop drawing

        turtle.forward(i); //move out by incriment
        turtle.left(rot); //move around the golden angle

        turtle.penDown(); //draw again
        }
    }

else if ( mouseX > 200 & mouseX < 400){     
    turtle2.penDown();
    turtle2.setColor('#d09de8');
    for (var i = 0; i < 400; i++) { //draw many turtles

        turtle2.forward(3);
        turtle2.right(60);
        turtle2.forward(3);
        turtle2.right(60);
        turtle2.forward(3);
        turtle2.right(60);
        turtle2.forward(3);
        turtle2.right(60);
        turtle2.forward(3);
        turtle2.right(60);
        turtle2.forward(3);
        turtle2.right(60);
        //draw the hexagons
        turtle2.penUp(); //stop drawing

        turtle2.forward(i); //move out by incriment
        turtle2.left(rot); //move around the golden angle

        turtle2.penDown(); //draw again
        }
    }

else if ( mouseX > 400 & mouseX < 600){ 
    turtle3.penDown();
    turtle3.setColor('#e4dce8');
    for (var i = 0; i < 500; i++) { //draw many turtles

        turtle3.forward(3);
        turtle3.right(60);
        turtle3.forward(3);
        turtle3.right(60);
        turtle3.forward(3);
        turtle3.right(60);
        turtle3.forward(3);
        turtle3.right(60);
        turtle3.forward(3);
        turtle3.right(60);
        turtle3.forward(3);
        turtle3.right(60);
        //draw the hexagons
        turtle3.penUp(); //stop drawing

        turtle3.forward(i); //move out by incriment
        turtle3.left(rot); //move around the golden angle

        turtle3.penDown(); //draw again
        }
    }

}


function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

For this project I chose to work with the golden ratio turtle graphic that we did for the last assignment. I thought it would be cool to map this to the mouse Y positions to create different spirals. I then made three different turtles so that as you move across the mouse X positions you can play with varied sizes of turtle spirals. screen-shot-2016-11-12-at-8-47-25-pmscreen-shot-2016-11-12-at-8-47-59-pm

Shannon Case – Looking Outwards Week 10

vinod
Dr. Vinod Vidwans is the creator of these Indian computational music pieces.

I researched a project by Dr. Vinod Vidwans, a professor of New Media, Creativity and Innovation based in India. His research work is an effort to take explorations in computer music a step ahead. It tries to explore the possibility of computer generated Indian music (computational music) using Artificial Intelligence. He has developed a Computational Theory of Indian Classical Music, and has put together a way to synthesize a Bandish (a musical composition) in a given Raga and renders it in a traditional style. The system works on its own to generate these songs without human intervention. I think the creators artistic sensibilities are shown in that he is representing his cultural heritage through developing a historical style in a new media.

I couldn’t figure out how to embed an mp3 file, so here is a link to one of his works, and there are many more listed on his website.

Shannon Case Project 10

For this project I chose to generate a landscape of grass that is supposed to look like it is blowing in the wind. I was inspired when I was laying in the park and looking at the nature around me.

sketch

var grass = [];


function setup() {
    createCanvas(640, 240); 
  
    // create an initial collection of grass
    for (var i = 0; i < 100; i++){
        var rx = random(width);
        grass[i] = makeGrass(rx);
    }

    frameRate(10);
}


function draw() {
    background("#badddc");
    updateAndDisplayGrass();
    removeGrassThatHaveSlippedOutOfView();
    addNewGrassWithSomeRandomProbability(); 
}


function updateAndDisplayGrass(){
    // Update the building's positions, and display them.
    for (var i = 0; i < grass.length; i++){
        grass[i].move();
        grass[i].display();
    }
}


function removeGrassThatHaveSlippedOutOfView(){
    var GrassToKeep = [];
    for (var i = 0; i < grass.length; i++){
        if (grass[i].x + grass[i].breadth > 0) {
            GrassToKeep.push(grass[i]);
        }
    }
    grass = GrassToKeep; // remember the surviving grass
}


function addNewGrassWithSomeRandomProbability() {
    // With a very tiny probability, add a new grass to the end.
    var newGrassLikelihood = 0.17; 
    if (random(0,1) < newGrassLikelihood) {
        grass.push(makeGrass(width));
    }
}


// method to update position of the grass every frame
function grassMove() {
    this.x += this.speed;
}
    

//draw some grass
function grassDisplay() {
    var GrassHeight = 20;
    var bHeight = this.nGrass * GrassHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    fill('green');
    noStroke();
    triangle(0, -bHeight + random(20), this.breadth, bHeight, this.breadth/2, bHeight/2);
    fill("#48703d");
    triangle(0, -bHeight, this.breadth+random(10,20), bHeight, this.breadth/2, bHeight/2);
    pop();
}


function makeGrass(birthLocationX) {
    var Grass = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nGrass: round(random(2,8)),
                move: grassMove,
                display: grassDisplay}
    return Grass;
}

Shannon Case – Looking Outwards Week 10

This week I would like to discuss a project by Stacey Mulcahy. She has taught at both in academic programs such as the Interactive Multimedia Program at Algonquin College and the BIT program at Carleton, as well as taught workshops in the industry. She is interested in coding and physical computing.

tweetheart
This is a view of the lights attached to the heart

In a 2014 project called “TweetHeart“, she created a big light up heart that was connected to her Twitter account. She wanted to create something that made a more physical representation of the “love” she was feeling when she got likes and shares on her posts. I like this project because it was really inspiring for me to see her working with all the different elements of the project herself. She did everything from learning how to use a laser cutter to build the box to putting together the lights to coding the actual program. I found this really inspiring to see her doing all the work by herself.

Here is a video of the project in action

Shannon Case- Project 09

For my project I chose to do a portrait of my roommate sticking her tongue out. I used triangles to represent her because this is her favorite shape and we both agreed that the aesthetic of this is better because its more varied than ellipses and rectangles or lines. As the project evolves it fills in to reveal the picture.  sketch

var underlyingImage;

function preload() {
    var myImageURL = "http://i.imgur.com/TPZ3heW.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    var point2 = random(40);
    var point3 = random(60); //sets variables for the triangle points

    noStroke();
    fill(theColorAtLocationXY);
    triangle(px, py, px + point2, py + point2, px + point2/2, py +point3);
    //draws the image in varrying sizes of triangles


}

screen-shot-2016-10-28-at-7-47-18-pm

screen-shot-2016-10-28-at-7-47-25-pm

screen-shot-2016-10-28-at-7-47-09-pm

Shannon Case- Looking Outwards 09

 

I chose to look at Cedes’ week 6 post about Jean Tinguely‘s work.  She focused on his Drawing Machines, which are moving sculptures that he created with the intention of producing drawings. These drawings were abstract and a bit rough but maintained a rhythm created by the machine. I agree with Cedes about the point she makes that there is a “juxtaposition of using a machine (witch is often associated with precision) to create these un-precise images”, but for me this is not the most interesting aspect of his work. I enjoy both his works that create drawings and his works that are purely performative/moving sculptures.

I think that the Drawing Machine work is most interesting because it functions on many different levels. There are aspects of performance work and sculpture as well as drawing. The machines themselves are beautiful to look at, as well as the products that some of them create. The performance of the work is the most interesting to me, especially in the video clips where you can see the shadows of the work dancing on the walls.

(You have to actually go to Vimeo to watch the video due to the privacy settings)

jean-tinguely
A sculpture by Jean Tinguely casts a shadow on the wall behind it

 

Shannon Case – Looking Outwards 08

Kate Hollenbach is a product designer at a company called Oblong. She studied computer science in college and then was working on her MFA when she joined Oblong. She would describe what they do at Oblong as “gestural and spatial interactions in products and installations”.

The work that they do is based in data visualization using very complex hardware called g-speak that can identify hand poses and track hands in a 3D space. This means that it can track what motions your hand is doing as well as where in the space it is – for example grabbing and dragging. There is even ability for multiple people to interact within the same space. These projects are not only for artistic purposes, but also have useful applications for businesses.

The presentation is given really well, with examples coming up on the screen as she explains what the technology is doing. I think this is a really nice way to present because otherwise, even though she verbally explains how things work, the viewer might not understand what she means. The visuals allow for the viewer to better comprehend what she is talking about and also gain insight into the project.

 

 

Shannon Case Project 07 – Curves

sketch

//Shannon Case
//Section D
//scase@andrew.cmu.edu
//assignment 07-A

var nPoints = 100;
//var valE = 2.718; // This is the value of # 'e'

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


function draw() {
   
    
    // draw the frame
    fill((mouseY/height)*100,(mouseY/height)*200,(mouseY/height)*255);
    rect(0, 0, width-1, height-1); 
    
    // draw the curve
    push();
    translate(width / 2, height / 2);
        drawEllipseEvoluteCurve();

    pop();

}

function drawEllipseEvoluteCurve() {
    // Ellipse Evolute
    // http://mathworld.wolfram.com/EllipseEvolute.html
    
    var x;
    var y;

    var a = constrain((mouseX / width), 0.1, 0.5);
    var b = constrain((mouseY / height), 0.1, 0.5);
    
    fill((mouseX/width)*255,(mouseX/width)*100,(mouseX/width)*255);
    strokeWeight(5);
    stroke((mouseX/width)*200,(mouseX/width)*55,(mouseX/width)*255);
    beginShape();
    for(var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        x = ((Math.pow(a+(mouseX/45), 2) - Math.pow(b, 2)) / a * (Math.pow(cos(t), 3)));
        y = ((Math.pow(b+(mouseY/48), 2) - Math.pow(a, 2)) / b * (Math.pow(sin(t), 3)));
        vertex(x, y);

    }
            endShape(CLOSE);

}

For this project I really struggled with choosing a curve that worked. I chose a bunch that weren’t really able to move well with both the x and y values, but eventually decided on the Ellipse Evolute because it was more easily able to stretch and shrink with my mouseX and mouseY. I chose to have the background color evolve with the mouseY values and the color of the shape change with the mouseX values.