4h

Topics: Introduction to P5.js. Drawing basic elements with P5: how to work with geometry, colors, shapes; basic interaction. Loops and grids. Geometric patterns.

Coding train video: https://www.youtube.com/watch?v=o9sgjuh-CBM

Processing tutorial (relevant, different are only push() and pop() unctions): https://processing.org/tutorials/transform2d

At home: make sure you can recreate the exercises from class (red/salmon slides).

For JavaScript, the best documentation out there is https://developer.mozilla.org/en-US/docs/Web/JavaScript.

Documentation for p5.js is available here: https://p5js.org/reference/.

If you already knew Processing, look at the differences in this Coding train: https://www.youtube.com/watch?v=AmlAiKsiy0o (part 1 of 3). 

Later, you might consider working in VS Code. There are plugins available which will make it super easy.

First homework assignment

Deadline: 14.10.2024 (including)

Your task is to create a sketch that generates a set of artworks of geometric pattern (for example, for a new desktop background). The emphasis of this project lies on the generative creation, i.e. your sketch is expected to create multiple artworks. This can be achieved by using randomness, input data, mathematical functions or user interaction such as mouse movement. There is no limitation to your ideas.

Submission

To export your artworks as images, use function save(). In case you are interested in postprocessing in external editor, you can try vector format (SVG) too.

Download the code from the P5 editor (top-left corner: File > Download). 
Add to the downloaded zip:

• link.txt: the link to the code, a commentary if you want
• best images - at least 3
• videos if it's animated/interactive (use Xbox Game Bar on Windows - best option, or p5.capture library)

Upload to IS vault: