ICM – Animation in Processing – Camera Button Push > Flash

For this week’s assignment, we were paired up with a partner and were supposed to collaborate on a program in Processing that showed that we understood the concept of variables and animation properties that are possible. Mark and I chose to elaborate on the camera that I designed in Processing for the first week’s assignment. We chose to animate by using the mousePressed function and int variables… We split up the work thusly: Mark would try to get the button on the camera to push down when the mouse clicked on the screen and then release when the mouse was un-clicked. I would try to make the flash go off and increase in size incrementally. We each did our parts and combined the code together. Mark had to convert my rectangles from corner mode to center mode. We had to change the chronology of my strokeWeight and we also found that we had to add a line of code at the end of draw to make sure the loop would start from zero and not from the last diameter of my variable inner FlashSize + 20.

Here is the finished product. We might try to add some code to get the shutter opening/closing simultaneously if we have time.

<iframe width=”528″ height=”580″ scrolling=”no” frameborder=”0″ src=”http://www.openprocessing.org/visuals/iframe.php?visualID=38172&width=500&height=500&border=true”></iframe&gt;

(In case the embed code doesn’t work, here is its link at openprocessing.org: http://openprocessing.org/visuals/?visualID=38172)

And here is the code.

//Intro to Computational Media, Homework 2
//Zena Koo and Mark Breneman
//camera shape

int shutterButtonY=118;
int innerFlashSize = 0;
int flashX = 290;
int flashY = 110;

void setup() {
  size(500, 500);

void draw() {

  //Camera Body
  rect(250, 250, 400, 250);

  rect(290, 120, 120, 60);

  //flash frame
  rect(290, 115, 85, 20);

  //outer lens
  ellipse(290, 245, 130, 130);

  //inner lens
  ellipse(290, 245, 50, 50);

  //Camera Button
  fill(0, 0, 0);
  rect(110, shutterButtonY, 60, 15);
  //CameraButton Movement
  if (mousePressed==true) {
    strokeWeight(20); //thick strokeweight
    stroke(255, 255, 0, 63); //yellow outline of flash with 25percent transparency - alpha
    fill(255, 255, 255, 50); //white flash fill with low transparency

    ellipse(flashX, flashY, innerFlashSize, innerFlashSize);
    //^flash ellipse originating from middle of rectangle inner flash

    innerFlashSize = innerFlashSize + 20;
    //^flash increases in size at whatever rate specified, in this case 20
  else {
//shutterButtonY = constrain(shutterButtonY, 118, 125);}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: