Creative Coding: Assignment 1 Specifications
Instructions
● Due: Friday, 23th August 2019 at 11:59pm (Brisbane time)
● Marks: 32% of your overall grade
● Late Submissions: Late submission is allowed but Penalty applies.
The penalty is defined as is 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 will be 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, as follows: ○ medical ○ other (e.g., family or personal circumstances, employment-related circumstances, unavoidable commitments).
● Individual Work: You must complete this assignment individually.
Overview
The purpose of the assignment is to assess your ability to implement simple interactions, shapes and objects using JavaScript and p5.js. You need to finish four following questions.
1. Question 1 (8 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
2. Question 2 (8 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 So LeWitt using p5js as following.
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. (4 marks) b. Draw a wall with “irregular wavy color bands”. Hint: you can use curveVertex and random functions in p5js library. (4 marks)
3. Question 3 (8 marks)
In mathematics, a Lissajous curve, also known as Bowditch curve, is the graph of a system of parametric equations which describe the complex harmonic motion (http://mathworld.wolfram.com/LissajousCurve.html). In this exercise, you need:
a. Write a p5.js program to draw a grid like following image. (4 marks)
b. Add animation for the curve like the sample in this link. (4 marks)
4. Question 4 (8 marks)
In order to attract new students, we need your helps to design a banner to promote the 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.
