Homework 1 - Drawing with p5.js

• Learn about p5.js, parametric drawing, and basic Javascript.
• Live demo

General Description

This assignment is your first dive into Javascript programming. You must make a program that draws several flags using the p5.js library.

Getting started

Your code should be written in Javascript using the template files provided in this repository. Refer to the p5.js documentation for learning how to draw. Start looking under the “Shape” section.

1. You will find several files in this repository. Your code goes inside the main.js file. To test your code, open index.html in the browser.

2. The main.js template file given to you is not empty. At the top, you will see some constants (flags names inside of a list, as well as the number of ROWS and COLUMNS used for the drawing layout). The bottom part of the file also contains some code (the functions setup, draw). You do not need to change these.

3. You only need to complete the functions to draw different country flags (Italy, Kuwait, Liberia, Cuba, Europe, and the USA) and the function drawFlag that wraps all of these. Start by changing the code where you see the PLACEHOLDER comment. Feel free to declare variables (local or globals) or to create helper functions.

4. Each of the flag functions has four parameters: x and y are the locations on the screen of the left corner of the flag, width and height are the size of the flag. Make sure to draw the flag at the correct place and with the correct dimensions. HINT avoid hard-coding numbers with fixed sizes and positions - remember that I will test your code with different flag sizes and locations.

5. Finally, the drawFlag function takes five parameters:

function drawFlag(flag, x, y, width, height) {
  // PLACEHOLDER
}

The parameters x, y, width and height are the same as for the functions to draw flags. The parameter flag is a string corresponding to one of these values: 'ITALY', 'CUBA', 'KUWAIT', 'LIBERIA', 'USA', 'EUROPE'. These functions take the name of a flag and its location/dimensions and call the correct function to draw the flag.

Other hints and info

• The canvas size is initially set to 600x600, but when I test your code, it might change, but the ratio will remain the same (1:1). The location of the flags can also change.

• Flags do not need to be perfectly identical to mine or the original specifications. The more accurate, the better, but you do not need to be pixel-perfect or color-perfect. Note that flags like the one of the USA do not preserve the original aspect ratio, so you might need to tweak the position of the stars. You can use the image below as a reference, but, again, you can tweak the position/size of the stars manually.

• You can use any drawing function in the p5.js reference, except those under Transform in the reference page (rotate, translate, scale, etc... you cannot use those). You can create your functions if you want. Here is a tip: for drawing the stars, take a look at the beginShape, vertex, and endShape functions.

How to perform rotations?

For the Europe flag, you might want to display an object in a circle. Given coordinates xy around the origin (0,0) with an angle α you can obtain the coordinates xy' for the next object using the formula here on the side. However, remember that you do not want to draw objects around the origin but instead around the center of the flag. Also, note that in the image above, the variables xy and xy' are two distinct sets of variables (they are two different points!). Keep in mind that in p5.js the top-left corner is at coordinates 0,0, and the bottom-right corner of the window is at location width and height.

The functions sin and cos are standard functions in p5.js, so you can simply use them like sin(α) or cos(α), where α is the angle you want to rotate expressed in radians. To convert between radians and degrees, you can use the functions radians and degrees. For example, radians (90) transform 90 degrees in radians (which is HALF_PI). The opposite operation is degrees(HALF_PI). Alternatively, do all your math directly in radians (where TWO_PI are 360 degrees).

About grading

The maximum score for this assignment is 100 points. If the program does not compile (e.g., not a valid Javascript file), the score is 0. If it runs, the score is inversely proportional to the number of errors. If the code has runtime errors (crash), there is a 20 points penalty, plus a penalty for any additional part that cannot be checked.

Coding style might also be considered in grading - e.g., unreadable code or code that is very difficult to understand will be rated lower. The code will be checked by the TA.

Heuristics

• Italy, Kuwait: 10%
• Cuba, Liberia: 15%
• USA: 25%
• EU: 30%
• Works with different sizes: 20%

How to submit

1. After completing your code, make sure to fill up the SubmissionNotes with your basic info and indicate whether you received any help. Feel free to add any relevant information.
2. Zip the folder of this repository containing your solution.
3. Submit the homework using the class submission system. Choose HW1.
4. For any problem, feel free to contact the professor or TA via Discord.

Notes about submission

• Only submissions made with the system will be considered (e.g., no direct emails to TA or Prof).
• You can re-submit as many times as you want: the last submission only will be considered.
• Submissions after the deadline (even a few minutes) will receive a penalty of 20%. After 24 hours from the deadline, you will receive 0 points.
• Keep a screenshot that proves your completed submission.