Processing Example: Rectangle

About

Setup your screen, draw a rectangle, move it around and change some colors.

Installing Processing and completing the following 8 steps took us about 90 minutes with 2-3 mentors and 5 kids.

Instructions

There are 8 git tags, named step-1 .. step-8, just checkout one step at the time.

git co step-1

Step-1 - Setup screen size

• try to change the width and height

Step-2 - Draw a rectangle

• try to move it around
• try to change size
• show the documentation: http://www.processing.org/reference/rect_.html
• show that googleing for processing rect gives you help
• try to change to rounded corners

Step-3 - Draw at mouse position

• talk about X and Y, what can mouseX and mouseY represent?
• try to add only mouseX first

Step-4 - Change rect color

• talk about RGB, how colors are represented, relate to html/css
• try online at http://www.rapidtables.com/web/color/RGB_Color.htm
• try different combinations of fill

Step-5 - Change background

• try changeing background colors

Step-6 - If key is pressed

• how to do something if a key is pressed.
• 'if key is pressed, do this'
• set background color to something new when a key is pressed

Step-7 - Draw when mouse is pressed

• only paint rectangle when mouse is pressed

Step-8 - Random color is fun

• to make it more impressive, try a random number for the color :)