Drawing Shapes

Drawing Shapes - Part 1: Introduction, Documentation, Creating a Processing File

Drawing Shapes - Part 2: Creating the Canvas, Making a Triangle

Drawing Shapes - Part 3: Changing the Color, Instructions

Use the Processing Documentation (if needed) to create one 5-line program that does each of the following. Note that Processing orients its axes differently than those typically associated with Cartesian coordinates. See the figure below for reference.

1. Set the size of the display window to a height of 300 and a width of 500.
2. Draw an ellipse with a width of 20 and a height of 30. It should be centered at the x-y coordinates (100, 40).
3. Create a color variable 'c' set to burnt orange. The color values for burnt orange are (RED = 204), (GREEN = 85), and (BLUE = 0).
4. Fill the quadrilateral with the color you defined as 'c'.

Draw a Figure

Draw a Figure - Part 1: Introduction, Creating the file, Part of the Figure

Draw a Figure - Part 2: Finishing the Figure, Instructions for Activity

Using vector shape-drawing commands in Processing, code a sketchbook that draws a figure. For this assignment, we will focus solely on the appearance of your original figure. However, keep in mind that this figure you create in this assignment will be used for the next several assignments. You should be focused on making a figure that will eventually interact with both mouse and keyboard events as well as move about the screen. Examples of good figures might include a robot, person, cat, kangaroo, automobile, etc.

Tips:

• Read an example piece of code containing a drawing. Outline the steps in the example. Think about how can you apply these skills to your own drawing.
• As always, examine the Processing Reference Page (Links to an external site.)Links to an external site.. Focus on 2D Shapes, particularly the ellipse(), line(), point(), rect(), and triangle() functions to create a figure.
• You can also use the fill and color variables in order to change the appearance of your figure.
• Remember that the window size is stored in width and height variables. If you'd like to reference the exact center of the window, use something akin to point(width/2, height/2).
• The println() function can be a lifesaver when troubleshooting your code. Use it to output diagnostic messages as needed. Reference the Debugging with println() Guide (Links to an external site.)Links to an external site..

Back