1701ICT Creative Coding

Week 1 - Introduction

• Course Plan

• Assessments

• A short history of procedural art

• Interaction

• p5.js Introduction

• Getting Started with p5.js

• Understanding p5.js

• p5.js examples

• Workshop 1

Week 2 - Drawing with p5.js

• Some Programming Concepts - Syntax, Functions, (Sequence, Selection, Iteration)

• p5.js Library - Drawing shapes

• Co-ordinates

• Shapes - Rectangle, Line, Triangle, Point, Arc

• Colour - Colour modes, fill colour, stroke colour, alpha

• Iteration - For loop, variables, initialisation, comparison, increment

• Using loops - Laying out shapes

• Nested loops - Grid layout

• Workshop 2

Week 3 - Animation and Interaction

• Simple Animation

• Selection

• Mouse Interaction

• Booleans

• Event handling

• Workshop 3

Week 4 - A simple game

• Working with images

• Keyboard event handling

• Making a simple game

• Drawing text

• Simple collision detection

• Random numbers

• Workshop 4

Week 5 - Multiple objects, GUI components

• Arrays

• Looping through arrays

• Animating multiple objects

• Object mouse interaction

• GUI components

• Workshop 5

Week 6 - Data

• Solving Problems

• Algorithms

• Accessing data

• Visualising data

Accessing Data

Web Services

JSON

Data types

Working with strings

blendMode()

Random numbers

Maths

while loops

Week 7 - Time

Counters and Modulo

3D graphics

Transforms

Week 8

Writing your own functions

Parameters

Return values

Scope

Week 9

More complex animations

Interpolating values

Trajectories

Particle systems

Week 10

Integrating p5.js into a web page

Accessing web elements from p5.js

Working with JavaScript outside of p5.js