Using Processing to Teach Computer Science
SM
SM
Processing is excellent for giving students their first step to text-based programming, as an intermediate step after something like Scratch and before jumping into something like Java™. Processing’s ability to give instant visual output makes it fabulous for learning programming. And since it actually is Java™, it can do anything that Java™ can do, including creating arrays, complex data structures and objects!
*worth.com
Create the Future at Digital Media Academy, the World’s Best Tech Camp.*
You will need:
Animation, 3D Modeling, Computer Programming, Game Design, Filmmaking, Audio Production, Robotics & More Processing is a free and open source application you can use in your classroom. Processing is available on the Internet.
Processing is used in DMA’s Introductory Programming courses as well as other great tools like Scratch, Python™ and Swift™.
Website: www.processing.org Tutorial: hello.processing.org Like us on Facebook! dig.ma/dmaonfacebook
What is Processing? Processing is a programming language, created as an implementation of Java™, with the goal of making learning computer programming an easy, fun and, most importantly, visual experience.
Project: Create a Drawing Using Computer Programming Project Time: 10-15 minutes Skills Developed: Programming basics, using Processing
DMA’S INNOVATIVE APPROACH
#1 TECH CAMP
PROJECT BASED
OVER 20 CAMPUSES
STEM learning in an energetic and creative environment
Hands-on, project-based instruction from industry experts
Top university locations across the U.S. and Canada
SM
Download this guide for your classroom: dig.ma/toolsforeducators
Drawing a Face
How it Works Each command does something different. Drawing an ellipse is as easy as writing the function name, ellipse, in the editor, and then entering the information in the Parameters. 500
Name
1
Set the size of the screen: size (500,500);
2
Draw a circle: ellipse (250,250,400,400);
4
Use a semi-colon at
Parameters the end of each line
Don’t forget to add semicolons at the end of each line. (250,250)
ellipse (150,150,50,50);
X Coordinate Y Coordinate
400
3
Draw the rest of the face. A. Make the color of the eyes blue:
Width Height 400
When writing parameters for an ellipse, follow this order: X Coordinate, Y Coordinate, Width and Height. The syntax of the function (or the general form) looks like this: ellipse (x,y,width,height); Example: size (500,500); sets the size of the canvas to 500 by 500 pixels. Function calls get executed in order from top to bottom, so if you want a shape to overlap another, you have to draw the topmost shape last.
With an open Processing IDE window, you can start programming visual shapes right away. There are no class structures, no graphics to import and no playing around with functions, inheritance, or other programming commands.
B. Create the eyes: ellipse (150,150,50,50); ellipse (350,150,50,50); C. Create the mouth. line (150,300,350,300);
Congratulations! You made a simple face. Type
Click
Use an arc function to draw an arc instead of a line: arc (a, b, c, d, start, stop); Arc Parameters: a: X Coordinate of the arc’s ellipse b: Y Coordinate of the arc’s ellipse c: Width of the arc’s ellipse by default d: Height of the arc’s ellipse by default start: angle to start the arc, specified in radians stop: angle to stop the arc, specified in radians
Take a look at the reference below for the syntax of many functions, and then try drawing your own face, creature or anything you can think of! If you can’t think of anything, try drawing a house.
fill (0,0,255); 500
Challenge! Make Your Face Smile:
You Should See
size (500,500); ellipse (250,250,400,400); fill (0,0,255); ellipse (150,150,50,50); ellipse (350,150,50,50); line (150,300,350,300); The first two parameters of a line command are the starting coordinates of the line, and the second two parameters are the ending coordinates of the line.
Drawing Reference Setting the screen size
size (horizontal_width, vertical_height);
Create a line
line (x_start, y_start, x_end, y_end);
Create an ellipse
ellipse (x, y, width, height);
Create a rectangle
rect (x, y, width, height);
Create a triangle
triangle (x1, y1, x2, y2, x3, y3);
Set the fill color
fill (red,green,blue);
Set the line color
stroke (red,green,blue);
Set the background color
background (red,green,blue);