Lesson 1 (Downloading/setting it up) (video) -------------------------------------------- Downloading: 1. Processing.org 2. Click download 3. Pick according to your computer specs 4. go to folder in program -- extract 5. run (remember to drag down) --------------------------------------------- Introduction: 1. void setup() . - Used to define initial properties such as screen size, background color. - Variables declared within setup() are not accessible within other functions. - Only one void setup() allowed. --------------------------------------------- 2. void draw() - Called directly after void setup(). - continuously executes the lines of code contained inside its block until the program is stopped. - only one void draw() allowed. --------------------------------------------- 3. size (400, 400); - First things first, display box. - Defines the dimension of the display window in units of pixels. - Placed in void setup() , if not, default is size (100,100); - Width and Height. ---------------------------------------------- 4. Example (Ellipse) - ellipse ( x , y , width, height) - ellipse ( 200, 200, 50,50); // placed at center and have 50 width and 50 height(pixels) - ellipse ( mouseX, mouseY, 50,50); // placed where your mouse goes, same size ---------------------------------------------- 5. Background - default is gray. - Parameters ( Red, Green, Blue) from 0 to 255. - Parameters (255); sets color for all 3 parameters. - Placed in either(void setup() or void draw() ). show difference(and then show difference before after ellipse -but if placed in setup the position will not be cleared out, as opposed to draw() which refreshes screen everytime. -Les1Co1 ----------------------------------------------- 6. strokes/noStroke - Edges/Borders of your object. - stroke( Red, Green, Blue); - Placed behind "ALL" the objects you want to have that color of edge, that come after in the coding. - Will make the edges of all shapes until another stroke(); is declared. ----------------------------------------------- 7. Fill - Fill all the objects after it with the color you chose, until new fill. - fill ( Red, Green, Blue); - for example purple = fill (255,0,255); ----------------------------------------------- Review 1. Setup - size, background 2. Draw - the repeat loop/programming 3. Size -size of the display screen 4. Ellipse -shape, parameters (x, y, width, height) 5. Background - difference between being in setup and draw? 6. stroke/noStroke - edges of a shape 7. fill - colors in shapes, all after this code ------------------------------------------------ Project: 1. Create 1 Ellipse of any size in the center of a 500 by 500 size screen, fill it in with blue, and have the outline be red 2. Make your code to where the background does not refresh, for your Eclipse coordinates type "MouseX and MouseY" make the background yellow. Lesson 2: Tricks, Lines, Mouse --------------------------------- 1. Lines - Draw a line on the screen - Syntax: line(x1, y1, x2, y2) - Parameters (first point, seconc point) ---------------------------------- 2. strokeWeight() - adds thickness to the line - add right before the lines you want to increase thinkness - syntax: strokeWeight(8); // -the higher the number inside, the thicker the line -it will not go under default, for example .5 wont make it thinner than 1 ----------------------------------- 3. MouseX and MouseY - Using your mouse for the coordinates - Neat trick, giving you the control with your mouse - ----------------------------------- 3. pmouseX and pmouseY - creates that special effect lag - Syntax: (pmouseX, pmouseY, mouseX, mouseY); - Contains the horizontal/Vertical position of the mouse in the frame previous to the current frame. ----------------------------------- 4. if-Statement - A conditional Statement -Syntax: ------ if (test) { statements } ----- -It allows code to execute on whether the test is true or not ------------------------------------- 5. mousePressed - When mouse pressed checks for validity - Goes inside void draw() - true/false ------------------------------------- 6. mousePressed() - when mouse pressed it calls the function, then it reacts accordingly - outside of void draw() - values -Les2Co1 ------------------------------------ 6a. A. Clearing If(mousePressed==true) { Background(0); // clears window } ------------------------------------- 7. mouseClicked() - Function is called once after a mouse button has been pressed and then released. - Outside void draw() - values - Les2Co3 ------------------------------------- 8. MouseDragged() - Function call when mouse is moving and the mouse is being pressed - refer to code - Outside void draw() - values -Les2Co2 ------------------------------------- Review: 1. Line syntax 2. What does strokeWeight do, and difference to just stroke? 3. What does pmouseX and pmouseY do? 4. What are "if statements" for? 5. difference between mousePressed and mousePressed(); 6. What is a method -------------------------------------- Project: 1. Write a code that everytime you press the mouse it changes from black to white, and vice-versa 2. Write a code to where you can draw with lines, pressing the keyword "C" will clear your screen. Lesson 3: OPENGL ---------------------------------------------- 1. OPENGL - OPENGL is a library (Open Graphics Library) - Allows 3d Graphics into your code - Must be imported(As any library should be) ---------------------------------------------- 2. Creating the Cube - box (); size of the cube (width, height, depth); - translate (); location of object - Les3Co1 ----------------------------------------------- 3. rotateY and rotateX - Can be actual coordinates or your mouse // way it faces - For example it can be rotateX(PI/3.0); or rotateX(MouseY); - rotateX will synch will mouseY and rotateY will synch with mouseX, - This is because they are backwards - Rotating is quite quick, to slow down multiply times .03 ----------------------------------------------- 4. Operators - Addition, Subtraction, Multiplication and Division - Used to alter the code - +, -, *, / ----------------------------------------------- 5. Directional Lights - Adds a directional light - Syntax: directionalLight(red, green, blue, x, y, z) - x = 1 (left) = -1 (right), y= 1 (top), y = -1 (bottom), z = 1 (back), y =-1 (front) ----------------------------------------------- 6. Point Lights - Syntax: pointLight(v1, v2, v3, x, y, z) (red, gree, blue, x,y,z) - places the light at the coordinates you choose -as oppose to directional lights that it just -1,0 and 1. ------------------------------------------------------- 7. pushMatrix() and popMatrix() - 3d shapes placed in the same coordinates will be displaced, using pushMatrix and popMatrix() it will fix this error. - place pushMatrix(); before and popMatrix(); after your 3d shape and all its modifications. - pushMatrix(); stroke(weight(1); box(x,x,x,); popMatrix(); Review: 1. What is the OPENGL library for? 2. What is translate used for? 3. What is rotateX and rotateY used for? 4. What is the operator sign for multiplication? 5. directional lights -on and off lights 6. point lights - lights at certain coordinates ------------------------------------------------ Project: 1. Create 2 cubes, one red and one blue, one cube has to be twice the size of the other, can have any positioned location and must stay in place. 2. Create 4 cubes, reb, blue, green, and purple. must move according to your mouse, but every cube must move in an opposite direction from each other. Lesson 4: Minim ------------------------------------------ 1. Importing Minim - import ddf.minim.*; (Very will go at the top) such as any imported library, like OPENGL - It is one of the libraries in Minim Folder - Allows sound to be used in your program -------------------------------------------- 2. Creating a folder - Inside your "processing folder" - Once in the processing folder, go to the folder of your code(Les4Co1) - Create new folder, call it "data" (data) (traditional, and easy to remember) - Copy and paste the song into that folder (song file) - Processing folder --> Les4Co1 folder --> data folder --> song file -------------------------------------------- 3. Creating variables - Minim - Minim minim (Minim + "variable") -- (Placed at the top) - The first part is mandatory, while the variable can be anything, but traditionally "minim" and "song" are used instead. --------------------------------------------- 3b. Creating Variables - AudioPlayer - AudioPlayer song (AudioPlayer + "variable") - AudioPlayer is used to allow sound to be played. - ----------------------------------------------- 4. song.play(); and song.loop(); - Used to play your song in your program - song.play(); plays the song, once - song.loop(); plays the song various times ----------------------------------------------- 4. Example - Variables placed at the top - minim = new Minim(this); - song = minim.loadFile("Daniel-I Am Boxxy You See Song.mp3"); - song.play(); - Les4Co1 ------------------------------------------------- 5. void stop() - Used to safely stop the program - code is: - song.close(); - minim.stop(); - super.stop(); -------------------------------------------------- 6. ddf.minim.analysis.*; - Using BeatDetect - Variable: BeatDetect beat; - Variable (beat) can be anything but traditionally "beat" - Used to detect beat of a song to precise calculations. - Syntax: beat = new BeatDetect(); - Les4Co2 -------------------------------------------------- 7. beat.setSensitivity(); - Inside the parameters, which is only one, sets the sensitivity - Measured in milliseconds - Default: 10 milliseconds. -------------------------------------------------- Review: 1. What does the Minim Library do? 2. Where do we place the objects? 3. What will song.play(); do? 4. Why do we place a "void stop() method at the end of our code" 5. What is Minim, AudioPlayer, BeatDetection for? 6. What is beat.setSensitivity do? 7. What folder do you need to make to place your music in it? ----------------------------------------------- Project: 1. Import a sound of your choice into your program and then run it. 2. Write a code using BeatDetect