Visual applications with Processing and Java
What is Processing
Processing is a programming language based on Java, tailored for visual applications
The objective is to quickly sketch some idea an produce something that other people can understand
- i.e. rapid prototyping of something that an user can see and interact with
- An image is worth a thousand words
Drawing pretty stuff
What is Processing
Processing is a programming language based on Java, tailored for visual applications
The objective is to quickly sketch some idea an produce something that other people can understand
- i.e. rapid prototyping of something that an user can see and interact with
- An image is worth a thousand words
Visualizing data
What is Processing
Processing is a programming language based on Java, tailored for visual applications
The objective is to quickly sketch some idea an produce something that other people can understand
- i.e. rapid prototyping of something that an user can see and interact with
- An image is worth a thousand words
Plotting mathematical functions
What is Processing
Processing is a programming language based on Java, tailored for visual applications
The objective is to quickly sketch some idea an produce something that other people can understand
- i.e. rapid prototyping of something that an user can see and interact with
- An image is worth a thousand words
Simulating Newton's gravitation laws
What is Processing
Processing is a programming language based on Java, tailored for visual applications
The objective is to quickly sketch some idea an produce something that other people can understand
- i.e. rapid prototyping of something that an user can see and interact with
- An image is worth a thousand words
Simulating Artificial Intelligence ( Little robots following a path while avoiding each other )
The Processing Interactive Development Environment (IDE)
We will review most of the COMP 202 Java concepts within this Processing window
Processing
Processing is a programming language based on Java
It facilitates building graphical user interfaces ( GUI ), by abstracting some of the lower level concepts from Java
- You don't have to deal with the Java way of drawing things on the screen ( e.g. see code for plotting in A3, or the Country map in A4 )
- It hides from the programmer some of the basic constructs from Java
- But you can still use Java code in processing
- Using Java data types ( int, double, String )
- Importing standard Java libraries ( ArrayList, Hashtable, Math, Random, etc)
- Creating your own object classes
- Reading and writing files
- Handling Exceptions
Moving on from our console ( text input and output ) applications
Hello world in Java
Hello world in Processing
Pixel coordinate system
Going back to Assignment 2
Pixel coordinate system
Going back to Assignment 2
point(x,y) draws a point centered at pixel coordinates (x,y)
strokeWeight(pixels) lets you set the size of the point
Shapes
Drawing a line
line(x1,y1,x2,y2) draws a line segment from (x1,y1) to (x2,y2)
Shapes
Drawing a rectangle
rect(x,y,w,h) draws a rectangle whose top left corner is at (x,y) and its size is w by h pixels
Shapes
Drawing an ellipse
ellipse(x,y,w,h) draws an ellipse centered at (x,y) with a size of w by h pixels
Color
stroke(val) sets the color of lines to val in grayscale
fill(val) sets the color inside a shape to val in grayscale
background(val) sets the color of the background to val in grayscale
Color
stroke(r,g,b) sets the color of lines to r,g,b in the red-green-blue scale
fill(r,g,b) sets the color inside a shape to val in the red-green-blue scale
background(r,g,b) sets the color of the background to val in red-green-blue scale
Interaction
Making things animated and interactive
In Processing this is managed by two methods
The setup method specifies what will happen at the beginning of the program, and will be executed only once
The draw method specifies what will happen continuously, during your program's execution. This is known as the drawing loop.
Interaction
Making things animated and interactive
In Processing this is managed by two methods
The setup method specifies what will happen at the beginning of the program, and will be executed only once
The draw method specifies what will happen continuously, during your program's execution. This is known as the drawing loop.
The speed of the drawing loop can be set with the frameRate(fps), where fps is the desired number of frames per second
Interaction
Making things animated and interactive
The simplest kind of interaction that we get from Processing is keyboard and mouse input
The mousePressed global variable is a boolean that is set to true when the user clicks a mouse button. Before every call to the draw method it is set to false by default.
The global variables mouseX and mouseY give you the pixel coordintates of the mouse pointer in the canvas. These are of type int.
Interaction
Making things animated and interactive
We can manage all the key presses outside the drawing loop
The keyPressed method gets executed whenever the user presses a key
You can get the ASCII value of the key that was pressed using the global variable key, of type char
Using Objects and Classes in Processing
Processing is based on Java, so we can use all of the things we learned during the COMP 202. Let's create a program that draws robots with the following rules:
A Robot should be drawn as an ellipse. It has a position on the screen in pixel coordinates (x,y), and a diameter attribute. It will also have a speed attribute (in pixels per second).
-
Every time the user clicks on the window, a new Robot will be drawn at the location of the click.
-
Every time the user presses x, a Robot will be selected at random, and killed.
-
Robot instances are scared of the last rule, so they should be shaking around their current location
Next class
Now that we can draw stuff on a screen and animate it, we're going to:
- Create a couple more objects
- Load properties from a file
- Use exceptions to catch errors
- Learn a bit about physics based animation, probability, AI and robotics with our setup
/