Otso Havanto

Programming for Visual Artists

Learn the basics of programming by creating screen-based visuals with Java Script and the p5.js library. P5.js is a Java Script library similar to the popular Java-based Processing. The emphasis of this course is to introduce techniques for creating generative screen-based visuals

Aalto Spring 2023 schedule:

  • Mon, 27.2: Introduction, P5.js editor, shapes, coordinates and colours
  • Tue, 28.2.: Variables, randomness
  • Mon, 6.3: Animating with trigonometric functions
  • Tue, 7.3: Animating with noise
  • Mon, 13.3.: If-else, for-loop
  • Tue, 14.3.: For-loop, noise
  • Mon, 20.3.: Audio input, Interaction
  • Tue, 21.3.: Images and video
  • Mon, 27.3.: Recap, personal project
  • Tue, 28.3.: Personal project
  • Mon, 3.4.: Personal project, course feedback
  • Tue, 4.4.: Presentations / exhibition?

Chapters:

Introduction

Course introduction and practical things

Lecture 1: Starting with p5.js - coordinates, shapes and colors

Getting started with p5.js

Lecture 2: Randomness and variables

Revisiting shapes and coordinates, introducing randomness, color modes and variables

Lecture 3: Movement

Animating with trigonometric functions, introducing translations

Lecture 4: Noise

Introducing noise to the animation

Lecture 5: For loops and if statements

Introducing for-loops and if statements

Lecture 6: Nested for-loops and grids

Rows and colums with nested for-loops

Lecture 7: Images and video

Manipulating images and video in p5

Lecture 8: Audio and interaction

Audio visualization and other interaction with p5.js

Course project

Instructions and tips for the course project

Extra: 3D with p5

3D sketches with WEBGL context

Extra: Exporting P5 sketches

Creatte printable files or videos of you p5 sketch

Extra: Other resources

Resources and links for next steps