This is an introductory level computer science course assignment, you need to to code a few general drawings on processing. U can download processing from processing.org , if you dont have it already.
ASSIGNMENT 1 COURSE NUMBER: COMP 1010 COURSE TITLE: Introduction to Computer Science 1 TERM: Fall 2021 1 Assignment 1: ClipArt Copy DUE DATE : OCTOBER 1, 2021 AT 11:59 PM Notes: • Name your sketches using your name, the assignment number, and the question number, exactly as in this example: LastnameFirstnameA1Q1. (if you have multiple first or last names, camelCase them) • Your programs must run upon download to receive any marks. • Submit one PDE file for each question. • After the due date and time assignments may be submitted but will lose 2% of marks per hour late or po rtion thereof. • Assignments must follow the programming standards document published on the course website on UMLearn. • 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: Static ClipArt Copy – [10 marks] You should be able to do this question afte r Week 2 in the course Background Information: ClipArt (https://en.wikipedia.org/wiki/Clip_art ) are pieces of pre -made images often used in computer documents, the name comes from the act of physically clipping out images from printed works. For this assignment you will need to find a ClipArt image (or any other simple image you have permission to use) and create a ( very ) simplified copy using Processing. Below is an example: Here are various websites where you can find free ClipArt, there are many more: • http://clipart -library.com/ • https://www.clipart.com/ • https://openclipart.org/ • https://pixabay.com/images/search/clipart/ • https://stock.adobe.com/ca/collections/Ue8IAIqPY55R9VcilM5mo17Hm53J0U3L Original ClipArt Simplified Copy ASSIGNMENT 1: Automobile DEPARTMENT AND COURSE NUMBER: COMP 1010 2 • https://stock.adobe.com/ca/search?load_type=search&native_visual_search=&similar_ content_id=&is_recent_search=&search_type=usertyped&k=clipart Tips: • Read all of the Questions and what will be needed, especially Question 4, This will save you some trouble later on. • Don’t spend too long trying to find the “perfect” ClipArt. • The ClipArt copy does NOT need to be exact, you can and should change things. • You can also c opy just a portion of a ClipArt. • Note down a few core features of the clipArt that you want to reproduce and focus on those only. • The cake example above has these core features: Cake Base, Red Top, Lit Candles, and Blue Icing dots. • The exact number of cand les and blue dots was reduced to simplify the image, and the flames were reduced to single ellipses. • Make a “budget” of shapes, if a portion of the image is taking too many shapes, simplify it! Write a non -active Processing program (containing no setup() or draw() functions) which will reproduce in the canvas a ClipArt of your choice. You can choose to reproduce any type of ClipArt you like. Be creative. The rules for the clipArt copy are: • Follow the Shape Dependency Model (more details below) • Include 6 t o 16 shapes (ellipses, rectangles, lines or other shapes). The sample clipArt copy shown above uses 12 shapes (5 ellipses, 2 lines and 4 rectangles). • Your script must contain: • at least one ellipse, • at least one rectangle, • at least one line, triangle or q uad (shapes defined only by coordinates) • It should contain at least 3 different colours. • It can be a pretty basic copy, even more basic than the one shown. If you can reproduce an image resembling your ClipArt with 6 shapes, that’s fine. • You don’t h ave to be a great artist. Points are not awarded on artistic merit. • Don’t make it too complex. Stick to the limit of 16 shapes. • You must use a 500 x 500 canvas for this question. • Hint : in Q3, you are going to scale the clipArt copy in the horizontal and v ertical directions. Because of this, you should avoid using circles/squares and instead only use ellipses and rectangles. • The clipArt design you create must be medium to large and use up a good proportion of the canvas, as in the example. • It should be roug hly centred in the window. • When submitting, also submit the ClipArt that you have used. ASSIGNMENT 1: Automobile DEPARTMENT AND COURSE NUMBER: COMP 1010 3 In Questions 2 and 3, your clipArt copy 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 po sition 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 shape’s position, all the other shapes follow along automatically. Also, if you make t he 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 clipArt copy. Further instructions: Define constants for your root shape. These can (but don’t have to) depend on the canvas width and height. Hint : use a rectangle or ellipse as the root shape of your clipArt copy, 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 clipArt copy, but using one of those for the root shape would make this assignment MUCH more difficult. Fo r 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 vari able 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 ca n have something like this: leftCandleX = baseX – baseWidth /3; ellipse( leftCandleX , ….) Use good, descriptive variable names that highlight the difference between locations and dimensions (leftCandleX, which tells where the left candle is, vs. candleWi dth, which says how wide the candle 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 cake’s candles are both at the same height, we need leftCandleX, rightCandleX and candleY (only one variable for candle 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. ASSIGNMENT 1: Automobile DEPARTMENT AND COURSE NUMBER: COMP 1010 4 To give you a sense of what to expect, the code to draw the cake 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 ClipArt Copy [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 f rom Question 1 into an Active Processing program, with the clipArt copy centered on the canvas. To do this, follow these instructions: 1. Create the usual setup() and draw() functions. Create a drawCopy() function (or a similar name). 2. Move all of your existin g code from Question 1 into the appropriate place in these new functions. All of the code that draws your clipArt copy should go into the drawCopy() function, not into the draw() function directly. The functions should call each other as needed. 3. You will n eed to change the two constants that define the position of the root shape into global variables. 4. Create a moveCopy() function (or use a similar name). The moveCopy() function should use the mouse cursor position to set the X and Y values for the location of your clipArt copy. The center point of your clipArt copy’s 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 clipA rt copy should move together, underneath the cursor (see the Q2 demo). Q3: Scale the ClipArt Copy [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 t he provided code, which will give you two sliders. The vertical slider will be used to control the vertical scaling of your clipArt copy, and the horizonal slider will be used to control the horizontal scaling of your clipArt copy. Right now, the sliders s hould move if you drag them with your cursor, but they are not controlling anything. ASSIGNMENT 1: Automobile DEPARTMENT AND COURSE NUMBER: COMP 1010 5 Make the following changes: 1. Insert the function you created in Q2 to draw your clipArt copy. 2. In this question, the clipArt copy doesn’t move, but it does scale. You will need to make the root shape positions global constants in this question. And the root shape’s width and height will need to be turned into variables, since they are going to change. Update the code so that your clipArt copy shows up in the center of the sc reen, looking just like it did in Q1. Note that the sliders have no effect on the clipArt copy yet. 3. Create constants that define a minimum and maximum size for your 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 updateScaleX() and the updateScaleY () 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 up dateYScaleFactor() 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. T o 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 scaleCopy() 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 clipArt copy. Once you have this working, your clipArt copy should scale both vertically and horizon tally using the sliders, as shown in the demo code. To give you a sense of how this should work, if you have a cake base as the root shape of your clipArt copy , and you have set the minimum cake base width to be 50 and the maximum cake base width to be 250, and the horizontal slider is halfway across, the x scale should be 0.5 (50%) and the clipArt copy cake base 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 t he 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. ASSIGNMENT 1: Automobile DEPARTMENT AND COURSE NUMBER: COMP 1010 6 Q4: ClipArt Copy 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 clipArt copy so that that part appears to ‘follow’ the cursor around the screen. In the Q4 demo code, we have added movement to the candle flames , which appears to follow the cursor. The flames are drawn as normal but the their position is influenced by the distance between the ir original position and the current mouse position. In this Question you have a fair amount of freedom. You could make flames move toward the cursor, make a plant leaf move , or a ClipArt animal tail move. You just h ave to make some part of the clipArt copy visibly move tow ard 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. Also submit the ClipArt that you have used, it will not be marked but used for comparison 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 clipArt copy root shape constants to ensure you have followed the shape dependency model. • For Q2, the marker will be looking to ensure that your clipArt copy moves correctly in response to mouse input. • For Q3, the marker will be looking to ensure that your clipAr t copy scales correctly in both directions. • For Q4, the marker will be looking to see if your clipArt copy has a 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.