exercise_04

intro to processing

processing-banner.jpg
 

Prior to the exercise below, ensure you have:

  1. completed the browser-based One Hour of Code and have

  2. read the first 35 pages of the Processing Handbook. UB libraries link (login required)

    • Download the whole book as a PDF and keep it with you for reference.

      • you can ⌘F on PDF’s (or websites) to find what you are looking for.

  3. Downloaded and installed Processing on your machine


This tutorial is in two parts:

  • Part I lays out the foundations, while

  • Part II aims to solidify these foundations while outlying ways to begin structuring your own Processing projects.


Overview

Generative (or Algorithmic) art is art or design produced by an artist or designer or anyone who chooses to create and explore imagery by writing computer programs by oneself or with the aid of a programmer.

“Processing was created to teach fundamentals of computer programming within a visual context, to serve as a software sketchbook, and to be used as a production tool.”
Processing: A Programming Handbook for Visual Designers, Second Edition, Casey Reas and Ben Fry

Objectives

  • Learn enough Processing coding to permit personal research of code that can be used to execute the final project.

  • Develop a basic understanding and facility for solving visual problems algorithmically.

  • Explore aesthetic ideas and visual structures through algorithmic processing of graphic data with computers.

  • Gain an understanding of basic computer programming through hands-on exploration and creation of images.

  • The focus of these exercises is not on training skilled programmers. Only minimal programming skills are expected.

    • Anyone with previous programming experience is encouraged to explore each exercise as far as they are able.

Resources

Skills Covered 

  • what is a program?

  • statement

  • comments

  • Processing Libraries (extensions to any given program)

  • local vs global variables (variable scope)

  • declarations (as it applies to typing a variable before it can be used)

  • functions

  • x, y coordinates

  • loops

Intermediate Imaging & Sound

  • Translation, rotation and scaling of rectangles and ellipses

  • Animation: Moving graphic objects on the screen for still and moving imagery

  • Using frameCount for controlling scene sequencing

  • Playing and stopping sound at specific frames

Coding for Interactivity


 

Instructions – Part I  

Drawing, Translating Objects, and Audio Integration

 Tutorial designed by Domenic Licata (Department of Art - University at Buffalo)

Tutorial designed by Domenic Licata (Department of Art - University at Buffalo)

 

~ all the orange text below represents code that you will copy and paste ~

1. Download the ex04-audio files.

2. You’ll need to install the Minim library into your Processing environment. Minim is one of the audio libraries that allows for integration of sound files within a sketch: Mono and Stereo playback of WAV, AIFF, AU, SND, and MP3 files.

Create a File>New sketch. Then choose: Tools>Add Tool>Libraries>Minim>Install. (You only have to do this once per machine.)

3. Save your sketch to your desktop, naming it "name_ex04-pt1". Use only lower case letters and no space

Note: Processing places the .pde file into a new folder with the same name as your sketch. These can not be renamed, or complications will occur.

4. Drag the four sound files from the downloaded archive to your new sketch folder by dragging them right into your processing sketch window as illustrated below:

This action is built into Processing; it will automatically create a folder inside your processing sketch folder called “data.” It is inside this data folder that you will store any and all content that you plan to call upon for your project. So images and audio can be dragged into the sketch folder, or simply placed into this data folder:

Screen Shot 2018-10-26 at 9.06.17 PM.png

5. Copy the orange code below and paste it into your new Processing sketch:

// import of the minim library and declaring special AudioPlayer variables
import ddf.minim.*;
Minim minim;
AudioPlayer player1;
AudioPlayer player2;
AudioPlayer player3;
AudioInput input;

// Statements in in setup are only executed once
void setup() {
   size(640, 480);

   // the variable "minim" is called each time a new sound is imported     into the sketch
   minim = new Minim(this);
   player1 = minim.loadFile("knock_walk_dooropen.aiff");
   minim = new Minim(this);
   player2 = minim.loadFile("GER_MUE_Y.aif");
   minim = new Minim(this);
   player3 = minim.loadFile("GER_MUE_M.aif");
   // the sounds do not play until activated
   player1.loop();
} //ends void setup

// Statements in draw are executed repeatedly (looped)
void draw() {
   background(0,0,0);

} //ends void draw

6. Examine and identify the parts of the sketch. Run the sketch and note what happens. Change the color of the background. (Use colorpicker.com to help determine the RGB value of a color of your choosing. Or, if you are on a Mac, do a Finder search for the utility called “Digital Color Meter.”

7. Place the below code just above the setup block. This declares a variable, x, which will be used for timing and the position and size of items in the void draw loop.

int x;

8. Place this next code after the background color within the void draw block:

x = x + 1;
if (x > 640) {
   x = 0;
}

fill(150, 150, 50);

ellipse(x, 50, x+10, 60);

9. Examine and identify the new code. (If nothing changed, it is because you are drawing your background after your shape and covering it up). Try changing the arguments within the ellipse function. You may change the color of the ellipse if you wish. Try adding additional shapes (lines, rectangles), etc.

⌘s (save your sketch)

10. Declare two new variables, y and z which will also be used for timing and the position and size of items in the draw loop. Place these below the x variable declaration from step 7.

int y;
int z;

11. Paste the below code beneath the background function in the draw loop, before the closing bracket “}”:

 

z = z + 1;
 
   if (z > 120) {
      z = 0;
   }

   fill(z*2, z*2, z*2);
   ellipse(600-x, 150, x+10, 60); 

   println("z = ", z); 



Run the sketch and notice your changes. ⌘T to auto format the code again for easier reading.

Note: Also notice what is being printed to the console. The println (or print line) function shows the results of an expression in the console area, line by line. It is useful to keep track of numbers as events play out on screen, or to assist in debugging.



12. Cut the background function from the draw loop and place it in void setup, before the closing brace “}”.

Again, run your sketch and notice what the shapes appear to be doing, now that you are only drawing the background once in setup instead of each loop. This should instill the notion of layering within the image based on line of execution.



13. Place this code within the z conditional statement, before the closing bracket “}”:

Screen Shot 2018-11-06 at 10.07.32 PM.png
 

/* When the condition for z is true, player2 plays its sound, starting 100ms into the file */

player2.rewind();

player2.play(100);

// A trail is left for every 100ms, then the background is redrawn

background(0,0,0);

Note EXACTLY what is happening here. How is the background now drawing and a “yo” sound being played at the same time. Examine where exactly you pasted that last code. It is within a conditional statement; if z is greater than 120, do whatever is between the open bracket and closing bracket.

Note: At this point you may want to do an "auto format" so that the code is more easily readable. This can be found under Edit, or ⌘T. Use this often just like saving and you will save a lot of headaches.


⌘s (save your sketch)


14. Paste this code somewhere within draw to generate one additional ellipse. Note the timing of all events.

y=z*3;

fill(50, 150, y);

ellipse(y, 250, 10, y);

note exactly how this shape is changing. Manipulate values until you understand it. The big point here is understanding how ANY numbers can be changed into an integer; in this case, we used “y” to do math prior to this line that updates itself continually as the code is ran.


15. Keep experimenting with different alterations, saving as you make progress. The goal here is to take what we have learned so far to have the shapes and audio abide to your directions.

When class is over, save your .pde sketch and keep this for later reference. Coding projects are ALWAYS revisited later when you forget how to do something and need to borrow code from your former self.

 

 

Instructions - Part II

Conditional Statements & Advanced Movement

 Tutorial designed by Bernard Aaron Dolecki

Tutorial designed by Bernard Aaron Dolecki

 

1. Download the part 2 zip file and ensure you have the Minimum library installed.

2. Open the patch and run it. You are presented with a background and some music, but there are no available interactions yet. You will also notice that the audio plays once and does not loop. Close this and look back at the sketch to analyze the content. You will notice that Minim has been initiated and all of the audio files have been declared in void setup

3. Lets add some code. First, let us get a couple shapes moving around. The first thing you should do is declare two new global variables (before void setup). 

int resize;
int grow = 0;

You will notice that when declaring variables that you can actually assign them an original value. in this case, grow and scene will start off equal to zero.

4. Go ahead and delete the original background being drawn and audio file being played. We will be relocating it.

5. Copy and paste this within void draw() :

if (scene == 0) { //menu

   background(menu);
 
   ouch.pause();
   whatsThis.pause();
   ET.pause();
   nightBefore.pause();

   translate(500, 300); //moves the x, y origin point

   rotate(PI/mouseX+mouseY);
   fill(mouseX/3, mouseY/4, (mouseX+mouseY)/12);
   rect (0, 0, grow+20, grow+20);

   rotate(PI/mouseX - mouseY*2);
   fill(mouseY*3, mouseX/4, (mouseX-mouseY)/10);
   rect (-grow, grow, grow+20, grow+20);

} //ends scene 0

You can see that we are starting off with a conditional statement. If scene is zero then do everything between the curly brackets. Well if we look at the global variables we already know that we set scene to zero, and since we have not reassigned a value to it, by default we are then drawing the shapes. Since we are going to have more pages that we can navigate to, it makes sense to have things like the specific background and what audio will be played within this conditional statement.

We will cover what 'grow' is in a moment.

The function called 'translate' actually moves our origin point from the top left to wherever we specify its new coordinates (in this case the middle of the sketch). We need this because the rotate function works based on the origin. You can comment out the 'translate' and see what happens.

note: note: Take a moment to look over everything that you just pasted. Ask any questions if you do not understand something.

6. Our shapes are a little small and not too exciting. Lets add some math by adding a value to grow.

Right now it is originally set to zero but is not changing from that unless we tell it to. This is where processing can get really fun, because anywhere you can use a number you can put an integer. Copy and paste this code into your sketch; put it just after draw and just before the 'if' conditional:

if (resize == 0) { //this tells grow to add to itself
    grow = grow + 1; 
    if (grow == 100) { 
      resize = 1;
    }
  } 
  if (resize == 1) { //this tells grow to subtract from itself
    grow = grow-1; 
    if (grow == 0) { 
      resize = 0;
    }
  }

Your void draw should now look something like this:

ex4-2-code-preview.png

Remember you can use ⌘T at any time to organize your code.

With that bit of math that we just added you should now have squares that are pulsing. The one conditional statement is adding to grow each cycle, and then a second conditional inside the first sets 'resize' to 1 if grow reaches 100. Now that resize is no longer equal to one, the first conditional is skipped by processing and the second one is now activated where it subtracts one from grow until the cycle reverts again. If you don't understand this, please ask!

7. So let us activate these background arrows by integrating a second scene.

While we are currently in scene zero, say we want to click on the ET arrow and go to 'scene 1.' Well once we get into scene 2, this same functionality of clicking on that same spot should be turned off(or processing will loop your click). To do this we must add a new section underneath of draw called "void mousePressed." This will allow us to specify what Processing does when the mouse is pressed, essentially allowing for all of our navigation from scene to scene.

For Simplicity sake, copy and paste all this code after void draw ends:

void mousePressed() { //navigation elements between scenes. 
  if (scene == 0) { 
    if (mouseX > 14 && mouseX < 95 && mouseY > 266 && mouseY < 348) {           
      ET.rewind();
      ET.loop();
      scene=1;
    } 
    if (mouseX > 906 && mouseX < 986 && mouseY > 266 && mouseY < 348) { 
      nightBefore.rewind();
      nightBefore.loop();
      scene = 2;
    }
  } //ends scene 0 

  if (scene == 1) { 
    if (mouseX < 150 && mouseY > 525) { 
      elevator.rewind();
      elevator.loop();
      scene = 0;
    } 
    if (mouseX > 850 && mouseY > 525) { 
      nightBefore.rewind();
      nightBefore.loop();
      scene = 2;
    }
  } //ends scene 1 

  if (scene == 2) { 
    if (mouseX < 150 && mouseY < 75) { 
      elevator.rewind();
      elevator.loop();
      scene = 0;
    } 
    if (mouseX > 850 && mouseY < 75) { 
      ET.rewind();
      ET.loop();
      scene=1;
    }
  } //ends scene 2
}//ends mousePressed

⌘T to auto formate your code

8. Run this and note what happens when you click anywhere but the arrows.

We are specifying for the scene to change only when clicked on a navigation element. Note how the elevator audio does not stop, but ignore it for now. You will see that in scene zero, the mouse location is specified for only the spots with the arrows. The only thing we are now lacking is the other scene content.

Again for the sake of simplicity, copy and paste these other two scenes into the draw section, logically under the scene zero conditional but still within draw:

if (scene==1) {//ET
    background(finger); 
    //whatsThis.pause(); 
    //elevator.pause(); 
    //nightBefore.pause();  

    if (mousePressed) { 
      if (mouseX > 390 && mouseX < 480 && mouseY > 340 && mouseY < 430) { 
        ouch.rewind(); 
        ouch.play();
      }
    }
  } //ends scene 1 

  if (scene == 2) {//Nightmare Before Christmas
    background(lights); 
    //ouch.pause(); 
    //elevator.pause(); 
    //ET.pause();  

    if (mousePressed) { 
      if (mouseX > 475 && mouseX < 660 && mouseY > 200 && mouseY < 425) { 
        whatsThis.rewind(); 
        whatsThis.play(1);
      }
    }
  } //ends scene 2

⌘T to auto formate your code

Before you run the code, look at what is going on.

You will see that the scene 1 and 2 conditional sections are quite like scene zero, however they also have an additional conditional embedded in them in the form of a (different style) mouse click. This allows for additional clicking to happen within these scenes without the change of scene.

Go ahead and play the sketch.

You will note that all of the audio plays when changing scenes, but does not stop, and once it has finished playing once it will not play again no matter if you trigger it again or not. Just like telling a file to ".play", we can also tell it a few other things like ".rewind", ".pause" or ".loop". The rewind function allows us to set the file back to the start, even after it has been played. So what we must now do is any time we are switching from one scene to another we must start off by stopping previous audio from other scenes from playing. Later on you will also want to put a ".rewind" before most ".play"s so that it is always smooth from the start.

9. You have to think logically; how will things work when going back and forth between scenes? In the last code you pasted, I have commented out these other audio syntax elements-  you can now just delete the //'s and preview the changes.

The one big downfall of this example is that there is no hover options over the mouse buttons. Even though this is not needed for the background arrows, and people can probably figure things out, it is less apparent on ET's finger and Jacks head. By not knowing something is clickable, we are loosing smooth interactivity. What could solve this? Perhaps a different background version that changes bases on a mouse x/y location? Perhaps a mouse rollover effect? 

You will probably notice by now that there is a clicking happening when you change audio elements. There is one that does not doe this, which is the "ouch" audio of ET's finger. This is not 100% clear, but that file is 16-bit audio whereas all the rest is only 8-bit. It could be that 8-bits are not liked by processing, or that there is a hiccup by having both 8-bit and 16-bit in the same file. To avoid this happening, you may just want to ensure all your audio is 16-bit.

Also note that using photoshop can be helpful when specifying x/y coordinates. You can place your background there open the “info” window or use rulers (⌘R) and drag guides out like this:

photoshop-rulers.jpg

That is all for this tutorial! 

Ensure you are understanding all of the elements that you can. If you finish early, explore changing some of the math and shapes being drawn on scene 0.

When you are satisfied, see if any of your fellow classmates need help. I actually encourage you all to partner up so that you can troubleshoot with two heads rather than one.

If you are still having troubles, look over the complete part 2 sketch and compare it with yours and see if you can solve the problem yourself.