ASSIGNMENT 1

DEPARTMENT AND COURSE NUMBER: COMP 1010 COURSE TITLE: Introduction to Computer Science 1 TERM: Winter

2021

Assignment 1

DUE DATE FEBRUARY 12, 2021 AT 11:59PM

Notes:

Name your sketches using your name, the assignment number, and the question number, exactly as in this example: LastnameFirstnameA1Q1.

Your programs must run upon download to receive any marks.

Submit one PDE file for each question.

Assignments must follow the programming standards document published on the course website on

UMLearn.

After the due date and time assignments may be submitted but will lose 2% of marks per hour late or

portion thereof.

You may submit a question multiple times, but only the most recent version will be marked.

These assignments are your chance to learn the material for the exams. Code your assignments

independently. We use software to compare all submitted assignments to each other, and pursue academic dishonestly vigorously.

Q1: Animal [10 marks]

You should be able to do this question after Week 2 in the course.

Write a non-active Processing program (containing no setup() or draw() functions) which will draw an animal on the canvas, with or without a frame around it. Be creative. The rules are:

Follow the Shape Dependency Model (more details below)

Include 6 to 16 shapes (ellipses, rectangles, lines or other shapes). The sample animal shown here (its supposed to be a frog) uses 14 shapes (12 ellipses, 1 line and a rectangle for the frame).

Your script must contain: o at least one ellipse,

o at least one rectangle (this can be, but doesnt have to be, a frame around your animal)

o at least one line, triangle or quad (shapes defined only by coordinates)

It should contain at least 3 different colours.

It can be a pretty basic animal, even more basic than the one shown. If you can portray an

animal with 6 shapes, thats fine. You dont have to be a great artist. Points are not

awarded on artistic merit.

Dont make it too complex. Stick to the limit of 16 shapes. 1

ASSIGNMENT 1

DEPARTMENT AND COURSE NUMBER: COMP 1010

You must use a 500 x 500 canvas for this question.

Hint: in Q3, you are going to scale the animal in the horizontal and vertical

directions. Because of this, you should avoid using circles/squares and instead only

use ellipses and rectangles.

The animal must be medium to large and use up a good proportion of the canvas, as in the example.

It should be roughly centred in the window.

In Questions 2 and 3, your animal will move, grow, and shrink. To make that easier, you MUST write your code following the shape dependency model. See ShapeDependencyExample.pde. In the shape dependency model, you choose one shape as the root or parent shape. You define its size and its position using constants. Then, every other shape is defined in relation to the first (root or parent) shape, either directly or indirectly. This way, if you move the root shapes position, all the other shapes follow along automatically. Also, if you make the root shape bigger or smaller in either the X or Y dimension (or both), the other shapes will also scale appropriately. Study the shape dependency code. Play with it. Make sure you understand how it works BEFORE trying to create your animal.

Further instructions:

Define constants for your root shape. These can (but dont have to) depend on the canvas width and height.

Hint: use a rectangle or ellipse as the root shape of your animal, since they have both position coordinates and separate horizontal and vertical dimensions (width and height). Shapes that are only defined by coordinates (lines, triangles, quads) are fine to add to your animal, but using one of those for the root shape would make this assignment MUCH more difficult.

For the rest of your shapes, you can use variables. But these must all depend on the width, height and coordinates of your root shape (not the canvas width and height).

Your drawing commands (like rect(...), ellipse(...) etc. should only contain constant or variable names, no numbers. The variables you create can be defined using other constants and variables combined with simple numbers like 2, 3, 4, 5, 6, 7 or 8 to get sizes that are divisions or multiplications relative to other body parts. For example, you can have something like this:

leftEyeX = headX - headWidth/3; ellipse(leftEyeX, ....)

Use good, descriptive variable names that highlight the difference between locations and dimensions (leftEyeX, which tells where the left eye is, vs. eyeWidth, which says how wide the eye is). Every shape you draw will need at least a few variables defined for it.

Pay attention to when you can reuse variables. For example, since the example frogs eyes are both at the same height, we need leftEyeX, rightEyeX and eyeY (only one variable for eye height is needed).

Hint: Work on one shape at a time, starting with the root shape. Then add another shape, and make sure it is drawing the way you want, then go to the next shape. Do NOT try to code all the shapes in one go and then run the script to test it.

2

ASSIGNMENT 1

DEPARTMENT AND COURSE NUMBER: COMP 1010

Just to give you a sense of what to expect, the code to draw the frog above is about 100 lines, typically 5-8 lines per shape to define the variables and set the fill/line colour and then do the actual shape drawing call.

Q2: Move the Animal [4 marks]

REMINDER: BEFORE starting Question 2, save a copy of your original Question 1 program. You must hand in the original static version to get points for Question 1.

Convert your program from Question 1 into an Active Processing program, with the animal centered on the canvas. To do this, follow these instructions:

1. Create the usual setup()and draw() functions. Create a drawAnimal() function (or a similar name).

2. Move all of your existing code from Question 1 into the appropriate place in these new functions. All of the code that draws your animal should go into the drawAnimal() function, not into the draw() function directly. The functions should call each other as needed.

3. You will need to change the two constants that define the position of the root shape into global variables.

4. Create a moveAnimal() function (or use a similar name). The moveAnimal() function should use the mouse cursor position to set the X and Y values for the location of your animal. The center point of your animals root shape should always exactly match the mouse cursor position. If you have followed the instructions in Question 1 carefully, following the shape dependency model, all the parts of your animal should move together, underneath the cursor (see the Q2 demo).

Q3: Scale the Animal [7 marks]

REMINDER: BEFORE starting Question 3, save a copy of your original Question 2 program. You must hand in the original version to get points for Question 2.

Question 3 requires material from Week 3 and a little bit of knowledge of floats from Week 4.

Make a copy of A1Q3_template_code and save it with your name, following the assignment naming conventions described at the top of this document. Run the provided code, which will give you two sliders. The vertical slider will be used to control the vertical scaling of your animal, and the horizonal slider will be used to control the horizontal scaling of your face. Right now, the sliders should move if you drag them with your cursor, but they are not controlling anything.

3

ASSIGNMENT 1

DEPARTMENT AND COURSE NUMBER: COMP 1010

Make the following changes:

1. Copy in the function you created in Q2 to draw your animal.

2. In this question, the animal doesnt move, but it does scale.

You will need to make the root shape positions global constants in this question. And the root shapes width and height will need to be turned into variables, since they are going to change. Update the code so that your animal shows up in the center of the screen, looking just like it did in Q1. Note that the sliders have no effect on the animal yet.

3. Create constants that define a minimum and maximum size for your animals root shape.

4. Create two float variables to store the amount of x scaling and the amount of y scaling (float variables are covered in Week 4 these are variables that can hold decimal numbers and a percentage is a decimal number: 40% is 0.4).

5. Implement the updateXScaleFactor() and the updateYScaleFactor() functions that are provided to you as empty functions in the template code. These are very short functions (one line of code in each). The updateXScaleFactor function must calculate the percentage of X scaling (from 0.0 to 1.0) based on the position of the horizontal slider and store that in the x scale variable you added in Step 3. If the horizontal slider is all the way to the left, the x scale factor variable should be 0.0, if the slider is all the way to the right, it should be 1.0. Similarly, the updateYScaleFactor() must calculate the percentage of Y scaling (from 0.0 to 1.0) based on the position of the vertical slider. If the slider is at the bottom, the y scale factor should be 0.0, if the slider is at the top, the y scale factor should be 1.0. To do these calculations make sure that you make use of the constants defined at the top of the file. Look at how these constants are used to draw the sliders in the drawXSlider() and drawYSlider() functions. Be careful to avoid integer division errors.

6. Add a scaleAnimal() function. This function should use the scale factors calculated in the previous step to scale the width and height of the root shape of your animal. Once you have this working, your animal should scale both vertically and horizontally using the sliders, as shown in the demo code. To give you a sense of how this should work, if you have a torso as the root shape of your animal, and you have set the minimum torso width to be 50 and the maximum torso width to be 250, and the horizontal slider is halfway across, the x scale should be 0.5 (50%) and the animal torso width should be set to 150 (halfway between 50 and 250). You will need to figure out how to code that into an equation that will work as the scale factor varies between 0.0 and 1.0. Again, assuming that your code from Question 1 followed the shape dependency model appropriately, scaling the root shape in both the x and y direction based on the scale factors calculated in Step 5 should be all you need to do to get this to work.

Q4: Animal Part Follows Cursor [4 marks]

In this Question you will extend your Q3 program. Save a copy of Q3 to hand in, and copy it into a new script for Q4. Your job is to add/edit a single part of the animal so that that part appears to follow the cursor around the screen. In the Q4 demo code, we have added a tongue to the frog, which appears to follow the cursor. The tongue is drawn as a triangle, with two coordinates anchored to the frogs face, and one coordinate that moves around, not too far from the face, but

4

ASSIGNMENT 1

DEPARTMENT AND COURSE NUMBER: COMP 1010

always towards the direction of the cursor.

In this Question you have a fair amount of freedom. You could make eyeballs move in eye sockets, you could make a wing move, or an animals tail move. You just have to make some part of the animal visibly pay attention to or seem to follow the mouse cursor as it moves around, even as the cursor is being used to adjust the scaling with the sliders.

[Programming Standards are worth 5 marks]

Hand In:

Hand in four separate .pde files, containing the answer to each question. Each file must run without errors, or you will lose all of the marks for the test run.

Make sure your files are named exactly as specified in the instructions at the beginning of the assignment.

The marker will run your programs. In Q1, the marker may change the values of the animal root shape constants to ensure you have followed the shape dependency model. For Q2, the marker will be looking to ensure that your animal moves correctly in response to mouse input. For Q3, the marker will be looking to ensure that your animal scales correctly in both directions. For Q4, the marker will be looking to see if your animal has a body part that moves towards/follows the cursor.

For all questions, the marker will be looking at your coding style. Make sure you are following the coding style and documentation guidelines.