Day 03 Wrap-Up

Download Day 03 Source Code ]

Here’s a wrap-up of what we covered on Day 3 of class:

  • We started off by discussing your portfolio sites, and I answered some questions regarding WordPress and how to go about the installation process. We also discussed some options you have at your disposal when building out your portfolio site, including:
    • Posts: Posts are “date based” articles that appear in chronological order on your blog’s homepage. Newer posts replace older ones as they are added to the system.
    • Pages: Pages are “static” content that is always available to viewers of your site. For example, the “About Me” link above will take you to a WordPress page. Pages are always available to your visitors through some kind of constant navigation structure.
    • Processing: Since you installed the Processing plugin for WordPress you can include your sketches on your blog using the “processing” button in the page & post editor. Sketches are rendered in real-time via a JavaScript library called ProcessingJS – HTML can then displays your sketches via the HTML5 “canvas” tag.
    • Themes: You can update the graphical look and feel of your site by switching to a new “theme” which is essentially a new set of HTML & CSS files that WordPress uses to render your content. You can download thousands of free themes off of the WordPress website.
  • Next we jumped back into Processing. We started off discussing how to create non-regular shapes in Processing using the “beginShape()” and “endShape()” methods – these methods “bookend” calls to a third method called “vertex()” which defines the points of your shape. Here’s an example:
  • Note that you need to “bookend” your calls to the “vertex” function using “beginShape” and “endShape” to tell Processing when start and stop drawing the fill and stroke values.
  • You can detect a key press using the keyPressed method – it’s almost the same as how you detect mouse clicks:
    void keyPressed() 
    { 	
        // this will run once every time a key 	
        // on the keyboard is pressed 
    }
    
    Note that this will run for EVERY key press – to distinguish between keys we will have to use an “if” statement inside the method to determine which key was pressed and act accordingly.
  • To show this in action we then wrote a “scribbler” application that lets the user draw a continuous line. When the user hits any key the background of the canvas is erased.
  • Next we talked about variables in Processing. As in all other languages, variables serve as temporary storage mechanisms to keep track of information during the execution of your programs. Java is a strictly typed language, meaning that you must pre-declare the type of data you wish to store within a variable before the variable can be created. This allows the Java virtual machine to know how much memory needs to be allocated in order for your program to run efficiently. Once a variable has been declared to be a specific type it cannot hold a value of another type. This means that if you create a variable to hold an integer it can not holder a floating point value later on in your program – it can only be used to hold an integer. Here’s a quick rundown of the most commonly used data types in Processing:

    Description		 Data Type in Java		  
    Integer			 int
    Floating Point	         float
    Boolean			 boolean
    String			 String
    Single Character	 char
    
  • You can declare a variable to be used in your program using the following syntax:
    data_type identifier;
    
    For example:
    int myIntegerVariable; 
    float myFloatVariable;
    
    You can also declare multiple variables at the same time. For example:
    // declare 3 integers 
    int a, b, c;
    
  • In Java, the assignment operator is the single equals sign (the same as in Python. You can assign a value to a variable by using the following syntax:
    int myInteger = 100;
    
    You do not necessarily need to assign data to a variable when you declare it. For example, the following statement is valid:
    int myInteger; 
    myInteger = 100;
    
  • Depending on where you declared them, variables in Java are accessible only within certain regions of your code. Variables created within a block of execution (curly braces) are considered “local” to that block – they cannot be used outside the block and are actually de-allocated at the end of that block. For example:
    void draw() 
    {
       int test = 5; 
    }  
    void keyPressed() 
    {
       println(test); 
       // can’t do this! 	
       // test was declared in draw(), it’s 	
       // not available here! 
    }
    
  • If you want a variable to be accessible to your entire program you can declare it outside of any block, like this:
    int myInteger = 5;  
    void setup() 
    {
     	println(myInteger); // all good! 
    }
    void draw() 
    {
     	println(myInteger); // good here too! 
    }
    
  • We then wrote a program that simulates a ball moving across the screen. When the user hits the spacebar they reset to the left. Here’s the code:
    … and here’s a version that uses 3 variables to move 3 balls …
  • We can also use variables to vary the color of an object. Here’s a program that draws a rectangle and a circle to the screen, but every time you hit a key on the keyboard it will change slightly – the rectangle becomes more “red” and the circle becomes more “blue”:
  • Processing also comes with a number of built-in instance variables that are automatically exposed for you at runtime, including:
      
    mouseX, mouseY, pmouseX, pmouseY
    mousePressed (boolean)
    height (int)
    width (int)
    frameCount (long)
    frameRate (int)
    key (char)
    keyCode (int)
    keyPressed (boolean)
    mousePressed (boolean)
    
    We often use the “width” and “height” variables to make sketches that are display independent – i.e. it doesn’t matter the size of the window they are executing in – the program will simply use the maximum and minimum values for calcuations.
  • Next we discussed randomness and how to add variety to your programs. In essence, randomness gives your programs the ability to make choices without your explicit direction. Processing has two very useful ways to generate random values:
    • Traditional “pseudo-random” number generator
    • A “Perlin noise” generator for more “organic” feeling systems
    Today we will focused on the first technique, but we will re-visit Perlin noise when we get to object oriented programming.
  • The random() method in Processing generates a random floating point number between 0 and 1.0. You can pass this method additional arguments to request a different range, like so:
    // between 0 and 1 
    float num1 = random();   
    
    // between 0 and 255 
    float num2 = random(255);   
    
    // between 150 and 255 
    float num3 = random(150, 255);
    
    Here’s a program that continually paints randomly positioned ellipses to the screen:
  • We also wrote a random painting program that paints ellipses to the screen based on the mouse position. However, the ellipses aren’t directly on top of the mouse. Instead they end up “near” the mouse (within 10 pixels):
  • Next we discussed the save() function, which is designed to let you save a permanent copy of the pixels visible on your canvas as an image file. It takes one argument and works like this:
    save(“myfile.png”); // for PNG files save(“myfile.jpg”); // JPG encoding
    
    You can also construct your own filename using a counter, like this:
    int counter = 0; // outside any methods  
    
    // inside a method
    save(“myfile” + counter + “.png”);
    counter += 1; 
    
    Here’s a program that generates a random pattern of ellipses – the save command will save a copy of the current screen. Note that on the web this will just open up the image in a new tab.
  • Next we moved onto “selection statements” (IF, ELSE, ELSE IF). Essentially these structure allow your program to “ask a question” and respond accordingly. In Processing this usually involves questinos like the following:
    • Is the player’s X position > the width of the screen ?
    • Is the player’s life < 0 ?
    • Is a random number > 0.90, indicating that a rare event should happen in our simulation?
    You can use relational operators to construct relational expressions that test the relationship between various entities. The relational operators available in Java are as follows:
    <
    <=
    >
    >=
    ==
    !=
    
    An “if” statement can be constructed in Java using the following syntax:
    if (boolean-expression) 
    {
     	statement(s); 
    }
    
    Parenthesis are required around your Boolean expressions, Unlike in Python, indentation does not matter. An “if” statement does not require a semicolon. Having a block of curly braces is required for “if” statements that block contains more than 1 statement. It’s usually a good idea to always put curly braces in anyway.
  • A one-way “if” statement only allows you to respond to a condition if the Boolean expression in question evaluates to true. If you want to respond to when the condition evaluates to false you can use a two-way “if-else” statement using the following syntax. Note that in the example below one of the two sets of statements is guaranteed to execute – if the original boolean expression evaluates to false then the else clause automatically is invoked.
    if (boolean_expression) 
    {
     	statements(s); 
    } 
    else 
    {
     	statements(s); 
    }
    
    “if” statements can be placed inside of one another to form “nested” if statements using the following syntax:
    if (boolean_condition) 
    {
     	statement(s);
      	if (boolean_condition_2)
     	{
     		statement(s);
     	}
     	else
     	{
     		statements(s);
     	}
    }
    
    And you can always re-write your nested statements to use “else if” syntax, like this:
    if (boolean_expression) 
    {
     	statement(s); 
    }
    else if (boolean_expression) 
    {
     	statement(s); 
    }  
    else 
    {
     	statement(s); 
    }
    
    We then used some “if” statements to write a painting program that only lets the user paint when the mouse is down: