0 Creative Programming 2

Materials for the course ›Creative Programming‹
Universität für künstlerische und industrielle Gestaltung, Linz
Abteilung für Mediengestaltung Lehramt
Lecturer: Andreas Pirchner
Summer semester 2020

Structure / Quick overview

Introduction to Creative Programming in p5.js

Lecture 1 (03.03.2020): Basics and V-isuals(4,5h)
What can Creative Programming be? – Setup of a p5-Sketch with HTML, CSS, JS – Basic concepts: variables, recursion, branching

Lecture 2 (17.03.2020): OOP / Visualizing Data(4,5h)
Visualizing Data – Retrieving Real-Time Data vie Internet – Object Oriented Programming – Modeling Dynamic Systems

Lecture 3 (31.03.2020): Randomness (4h,5)
Random Walks – Perlin Noise – Chance Operations in P5

Lecture 4 (21.04.2020): Algorithms & Recursion (4,5h)
Recursion – Fractals – Sierpinski Triangle - L-Systems and Trees - Circle Packing Algorithm

Lecture 5 (12.05.2020): Sound / Work on final project/assignment (4h,5)
amplitude analysis – FFT-analysis – mapping sound parameters to visuals – using mic-input for visuals – working with open data sources

List of Assigments

Session 2. OOP/Visualizing Data:
Expand the "Experimental growth" Sketch (this one) by a timeline as seen in the Washington Post article (see image above). Take into account the following aspects:

(1) The timelime shows the amount of infected individuals. So we need a variables that keeps count of how many people are infected or not infected.
(2) People get healthy again after a certain time. Adapt the sketch in a way that people get healthy again after about 8 seconds.

Draw the timeline chart with the values of the variable in real time (of the sketch).

For the ambitious:

(1) Implement that recovered individuals are immune. How does the timeline chart change?

(2) Implement a slider to adjust the amount of social distancing (An explanation of how to use sliders can be found here ). Observe, how the curve of the timeline chart changes.

(3) Implement a variable that holds the probability for infection when to individuals meet. Implement a slider to adjust the variable.

Session 3. Randomness: Perlin Noise and Random Walks

Create a sketch in which an interesting structure is created by a random walk movement that is controlled by Perlin-Noise. Here is the coding challenge for it: Link

Session 4. Random Sierpinski Triangle
Have a shot on the Sierpinski Triangle! Can you come up with a version of it, that doesn't divide the triangle not in the middle of each its sides but choses a random point?

Session 5. Sound/Visuals (final project)
Choose a piece of music and come up with an exciting visualization by using FFT analysis.

Sieh dir diesen Beitrag auf Instagram an

Ein Beitrag geteilt von Geoffrey Bradway (@chromatocosmos) am

Sieh dir diesen Beitrag auf Instagram an

Ein Beitrag geteilt von Kjetil Golid (@kgolid) am


This course offers an introduction to p5.js and a framework that allows to develop basic mobile browser apps. Techniques an strategies are presented in an art-related context and supported by examples from artistic practices.
Exercises and realizing own ideas help comprehending the presented concepts.

Sieh dir diesen Beitrag auf Instagram an

Ein Beitrag geteilt von Third Vision (@thirdvision.co) am