Programming for Visual Artists

ARTS-A0701 – Digital Art 1 (2cr)

Lecture 1, 24.2.2020


  • Introductions

  • Practical things

  • Goals

  • Glitch workshop


Share (for example) your:

  • Name
  • Study background
  • Expectations and hopes about the course

Otso Havanto

  • MSc at Information Networks, finishing MA at Media Lab
  • Co-founder at Mehackit, UX-designer at Columbia Road, freelance art technician and media artist
  • Experimental audio/video instruments and electronics, digital media


  • Have you programmed before?
  • Have you done animations, VJing, computer graphincs, interactive things, etc. before?
  • Do you already have something in your own practice where you might need techniques related to this course?

Practical things

Course schedule

2op = 54h, Lectures = 36h, Independent work = 18h

  • Mon, 24.02: Introduction, discussion, Glitch intro
  • Tue, 25.02: P5.js editor, shapes, coordinates and colors
  • Mon, 02.03: Variables, Assignment 1: composition with shapes
  • Tue, 03.03: Animating shapes, if-else, random, noise and triginometric functions
  • Mon, 09.03: For-loop, Assignment 2: animation with shapes
  • Tue, 10.03: Interaction, sound
  • Mon, 16.03: Editing images and video
  • Tue, 17.03: Object oriented programming: particle system
  • Mon, 23.03: Object oriented programming: natural systems
  • Tue, 24.03: Assignment 3: personal project
  • Mon, 30.03: Assignment 3: personal project
  • Tue, 31.03: Presentations, course feedback

Tools and communication

  • p5.js Web Editor
  • Submissions by submitting a p5.js link on MyCourses
  • You can use your own laptop if you wish
  • Lecture slides and links on MyCourses
  • Do you use Slack? Should we have a Slack channel for this course?
  • It is encouraged to work together during the course and on the assignments

Programming for Visual Artists – goals

  • Fun, inspiring, sense of accomplishment
  • You have more means for self expression: You know names for things, you can estimate what is possible, what is simple and what is complex, you know what you want to learn more about, you can more easily collaborate
  • It's an introduction. The aim is not to become an engineer or learn programming professionally.
  • After the course you are confident that you can learn more if you wish
  • Although this is a practical skill oriented course I wish we can include some critical thinking about the topic's relation to our artistic practice


What is p5.js

Created by Basel (CH) based visual designer Cyrill Studer for “Baby Behold” by the band Carvel’. The graphics were generated entirely in Processing, manually controlled and performed with a midi controller and recorded through the Syphon with the Syphon Recorder. Premiere Pro was used for cutting and After Effects to edit the image in post in order the achieve the vintage look of early computer graphics.Processing libraries used included Ani, PeasyCam, Syphon and The MidiBus.


  • About generative art
  • p5.js web editor
  • Shapes, coordinates and colors