Programming Basics

Assignment

🎲 Mathematical Drawing

Let’s use what we’ve learned about variables and math to create a drawing in Processing!

For each question, leave a comment stating what code belongs to which question pls pls

Create a canvas of size 500 by 200.
In Processing, there are a few special variables that are declared and assigned automatically based on your drawing. Two of them are width and height. You do not have to create these variables, or assign anything to them. They already exist! [1 mark]

Print out width and height. Run your code.
Now, change the function call to size to make your canvas 700 by 700 pixels instead.
Run your code again and notice the print statements you made in 2a.
What do you notice? Using a print statement, explain the significance of the variables width and height.

At this point, you could assume that I’ll be changing the size of your canvas as I mark your work…

Draw a circle with a width of 50 pixels. Have the circle centered in the middle of the canvas. Make this work no matter what the size of the canvas is. To test this, change the size of the canvas. Does the ellipse always appear where it should? [1 mark]
Draw another circle with a width of 100 pixels. This time, have it centered just 100 pixels to the left of the canvas’s centre, regardless of the canvas size. [1 mark]

Create two variables, rWidth and rHeight. Set rWidth to always be half the width of the canvas. Set rHeight to always be half the height of the canvas. [1 mark]

Using rWidth and rHeight, draw a red rectangle that covers the upper left quadrant of the canvas, regardless of the canvas’s size. [1 mark]

Now let’s use a method that we need to import to our program. Make
import java.util.Random; the very first line of your program. (Even before the header comment! Which should be in your program at this point 😬) [1 mark]
Now, from where you left off after question 6 in your program, create a Random object by copying the line Random rdm = new Random(); into your program. [1 mark]

Create a variable called test, and assign it to equal rdm.nextInt(10);. [1 mark]

Print out test. Run your program several times and see what happens.
Write a print statement explaining what the method nextInt() does.

Remember that we can use fill() with both HEX colour codes and RGB colour values? RGB values go from 0-255. Create three variables: redVal, greenVal, and blueVal. Assign all three to be random values within a valid range for RGB values. [1 mark]
Use rWidth and rHeight again to draw a rectangle that covers the upper right quadrant of the canvas, regardless of the canvas size. This time, colour the rectangle using redVal, greenVal, and blueVal. [1 mark]
Reassign redVal, greenVal, and blueVal with new random values and draw another randomly-coloured rectangle in the bottom left quadrant of the canvas. When you make a reassignment in Java, you will not need to state the data type again. [1 mark]
And again, but in the bottom right quadrant of the canvas! [1 mark]
Copy-paste the following code to the end of your drawing program. (You should leave everything else from the previous questions in the program though.) Read the comments to find out what the code is supposed to do.

/* This code draws ellipses of increasing size.

The center position of the first ellipse is specified, along with an x-offset value

representing the horizontal distance(in pixels) between the center of one ellipse

to the center of the next.

The width (and height) of the first ellipse is specified.

Subsequent ellipses maintain the same width but double in height each time. */

// Start position and size for first ellipse

startX = 100

int startY = 350;

int size = 75;

// Distance between ellipses

int offSet= 75;

// Draw ellipse #1

ellipse(startX, startY, size, size);

//Adjust size and location of the 2nd ellipse

startX = startX + offset;

// IncreaseHeight is used to make ellipses of increasing size

int increaseHeight = 2;

ellipse(startX, startY, size, increaseHeight*size);

// Adjust size and location of the remaining ellipses

startX = startX + offset;

elipse(startX, startY, size, increaseHeight*size);

startX = startX + offset;

increaseHeight = 3;

ellipse(startX, startY, increaseHeight*size);

Try to run your code. You’ll notice that there are errors – both syntax and logic! Fix them!
You’ll need to “trace” the code to find out what’s wrong! [6 marks]

Code tracing means that you pretend that you are the computer.

Walk through the code, line by line. Figure out the values of each variable, and think about what will happen by that line of code. You can also add print statements in between the lines to see what is inside the variables.

Are these the values you expect to see? If not, what do you expect, and how can you modify the code to produce the desired result?

Use these strategies to fix the given code so that it produces the intended results (as outlined in the comments).

Declare three more variables to colour in the ellipses: redE, greenE, and blueE. Assign the values so that the resulting RGB value will create a beautiful purple. Or any purple you want, I guess. Colour the first ellipse with this purple colour. [1 mark]
For each subsequent ellipse, decrease the amount of red by 10%. Use your knowledge of math and Java to perform this calculation! [1 mark]
If you haven’t already, include your header comment with all 4 required fields. [1 mark]
Did you plagiarize my work from step 14???! You should leave a little comment giving credit for who wrote that, I think. [1 mark]
Hand in your pde file to the Google Classroom. No need to ZIP anything this time.

Before submitting your work, test your work a couple times with different sized canvases, just to make sure it always works!

BONUS QUESTIONS

Create a border around your entire canvas using 4 rectangles. The border should have a thickness of 15% of the width/height of your canvas, and should work for any sized canvas. You can choose the border colour. [1 bonus mark]

Inside each side of the border, draw 4 randomly sized squares that are equidistant (equal distance) from each other. They should all have a colour that is randomly generated every time the program is run. [1 bonus mark]

Change your four ellipses so that the fourth (largest) ellipse is always horizontally centered on the canvas, regardless of the size of your canvas. The other three ellipses should all have the same offset relative to the largest ellipse. [1 bonus mark]