Assignment 1 1701ICT Creative Coding Griffith College This assignment should be submitted in two milestones: Milestone 1: Questions 1, 2, 3, 4 (due end of Week 4) Milestone 2: Questions 5, 6, 7 (due end of Week 6) Instructions ? Marks: 40% of your overall grade ? Late Submissions: Late submission is allowed but a penalty applies. The penalty is defined as the reduction of the mark allocated to the assessment item by 5% of the total weighted mark for the assessment item, for each working day that the item is late. A working day is defined as Monday to Friday. Assessment items submitted more than five working days after the due date will be awarded zero marks. ? Extensions: You can request for an extension of time on one of two grounds; ? medical ? other (e.g., family or personal circumstances, employment-related circumstances, unavoidable commitments). All requests must be made through the portal. ? Individual Work: You must complete this assignment individually. ? Presentation: You may be asked to present/demonstrate your work in your Week 7 workshop ? Other: This assignment is a mandatory pass component. Overview The purpose of the assignment is to assess your ability to implement simple interactions, shapes and objects using JavaScript and p5.js. Each Question should be submitted on L@G in a separate .js file (titled q1.js, q2.js etc.), but you do not need to submit html and css files. Some of the questions will require you to investigate some concepts outside of the lecture notes. Please make sure that all code that you submit is your own and is not taken/copied from anywhere else. Question 1 (4 marks) Write the code to reproduce this: The exact colour used is not important, but try and get close. Use a total canvas width of 500px, and spread the squares out evenly. Hint: there is an alpha change. Question 2 (4 marks) Using the following data and p5js to draw a pie chart about favorite types of movie.

Type	Count
Comedy	4
Action	5
Romance	6
Drama	1
SciFi	4

You should annotate each slice of the pie chart with its label and percentage. Question 3 (6 marks) For this question, you will create a race track. Set the background colour to green for grass. Draw a thick stroke (e.g. 40 pixels) gray ellipse to represent the road which is 100 pixels high and 200 pixels wide, centred in the canvas. Inside the gray road draw two thin (e.g. 1 pixel thick) yellow lines which are very close to each to represent centre lines on a road. Create two small circles (e.g. 10 pixels diameter) and place them on each side of the road. You should position the circles using the angular arithmetic used in the last slide of 3.4 Math functions. Animate the angle of the two circles at different speeds, e.g. one circle\'s angle increments by 1 while the other increments by 2 for each call of the draw() function. Question 4 (6 marks) For this question, you should create a spinning Yin-Yang symbol. It must be easy to change the size and position of the symbol to anywhere on the canvas. As a hint, the Yin-Yang symbol is made up of 2 half circles (the big black and white halves), 2 medium circles, and 2 small circles. You may find it easier to draw a static yin-yang first, then add the rotation. Make sure the positions of the circles are all based around the same starting position. You will need to use the geometry functions discussed in 3.4 to make the symbol rotate. This is achieved by moving the circles through an arc (not by actually rotating the drawing). Question 5 (6 marks) Sol LeWitt is a famous American artist. He came to fame in the late 1960s with his wall drawings and \"structures\" (a term he preferred instead of \"sculptures\") but was prolific in a wide range of media including drawing, printmaking, photography, painting, installation, and artist\'s books (https://en.wikipedia.org/wiki/Sol_LeWitt). In this exercise, you are asked to recreate the works of Sol LeWitt using p5js as per the below instructions. a. Six-part drawing. The wall is divided horizontally and vertically into six equal parts. 1st part: On red, blue horizontal parallel lines, and in the center, a circle within which are yellow vertical parallel lines; 2nd part: On yellow, red horizontal parallel lines, and in the center, a square within which are blue vertical parallel lines; 3rd part: On blue, yellow horizontal parallel lines, and in the center, a triangle within which are red vertical parallel lines; 4th part: On red, yellow horizontal parallel lines, and in the center, a rectangle within which are blue vertical parallel lines; 5th part: On yellow, blue horizontal parallel lines, and in the center, a trapezoid within which are red vertical parallel lines; 6th part: On blue, red horizontal parallel lines, and in the center, a parallelogram within which are yellow vertical parallel lines. The horizontal lines do not enter the figures. (3 marks) b. Draw a wall with irregular wavy color bands. Hint: you can use curveVertex and random functions in p5js library. (2 marks) Challenge (1 mark): Make the drawings scale with the size of the canvas. This can be done by keeping track of all required positions as a percentage of the part of the drawing they are in, and then multiplying that percentage by the size of the drawing and offset of the part they are in. Question 6 (6 marks) In mathematics, a Lissajous curve, also known as Bowditch curve, is the graph of a system of parametric equations which describe complex harmonic motion (http://mathworld.wolfram.com/LissajousCurve.html). In this exercise, you need to: a. Write a p5.js program to draw a grid like following image. (2 marks) b. Add animation for the curve like the sample in this link. (4 marks) Question 7 (8 marks) In order to attract new students, we need your helps to design a dynamic banner to promote this course and p5js. You are free to choose shapes, colors, animations but your implementation needs to satisfy these following constraints: a. Implement using p5js. b. Include at least 2 custom functions. c. Include at least 1 loop. d. Include animation. e. Harmony in design.