Processing - Computing Science 10 (CS10) |
Processing IDE
Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. There are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning and prototyping.
Download Processing for your:
|
Class Work and Assignments:
Processing Assignment - Parts 1 & 2.pdf | |
File Size: | 40 kb |
File Type: |
Self Quiz - Processing #1 Drawing Shapes Featured to the right is a famous abstract modern art painting by Piet Mondrian (1930) named: _Composition II in Red, Blue, and Yellow Your task is to create a replica of this painting in a Processing file called "Mondrian" Once you've created the program, call Mr. Hubick over to grade your program. To pass, the program will create an accurate replica of this famous painting when executed. Assignment - Processing #1 Altering Shapes Create a dynamic version of any abstract painting Solutions to Quiz Here are two basic approaches and two enhanced versions of the solution: |
Basic Static Program
// Mondrian Quiz - Static Approach // create a black square background size(600,600); noStroke(); background(0); // draw the red rectangle fill(255,0,0); rect(165,0,435,435); // draw the blue rectangle fill(0,0,255); rect(0,450,150,150); // draw the white rectangles fill(255); rect(0,0,150,200); rect(0,225,150,210); rect(165,450,395,150); rect(575,450,25,70); // draw the yellow rectangle fill(240,240,30); rect(575,530,25,70); |
Basic Dynamic Program
// Mondrian Quiz - Changing or Dynamic // Approach void setup() { // create a black square background size(600,600); noStroke(); background(0); } void draw() // This is the looping portion // of the program { // draw the red rectangle fill(255,0,0); rect(165,0,435,435); // draw the blue rectangle fill(0,0,255); rect(0,450,150,150); // draw the white rectangles fill(255); rect(0,0,150,200); rect(0,225,150,210); rect(165,450,395,150); rect(575,450,25,70); // draw the yellow rectangle fill(240,240,30); rect(575,530,25,70); } |
Dynamic Program Version #1
// Mondrian Quiz - Advanced Version #1 // This version draws three randomly // coloured rectangles void setup() { // create a black square background size(600,600); noStroke(); background(0); } void draw() // This is the looping portion // of the program { // draw the red rectangle fill(random(255),random(255),random(255)); rect(165,0,435,435); // draw the blue rectangle fill(random(255),random(255),random(255)); rect(0,450,150,150); // draw the white rectangles fill(255); rect(0,0,150,200); rect(0,225,150,210); rect(165,450,395,150); rect(575,450,25,70); // draw the yellow rectangle fill(random(255),random(255),random(255)); rect(575,530,25,70); } |
Dynamic Program Version #2
// Mondrian Quiz - Advanced Version #2 // This verison changes the colours // by mouse position void setup() { // create a black square background size(600,600); noStroke(); background(0); } void draw() // This is the looping portion // of the program { // draw the red rectangle fill(mouseX/2,0,0); rect(165,0,435,435); // draw the blue rectangle fill(0,0,mouseY/2); rect(0,450,150,150); // draw the white rectangles fill(255); rect(0,0,150,200); rect(0,225,150,210); rect(165,450,395,150); rect(575,450,25,70); // draw the yellow rectangle fill(mouseX/2,mouseY/2,40); rect(575,530,25,70); } |
Here Are Some Useful Tricks and Techniques
1. Line up Indents for Sections and Documentation, it's easier to read!
3. Need to make a Decision... |
Try the "If/Then/Else" conditional statement...
void setup() { size(400,400); } void draw() { background(120); //sets background colour to grey if (mousePressed) { fill(255); //if mouse is pressed, fill with white } else { fill(0); //if mouse is not pressed, fill with black } ellipse(mouseX,mouseY,30,30); } |
4. Want to Enter Numbers...
Copy and paste the code to the right into your program and you will be able to add a numerical input feature into your program! |
int variable; //creates an integer variable named "variable"
PFont font; void setup() { size(500,500); background(255); variable = 0; //sets an initial value for the variable of zero font=createFont("Arial",16,true); textFont(font,20); fill(0); text("Enter an integer value",10, 50); //displays text in initial window } void draw(){ //this loop is needed to refresh display window } void keyPressed() { if( key >= '0' && key <= '9' ) //enters a keyboard digit between 0 and 9 { variable*=10; //allows for more than a 1 digit number variable+=key - 48; //converts ASCII numbers into regular numbers } if( key == BACKSPACE || key == DELETE ) //allows you to backup if you made a mistake { variable/=10; } if( key == ENTER || key == RETURN ) //sets the value of the variable { } background(255); fill(0); text("Enter an integer value", 10, 50); text(variable, 10, 120); text("The value is", 10, 190); text(variable, 125, 190); } |
Practice Assignment - The Radius of a Circle
The goal of this program was to enter an integer value for the radius of a circle and display that value in the output window. Using the radius, calculate the area and circumference of the circle and display both corresponding values. Lastly, using an if/then conditional statement, output a statement about the size of the larger value. Answer: Sample Code - Circle Calculations |
Self Quiz Processing #2 - Calculating a Value
The goal of this program is to enter a temperature in degrees Fahrenheit and convert it to degrees Celsius. The program will display both temperatures rounded to the nearest degree with their corresponding unit (Celsius or Fahrenheit). The program will also display a message that indicates that water will freeze to a solid if temperature is below 0°C, that water will boil to a gas if above 100°C, or that water will be a liquid if it's between 0° and 100°C.
note: the conversion formula required for this program is "Celsius = 5 * (Fahrenheit - 32) / 9"
The goal of this program is to enter a temperature in degrees Fahrenheit and convert it to degrees Celsius. The program will display both temperatures rounded to the nearest degree with their corresponding unit (Celsius or Fahrenheit). The program will also display a message that indicates that water will freeze to a solid if temperature is below 0°C, that water will boil to a gas if above 100°C, or that water will be a liquid if it's between 0° and 100°C.
note: the conversion formula required for this program is "Celsius = 5 * (Fahrenheit - 32) / 9"
Practice Assignment
Using this code to the right (thank you Kenny), create a program by modifying the core code to enter the following demographic information and then display it at the end. First Name Middle Initial Last Name Year of Birth Month of Birth Day of Birth Sex Grade Town/City Street Address Postal Code Mobile Number Home Number To impress me, calculate and display your current age using your birthdate and the current date. |
String text1=""; //Sets up the string variable text1
PFont font; //Sets up the font variable void setup() { size(600,600); font=createFont("Arial",16,true); //Font set to Arial textFont(font,20); background (255); } void draw() { //Allows a loop } void keyPressed() { fill(0); text1+=key; //Sets it so the string will equal the key pressed text(text1,10,20); //Displays the key pressed on screen if(key == DELETE || key == BACKSPACE ) { text1=""; //if DELETE or BACKSPACE is pressed, it resets the string and deletes everything on screen background(255); } if (key == ENTER ) {background(255); //Deletes everything on screen fill(0); text("You typed:",10,50); //Text message text(text1,110,50); //Displays the string you typed text1=""; //resets the string value to be empty } } |
Structured Programming Self Quiz:
Volume and Surface Area Download the program and open in Processing. Your goal is to make this program easier to read and understand, and for an end user to utilize.
|
Useful Hint for Entering and Deleting Text
Use a string such as "myString" to enter and display text. Using the "myString.length()" function however allows you to easily append text creating a longer string or truncate text to shorten it. Check out the sample code to the right. Sample Code This code is a variation of an open source example found on the Processing.org web site.
|
// Example sketch: String and String.Length()
// This sketch allows you to enter text and append it to a string // or delete text by removing the last character from the string // using the string "length()" function String someText = ""; void setup() { size(600, 400); textSize(20); fill(0); } void draw() { background(255); text("Typography Example:", 10, 40); text("Try entering some text and also deleting it", 10, 80); text(someText, 10, 120); } void keyPressed() { if (keyCode == BACKSPACE) { if (someText.length() > 0) { someText = someText.substring(0, someText.length()-1); } } else if (keyCode == DELETE) { someText = ""; } else if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) { someText = someText + key; } } |
Creating a classic "Pong Game"
int x = 10; int y = 10; int bounceX = 1; int bounceY = 1; int score = 0; void setup() { size(600,600); background(255); noCursor(); } void draw() { background(255); fill(0); text("Score = ", 20,20); text(score, 70,20); fill(0,255,0); ellipse(x,y,20,20); x = x + 5 * bounceX; y = y + 1 * bounceY; // if (x >= 590) { // bounceX = bounceX * -1; // } if (x <= 10) { bounceX = bounceX * -1; } if (y >= 580) { bounceY = bounceY * -1; } if (y <= 10) { bounceY = bounceY * -1; } fill(255,0,255); rect(550,mouseY,10,50); if (x == 550 && y >= mouseY && y <= mouseY +50) { bounceX = bounceX* -1; score = score + 1; } } |
Creating a "Target Game"
float x; int y=0; int score = 0; void setup() { size(600,600); background(255); x = random(600); } void draw() { stroke(255,0,0); noFill(); background(255); ellipse(mouseX,mouseY,20,20); ellipse(mouseX,mouseY,40,40); line(mouseX,mouseY+40,mouseX,mouseY-40); line(mouseX+40,mouseY,mouseX-40,mouseY); fill(0,0,255); ellipse(x,y,10,10); text("score =", 10,10); text(score, 60, 10); y = y + 1; if (y >= 590) { x = random(600); y = 0; } } void mousePressed() { if (mouseX >= x-10 && mouseX <= x+10 && mouseY >= y-10 && mouseY <= y+10) { background(0); score = score + 1; } } |
Adding sound to your programs!
Here is a sample code from Kyle G., he managed to add sound effects to his processing sketch and has graciously agreed to share how he did it!
import ddf.minim.*; // This is Minim. To add Minim to your sketch,
import ddf.minim.analysis.*; // go to "Sketch" at the top then "Import Library"
import ddf.minim.effects.*; // then click "Add Library" then search Minim in the
import ddf.minim.signals.*; // search bar. Once Minim is imported, you can now add
import ddf.minim.spi.*; // audio files to your sketch.
import ddf.minim.ugens.*; // Visit http://code.compartmental.net/tools/minim/quickstart/
// For examples & reference.
Minim minim; // Creates a variable called "minim" for the class "Minim".
AudioPlayer song; // Creates a variable called "song" for the class "AudioPlayer".
void setup() {
size(600, 600);
background(0);
minim = new Minim(this); // Creates Minim on setup. (this) is used to fill blank space as far as I know.
song = minim.loadFile("song.mp3"); // Makes variable "song" call "minim.loadFile("songName")" which gets your sound file.
} // Note: You need to attach the file type to the string like .WMA or .wav or .mp3.
void draw() {
text("Click to play sound/song.", 300, 300);
}
void mousePressed() {
song.play();
}
Here is a simple shooting game:
// My awesome first game in Processing!
// by Mr. H
// Declare the global variables
float x; // determines the horizontal position
int y = 0; // determine the vertical position and sets y to start at 0
int score = 0; // defines a varible to keep score of how I'm doing
void setup() {
size(600,600); // creates an output window 600 pixels square
background(255); // makes the background window white
x = random(600); // sets the horizontal position between 0 and 600
}
void draw() {
stroke(255,0,0); // outlines my shapes in red
noFill(); // the shapes will be empty
background(255); // redrawing the white backgound
ellipse(mouseX,mouseY,20,20); // creates an crosshair target centered on the mouse
ellipse(mouseX,mouseY,40,40);
line(mouseX+40,mouseY,mouseX-40,mouseY);
line(mouseX,mouseY+40,mouseX,mouseY-40);
fill(0,0,255); // fills the next shape with blue
ellipse(x,y,20,20); // draws a second ellipse centered on (x,y)
text("score =", 10,10); // create a score up in the top left corner
text(score, 60, 10); // prints out the score variable
y = y + 1 + score/5; // moves the ellipse downwards, 1 is vertical speed
if (y >= 590) { // if the ellipse reaches the bottom edge
x = random(600); // then it resets the x and y values to
y = 0; // reappear at the top
}
}
void mousePressed() {
if (mouseX >= x-10 && mouseX <= x+10 && mouseY >= y-10 && mouseY <= y+10) {
// the +10 and -10 values set a target box around your cursor
score = score + 1; // increments the score by 1 if you hit the target
background(0); // flashes the background if you hit the target
x = random(600); // repositions the target at the top if you hit it
y = 0;
}
}
Here is a sample code from Kyle G., he managed to add sound effects to his processing sketch and has graciously agreed to share how he did it!
import ddf.minim.*; // This is Minim. To add Minim to your sketch,
import ddf.minim.analysis.*; // go to "Sketch" at the top then "Import Library"
import ddf.minim.effects.*; // then click "Add Library" then search Minim in the
import ddf.minim.signals.*; // search bar. Once Minim is imported, you can now add
import ddf.minim.spi.*; // audio files to your sketch.
import ddf.minim.ugens.*; // Visit http://code.compartmental.net/tools/minim/quickstart/
// For examples & reference.
Minim minim; // Creates a variable called "minim" for the class "Minim".
AudioPlayer song; // Creates a variable called "song" for the class "AudioPlayer".
void setup() {
size(600, 600);
background(0);
minim = new Minim(this); // Creates Minim on setup. (this) is used to fill blank space as far as I know.
song = minim.loadFile("song.mp3"); // Makes variable "song" call "minim.loadFile("songName")" which gets your sound file.
} // Note: You need to attach the file type to the string like .WMA or .wav or .mp3.
void draw() {
text("Click to play sound/song.", 300, 300);
}
void mousePressed() {
song.play();
}
Here is a simple shooting game:
// My awesome first game in Processing!
// by Mr. H
// Declare the global variables
float x; // determines the horizontal position
int y = 0; // determine the vertical position and sets y to start at 0
int score = 0; // defines a varible to keep score of how I'm doing
void setup() {
size(600,600); // creates an output window 600 pixels square
background(255); // makes the background window white
x = random(600); // sets the horizontal position between 0 and 600
}
void draw() {
stroke(255,0,0); // outlines my shapes in red
noFill(); // the shapes will be empty
background(255); // redrawing the white backgound
ellipse(mouseX,mouseY,20,20); // creates an crosshair target centered on the mouse
ellipse(mouseX,mouseY,40,40);
line(mouseX+40,mouseY,mouseX-40,mouseY);
line(mouseX,mouseY+40,mouseX,mouseY-40);
fill(0,0,255); // fills the next shape with blue
ellipse(x,y,20,20); // draws a second ellipse centered on (x,y)
text("score =", 10,10); // create a score up in the top left corner
text(score, 60, 10); // prints out the score variable
y = y + 1 + score/5; // moves the ellipse downwards, 1 is vertical speed
if (y >= 590) { // if the ellipse reaches the bottom edge
x = random(600); // then it resets the x and y values to
y = 0; // reappear at the top
}
}
void mousePressed() {
if (mouseX >= x-10 && mouseX <= x+10 && mouseY >= y-10 && mouseY <= y+10) {
// the +10 and -10 values set a target box around your cursor
score = score + 1; // increments the score by 1 if you hit the target
background(0); // flashes the background if you hit the target
x = random(600); // repositions the target at the top if you hit it
y = 0;
}
}
Here is an example of an array!
StringList inventory; int n = 2; int m = 0; void setup() { size(600, 600); background(255); inventory = new StringList(); inventory.append("coffee"); inventory.append("flour"); inventory.append("tea"); println(inventory); fill(0); textAlign(CENTER); } void draw() { if (m <= n) { String item = inventory.get(m); textSize(30); text(item, width/2, height/2 + m*30); m = m + 1; } } |
and here is the proto code for a sorting program ;^)
String listedText = ""; String enteredText = ""; StringList inventory; int n = 0; int m = 0; Boolean sortingState = false; void setup() { size(600, 400); inventory = new StringList(); textSize(20); fill(0); } void draw() { if (sortingState != true) { String item = inventory.get(n); background(255); stroke(0); noFill(); rect(500, 50, 80, 40); text("Done", 515, 76); text("Enter items to be sorted:", 10, 40); text("Click Done when complete", 10, 80); text(enteredText, 10, 120); text(listedText, 10, 180); text(m,50,500); println(inventory); println(n+2); } } void keyPressed() { if (sortingState != true) { if (keyCode == BACKSPACE) { if (listedText.length() > 0) { listedText = listedText.substring(0, listedText.length()-1); } } else if (keyCode == DELETE) { listedText = ""; enteredText = ""; } else if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) { listedText = listedText + key; enteredText = enteredText + key; } if (keyCode == ENTER) { inventory.append(enteredText); enteredText =""; n = n + 1; } } } void mousePressed() { if (sortingState == false) { if (mouseX > 500 && mouseX <580 && mouseY > 50 && mouseY < 90) { sortingState = true; background(255); text("Sort Items Now", 20, 20); } } } |
Sample Code - "Shoot The Falling Target" Game
//Sample Shooting Game
//Mr. H. ;^) float x = 100; float y = 100; int scroll = -200; int score = 0; int lives = 5; int highscore = 0; int stage = 0; float bounce = 4; PFont font; void setup() { size(600, 600); background(255); font = createFont("Times", 30, true); } void draw() { //this section (stage = 0) creates the start page if (stage == 0) { cursor(); background(255); fill(255, 0, 0); rect(200, 240, 200, 100); fill(random(255), random(255), random(255)); textFont(font, 50); text("Shoot The Target!", 125, 100); fill(0); textFont(font, 25); text("INSTRUCTIONS:", 50, 425); textFont(font, 20); text("Click your mouse to shoot each target and score a point.", 75, 450); text("However should you miss a target and it hits the ground", 75, 475); text("you'll lose a life.", 75, 500); text("The game is over when you run out of lives!", 75, 550); textFont(font, 30); text("Click To Start", 215, 300); if (mousePressed) { if (mouseX >= 200 && mouseX <= 400 && mouseY >= 240 && mouseY <= 340) { stage = stage + 1; } } } //this section (stage = 1) creates the game page if (stage == 1) { background(255); fill(0); textFont(font, 20); text("Score = ", 10, 20); text(score, 100, 20); text("Lives = ", 10, 40); text(lives, 100, 40); text("High Score = ", 430, 20); text(highscore, 560, 20); noCursor(); //this section creates the falling target to shoot on the game page fill(0, 0, 255); stroke(255, 0, 0); ellipse(x, y, 25, 25); //this section draws the target crosshairs noFill(); ellipse(mouseX, mouseY, 10, 10); ellipse(mouseX, mouseY, 20, 20); ellipse(mouseX, mouseY, 30, 30); line(mouseX, mouseY+30, mouseX, mouseY-30); line(mouseX+30, mouseY, mouseX-30, mouseY); //this secton moves the ball down the page and then back to the top on the game page y = y + 2 + score/10; if (y >= 650) { y = 0; x = random(600); lives = lives - 1; //this section creates the crosshairs target on the game page //this keeps track of your lives if (lives <= 0) { stage = 2; } } //this section is for shooting the target and tracking number of hits for the score if (mousePressed) { if (mouseX >= x-10 && mouseX <= x+10 && mouseY >= y-10 && mouseY <= y+10) { background(0); score = score + 1; y = 0; x = random(600); bounce = random(16)-8; } } } //this section adds a sideways motion to the ball if (score >= 50) { x = x + bounce; } if (x >= 610) { bounce = bounce * -1; } if (x <= -10) { bounce = bounce * -1; } //this section creates the game over page and "scroll" moves the text across the screen if (stage >= 2) { cursor(); background(255); fill(0); textFont(font, 20); text("High Score = ", 430, 20); text(highscore, 560, 20); textFont(font, 40); fill(255, 0, 0); text("Game Over", scroll, 500); scroll = scroll + 1; if (scroll >= 700) { scroll = -200; } rect(200, 240, 200, 100); stroke(0); fill(random(255), random(255), random(255)); textFont(font, 50); text("Shoot The Target!", 125, 100); fill(0); textFont(font, 30); if (score >= highscore) { highscore = score; } text("Click To Start", 215, 300); if (mousePressed) { if (mouseX >= 200 && mouseX <= 400 && mouseY >= 240 && mouseY <= 340) { stage = 1; score = 0; lives = 5; } } } } |
Stage = 0 - The Introductory PageStage = 1 - The Game PageStage = 2 - The End Page or "Game Over"Printer Friendly Version
|