Study Guide We have examined three main topics: drawing static pictures, drawing simple moving pictures, and manipulating images. The Final Exam will be concerned with each of these three topics. Each of these three topics involve a number of concepts: coordinates, drawing basic shapes and lines, colors, variables, and functions, and other programming statements such as for loops. Drawing with Processing In order to draw, you need a canvas. Processing creates a canvas automatically when you press the play button. This canvas is usually too small to do anything useful though. To specify the dimensions of the drawing canvas use the size statement:! size( numberofpixelsforx, numberofpixelsfory ); For example, the statement:! size( 300, 400 ); creates a canvas which is 300 pixels wide and 400 pixels high. Coordinates Coordinates are a system for naming locations. For example, the longitude and latitude (used in GPS) is a system of coordinates for determining your location on the Earth. In Processing, coordinates can be used to designate a particular pixel on the sketch canvas. We specify pixel locations using two numbers: one for the column and one for the row. On the Processing canvas, columns of pixels are numbered from 0 up to the width of the canvas. Higher numbered columns are to the right of lower numbered columns. Rows of pixels are numbered from 0 up to the height of the canvas. Higher numbered rows are further DOWN the canvas than the lower numbered rows. Drawing Lines Processing can draw straight lines between any two points:! line( firstx, firsty, secondx, secondy ); which will draw the line from (firstx, firsty) to (secondx, secondy).
For example:! line( 0, 0, 0, 100 ); will draw the vertical line from (0, 0) to (0, 100). The line is vertical because the end points have the same x coordinate. The statement:! line( 0, 100, 200, 100 ); will draw the horizontal line from (0, 100) to (200, 100). The line is horizontal because the end point have the same y coordinate. Drawing Rectangles A rectangle can be drawn by specifying the position of a corner and a width and height. The function is:! rect( cornerx, cornery, width, height ); To draw a rectangle at (0, 0) with a width of 50 and a height of 75:! rect( 0, 0, 50, 75 ); To draw a square specify the width and height to be the same value:! rect( 0, 0, 100, 100 ); would draw a square with a side length of 100 pixels. Drawing Circles and Ellipses To draw an ellipse, use the ellipse statement:! ellipse( x, y, width, height ); For example:! ellipse( 10, 10, 100, 200 ); will draw an ellipse at (10, 10) which is half as wide as tall. In one sense, drawing circles and ellipses is similar to drawing squares and rectangles. There is no specific statement for drawing circles. To draw a circle you draw an ellipse with both size dimensions equal. For example:
! ellipse( 20, 40, 10, 10 ); will draw a circle centered at (20, 40) with a radius of 10. Color A color in Processing is created as either a shade of grey or as a combination of red, green, and blue. Colors can also be created with different levels of transparency. Fill Color You can change the interior color of shapes using the fill statement:! fill( amountofwhite ); or! fill( amountofred, amountofgreen, amountofblue ); For example,! fill( 255 ); would cause drawn shapes to have a white interior and! fill( 0, 0, 255 ); would cause drawn shapes to have a blue interior. To change the transparency, specify an additional number in the range from 0 which is completely transparent to 255 which is completely opaque. For example,! fill( 0, 255, 0, 127 ); would fill shapes with a halfway transparent green color. There are quite a few variations of the fill statement:! fill( amountofwhite );! fill( amountofwhite, amountoftransparency );! fill( amountofred, amountofgreen, amountofblue );! fill( amountofred, amountofgreen, amountofblue, amountoftransparency ); where each of the amounts is a number from 0 to 255.
Stroke Color The outline color of shapes is modified with the stroke statement. Stroke works the same as the fill statement. Stroke Weight The thickness or weight of the outline can be specified with the strokeweight statement. The number given is the width in pixels of the outline. For example:! strokeweight( 5 ); specifies an outline which is 5 pixels wide. Variables A variable is a chunk of computer memory which holds a particular type of information. All variables have a name, a current value, and a data type. The name allows the program to access the current value stored in the variable. A variable can only hold one value at a time. The current value must always be of the designated data type (you cannot store colors in number variables or vice versa). Variables are created by specifying the data type and name. For example,! int x; creates a variable named x which can hold integer (whole number) values. Variables are assigned values using assignment statements such as:! x = 155; These can be combined:! int y = 200; A variable to hold a color can be created and assigned a value as follows:! color thecolor = color( 255, 127, 127 );
For loops This statement allows us to repeat steps in our program. The loop statement creates a counting variable which controls the number of repetitions which occur.! for ( int i = 0; i < 400; i = i + 100 )!! rect( i, 200, 40, 40 ); would create a variable i which will count from 0 to almost 400 by 100. The loop continues as long as i is strictly less than 400. The code draws a row of rectangles positioned at (0, 200), (100, 200), (200, 200), (300, 200). Simple Moving Pictures To make something move, we must define a setup function, a draw function, and variable which holds the position of the moving shape:! int x = 0;!! void setup()!! size( 400, 400 );! void draw()!! background( 200 );!! rect( x, 200, 40, 40 );!! x = x + 1; This program will create a small rectangle which will move across the sketch canvas.
Images Processing has a type of variable, called PImage, which can hold an entire image (such as a jpg, gif, or tiff). Such a variable can be created as follows:! PImage theimage; Loading an Image When a PImage variable is created, it does not actually hold an image until the image is loaded from a file:! theimage = loadimage( Homer.jpg ); The Homer.jpg file must be added to the Processing Sketch for this to work. The file can be added by choosing Sketch -> Add File from the Processing tool bar. NOTE: If the file cannot be found or could not be loaded this will generally result in a NULL Pointer error and the program will fail to run. Adding an Image to the Canvas Drawing an image on the sketch canvas is done using the image function:! image( theimage, 100, 0 ); The first value must be a variable of type PImage which contains the image you wish to show, the other two values are the x and y coordinates of where you want the upper left corner of the image to be located on the sketch Canvas. Tint The colors of an image can be changed using the tint function. This function is similar to the stroke and fill functions. You can specify how much red, green, and blue should be used to change the colors in the image. You can also specify transparency. There are four variations of the tint function:! tint( amountofwhite );! tint( amountofwhite, amountoftransparency );! tint( amountofred, amountofgreen, amountofblue );! tint( amountofred, amountofgreen, amountofblue, amountoftransparency ); Each of the amounts is a number from 0 to 255.
Changing or Filtering an Image There are many different ways of altering or filtering an image. The image can be flipped vertically, horizontally, or diagonally. The image could be rotated 90 degrees, 180 degrees, or 270 degrees. The image can also be filtered to remove (or add) red, green, or blue. The image could be made brighter or darker. All of these ideas follow a single template and can be implemented in Processing as a function:! PImage filterimage( PImage someimage )!! PImage thecopy =!!!! someimage.get( 0, 0, someimage.width, someimage.height);!! for (int col = 0; col < someimage.width; col++ )!!!! for (int row = 0; row < someimage.height; row++ )!!!!!! color thecolor = someimage.get( col, row );!!!!! // Put thecolor into thecopy after possibly changing it!!!!! return thecopy; This function takes a PImage called someimage as a parameter or function value. The function first copies someimage into another image called thecopy. It then loops over all of the individual pixels in someimage and gets each pixelʼs color. The function should then alter thecolor and possibly put the altered color into a different place in thecopy image. After all the alteration is complete the function returns (or gives back) thecopy image.
ArrayList An ArrayList object is a container for other objects. When you create an ArrayList variable you specify what it can contain. If you want an ArrayList of PImages, you would do the following:! ArrayList<PImage> thelist; You then need to create the actual list:! thelist = new ArrayList<PImage>(); This creates an empty ArrayList which does not contain any PImage objects. To add a PImage to the list, first load a PImage and then use the add method:!! PImage homer = loadimage( Homer.jpg );! thelist.add( homer ); Objects can be retrieved from the list using get and specifying which item is desired:! PImage charlie = thelist.get( 3 ); This would retrieve the fourth item in the list (because the first item is item number 0). For Loops and ArrayLists To loop over all of the items in an ArrayList there are two methods. The first is to use a standard for loop and the get method:! for ( int i = 0; i < thelist.size(); i++ )!! PImage foo = thelist.get( i );!! image( foo, 0, 0 ); The second is to use the alternative form of the for loop:! for ( PImage foo : thelist )!! image( foo, 0, 0);