Step 0: Set Up Your Drawing Canvas

Use the Processo editor at the bottom of this assignment (after the Submission information). It opens with the code you may have written for the Taijitu Comprehension Exercises, so you may have done some of the following steps, or you may have to change what you have written.

The first step in any Processo project is to set up your drawing canvas! This is typically achieved with the following two commands:

size( ,  ); background(rgb( , ,  ));

Type those two commands into the project, replacing the text surrounded by brackets with appropriate numbers. Press the "Run" button () and you should see a canvas with your chosen size and background color appear! Press the stop button before continuing.

Step 1: Construct the Taijitu

Based on your responses to the Taijitu worksheet, write out the Processo commands to construct the taijitu (image shown to the right). These should be written out below the commands from Step 0 and follow the ordering you determined on your worksheet.

Useful commands: size, background, stroke, noStroke, fill, noFill, strokeWeight. If you are unsure of what these commands do, you can ask a peer, tutor, your professor, or check the Drawing Reference

Actions

.

It is HIGHLY RECOMMENDED that you view your drawing (press Run) after every command you add to make sure that it is doing what you intend. This process of testing as you go will be very helpful throughout the course, as it lets you immediately identify where new errors are coming from (the last command you added!).

Make sure you add a comment (// this is a comment) to every line of code you have written so far to remind yourself what each command is doing. Your drawing should look very similar to the one shown here before moving on.

Step 2: Color Your Taijitu

Personalize your taijitu by replacing the black with another color of your choosing!

1. Find a color using the Pick Color button.
2. Click the Copy button to copy the rgb(...) command and its RGB numbers into your clipboard. Or, write down the RGB numbers somewhere so you don't forget them.
3. Paste or type the RGB numbers in the appropriate places in your code to change just the black parts of your taijitu.
4. Run the program to make sure it still works and looks the way you want it to.
5. Update the comments that describe the lines of code you just changed.

Optionally, you may try replacing the white in the taijitu with another color as well. Note that you will need to add another shape to keep the outside of the taijitu white!

Step 3: Make the Program "Active"

The program you have written so far is static. The Processo code runs, draws your beautiful taijitu, and then quits.

We want it to be active (keep running) and eventually make our drawing move. Notice the two programs below. The one on the left is the static drawing and the one on the right is the active version. The new code groups the instructions for the taijitu into two parts, the setup code and the draw() function. Tip: In programming, functions are written with a pair of parentheses after the name.

Make the highlighted changes to your code, including adding indentation.

// original code size( , ); background(rgb( , , )); // your taijitu commands and comments follow

// updated, active code size( , ); void draw() { background(rgb( , , )); // your taijitu commands and comments follow }

What is Happening?

The setup code runs once, when the program starts running. After that code runs, then the draw() function runs over and over again. This redraws the image. The diagram below shows what is happening when the Processo engine runs an active program.

The way to read this diagram is that the Processo engine starts running the setup, finishes it, starts running draw(), finishes that, and then goes around and runs draw() again, again, and again...

Step 4: Move the Taijitu

Modify each of your shape commands so that each of the locationX parameters has mouseX added to it and each of the locationY parameters has mouseY added to it. Review the Drawing Reference and notice that both the rect and ellipse commands have startX or centerX as their first parameter and startY or centerY as their second parameter. For example, if you had: rect(1, 2, 3, 4), it would become : rect(1+mouseX, 2+mouseY, 3, 4). Caution: Notice that "mouse" is written in lowercase letters and the "X" and "Y" are capitals; this is required.

Run your program and move your mouse/finger! The mouseX and mouseY variables represent the location of your mouse or finger. Think about the math that causes this to work.

Step 5: Drawing Explosion!

Now comment out the background() line from the draw() function of your program and run it again. Commenting out means to put a // comment symbol at the beginning of the line to turn it into a comment instead of running code. Using a comment above the background() line in the draw() function of your program, explain what just happened. Make sure you read the rubric below to see what is expected in your explanation.