Outcomes include
CS20-CP1: Apply various problem-solving strategies to solve programming problems throughout Computer Science 20.
(e) Use flowcharts, pseudocode and/or visual programming environments to model the logic of algorithms.
CS20-CP2: Use common coding techniques to enhance code elegance and troubleshoot errors throughout Computer Science 20.
(a) Discuss and implement appropriate coding style (e.g., indentation and comments) and naming conventions for the programming language used in Computer Science 20.
This first activity will show you how to begin drawing some easy shapes in Processing. This is just like the sort of thing you might do in a sketchbook or using Paint on the computer, but we will be drawing our shapes using code! Start by using a pen and some graph paper to make some sort of drawing (something simple to start). You can use straight lines, squares or rectangles, triangles, and circles or ellipses. Make sure that your shapes are drawn on the gridlines of the paper (this will make the coding easier). Once you have your design, try to replicate your drawing by coding it in Processing! The lines of code you will need are listed below:
To Create a Window → size(width, height)
To Draw a Line → line(x1, y1, x2, y2)
To Draw a Rectangle → rect(x, y, width, height)
To Draw a Triangle → triangle(x1, y1, x2, y2, x3, y3)
To Draw an Ellipse/Circle → ellipse(x, y, width, height)
For more shapes, refer to the Processing Reference.
Tips:
Example:
On a piece of graph paper, draw a simple, but recognizable image. After your image is complete, create your picture in Processing. Remember that the Processing coordinate system is different than the Cartesian system you learned in math class.
Student Example: