init

.devcontainer/devcontainer.json

@@ -0,0 +1,41 @@
+{
+	"name": "ID311",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/base:ubuntu",
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {}
+	},
+	"customizations": {
+		"vscode": {
+			"settings": {
+				"workbench.colorTheme": "Visual Studio Light",
+				"workbench.iconTheme": "material-icon-theme",
+				"editor.defaultFormatter": "esbenp.prettier-vscode",
+				"editor.snippetSuggestions": "top",
+				"editor.suggestSelection": "first",
+				"editor.formatOnSave": true,
+				"prettier.singleQuote": true,
+			},
+			"extensions": [
+				"esbenp.prettier-vscode",
+				"PKief.material-icon-theme",
+				"yzhang.markdown-all-in-one",
+				"ritwickdey.LiveServer",
+				"mhutchie.git-graph",
+				"pranaygp.vscode-css-peek",
+				"naumovs.color-highlight",
+				"mechatroner.rainbow-csv",
+				"svelte.svelte-vscode"
+			]
+		},
+	},
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "sudo apt update",
+	// Configure tool-specific properties.
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	"remoteUser": "vscode"
+}

.gitignore

@@ -0,0 +1,5 @@
+.git
+.prettierrc
+node_modules
+.DS_Store
+.vscode

README.md

@@ -0,0 +1,88 @@
+# Homework 1 - Drawing with p5.js
+
+- Learn about _p5.js_, parametric drawing, and basic Javascript.
+- _[Live demo](http://hwdemo.prototyping.id/hw1)_
+
+## General Description
+
+<p align="center">
+<img src="assets/main.png" height="300" />
+</p>
+
+This assignment is your first dive into Javascript programming. You must make a program that draws several flags using the [p5.js library](https://p5js.org).
+
+## Getting started
+
+Your code should be written in Javascript using the template files provided in this repository. Refer to the [p5.js documentation](https://p5js.org/reference/) 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:
+
+```js
+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.
+
+<p align="center">
+<img src="assets/usa.jpg" height="300" />
+</p>
+
+- You can use any drawing function in p5.js, **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.
+
+<p align="center">
+<img src="assets/rotations.png" height="250" />
+</p>
+
+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
+
+<p align="center">
+<img src="assets/submission.png" width="600" />
+</p>
+
+1. After completing your code, make sure to fill up the [SubmissionNotes](SubmissionNotes.md) 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](https://homework.designware.xyz). 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.

SubmissionNotes.md

@@ -0,0 +1,17 @@
+# Homework submission form
+
+1. **Your name**: NAME
+
+2. **KAIST ID**: 0000000
+
+3. **Email**: YOUR_EMAIL@kaist.ac.kr
+
+---
+
+## Description
+
+Feel free to use this space to add any relevant information. You can add, for example:
+
+- Links to images/Video/Additional material\*\*: [example](http://...)
+- List the people/resources you received help from: ...
+- Anything else you want to say about how to use your softare, issues, or limitations of your work

index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="js/p5.js"></script>
+    <script src="js/p5.dom.min.js"></script>
+    <script src="js/p5.sound.min.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <meta charset="utf-8" />
+  </head>
+
+  <body>
+    <script src="main.js"></script>
+  </body>
+</html>

main.js

@@ -0,0 +1,70 @@
+/*
+  DI311 Homework 1  
+  Author: Your name (KAIST ID)
+*/
+
+let flags = ['ITALY', 'CUBA', 'KUWAIT', 'LIBERIA', 'USA', 'EUROPE'];
+const COLUMNS = 2;
+const ROWS = 3;
+
+function drawFlag(flag, x, y, width, height) {
+  // PLACEHOLDER
+}
+
+function italy(x, y, width, height) {
+  // PLACEHOLDER
+}
+
+function simpleTriangle(x, y, width, height) {
+  // PLACEHOLDER
+}
+
+function kuwait(x, y, width, height) {
+  // PLACEHOLDER
+}
+
+function liberia(x, y, width, height) {
+  // PLACEHOLDER
+}
+
+function cuba(x, y, width, height) {
+  // PLACEHOLDER
+}
+
+function europe(x, y, width, height) {
+  // PLACEHOLDER
+}
+
+function usa(x, y, width, height) {
+  // PLACEHOLDER
+}
+
+// DO NOT CHANGE ANY CODE UNDER THIS LINE
+
+function setup() {
+  createCanvas(600, 600);
+  flags = shuffle(flags);
+}
+
+function draw() {
+  background(0);
+  noStroke();
+  const flagWidth = width / COLUMNS;
+  const flagHeight = height / ROWS;
+
+  let x = 0;
+  let y = 0;
+  for (let i = 0; i < flags.length; i += 1) {
+    x = flagWidth * (i % COLUMNS);
+    y = flagHeight * parseInt(i / COLUMNS);
+
+    drawFlag(flags[i], x, y, flagWidth, flagHeight);
+    // draw rect
+    stroke(255);
+    strokeWeight(2);
+    noFill();
+    rect(x, y, width, height);
+  }
+}
+
+const sketch = window;

style.css

@@ -0,0 +1,21 @@
+html,
+body {
+  height: 600px;
+}
+
+body {
+  display: -ms-flexbox;
+  display: -webkit-box;
+  display: flex;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+}
+
+canvas {
+  display: block;
+}