Generative Computer Graphics - Fall 2025

📂 Repository Structure

📚 Lessons

lessons/ - Contains all 14 lessons with structured content
- Each lesson includes: README.md, code/, docs/ (with images), and specific subfolders
- Lessons follow the canonical course schedule

📓 Journals

Switch to the branch journal to write your daily explorations.

🎨 Assets & Slides

assets/ - Shared images, PDFs, and resources
slides/ - Course presentation materials

📅 Course Schedule (14 × 2.5h Lessons)

Lesson 01 - Introduction & Foundations - Course intro, analog computing, p5.js setup
Lesson 02 - Grids & Iterative Patterns - Structured generative systems
Lesson 03 - Clock / Time - Generative representation of time
Lesson 04 - Drawing Machines - Generative systems as drawing tools
Lesson 05 - Reflection / Collect / Prepare - Mid-course checkpoint
Lesson 06 - Faces / Parametric Generators - Parametric design through faces
Lesson 07 - Pixels (Part 1) - Pixels as material
Lesson 08 or 09 - Second checkpoint
Lesson .. - Pixels (Part 2) - Advanced pixel transformations
Lesson .. - Advanced Composition / Mixed Media - 3D, spatial design, hybrid projects
Lesson .. - Integration & Experimentation - Merge multiple techniques
Lesson .. - Final Project Workshop - Refinement and peer review
Lesson .. - Final Presentations & Critique - Sharing and evaluation

Intro

Welcome to the classes generative design @ HSLU / Digital Ideation. This is the main page for the class, you will find a list of resources available below as well as some other information to help with this semester long workshop. It is advised to download / clone this repo at the beginning of the class and eventually keep it updated. All the assignments and their accompanying documentations should be collected by the students in the journal branch of this repo.

Suggested themes

During the class we will be looking at the core functions of p5.js and three.js, and some simple useful maths technics. We will experiment with shapes, patterns, agents, etc… We will learn how color spaces are created and how to generate them dynamically. We will then adapt what we’ve learned and play with new concepts such as noise and random values.

Class

1. What you are going to learn

Professional competences:

Understand techniques and history of generative art
Know the work of key generative artists (Molnár, etc.)
Understand algorithmic thinking and creative coding principles

Methodological competences:

Can use p5.js/three.js (or other) to create generative systems
Can document creative and technical processes effectively
Can iterate and refine artistic ideas through code

Personal competences:

Can critically analyze generative artworks
Can articulate creative decisions and artistic vision
Can engage constructively with peers’ work

2. Evaluation criteria

The Journal (40%)

Weekly entries documenting exploration, thinking, influences
Components: sketches, code iterations, reflections, references

Participation & Engagement (30%)

Attendance, in-class exercises, peer feedback

Final Project (30%)

Original generative artwork + presentation + documentation

3. The Journal - Detailed Breakdown

Read this for details information on “how to journal” and the detailled requirements for the journal.

4. Timeline

Week 1: First entry, setting up journal structure
Weeks 2-4: Building weekly documentation habit
Week 5 (Lesson 05): Mid-term journal review + group feedback session
Weeks 6-7: Continued weekly documentation
Week 8 or 9: Secondary journal review
Weeks 10-13: Continued weekly documentation
Week 14: Final presentation Final entry reflecting on entire semester journey

Tools

We will use p5.js for the front end. It’s a high level creative programming framework with an intuitive API. If some of you have used Processing before you should be confortable using p5.js.

References

📚 Resources

General

Vera Molnar Journal: Part01 - Part02
Notebook archives:
- Notebook 01 - Maths / Shapes / Pattern / Agents (Ignore Setup & Basis)
- Notebook 02 - Colors
The coding train 🌈 (course)
Nature of code (book)
Canvas demos (demo)
Webgl demos (demo)
Designing programs (course)
Shaders tutorials (tutorials)

P5

JS

Three.js

Journaling + js editors

🧑‍🎨 Inspirations

🐦 Who to follow

👾 Other

Academic integrity

(Copied from Golan Levin’s 2020 CMU class)

Use of free and open source code

Credit is perhaps the most important form of currency in the economies of commons-based peer production and open-source media arts. You are expected to cite the source of any code you use. Please note the following expectations and guidelines:

Use Libraries. In your Projects, the use of general, reusable libraries is strongly encouraged. The people who developed and contributed these components to the community worked hard, often for no pay; acknowledge them by citing their name and linking to their repository.

Be Careful. It sometimes happens that an artist places the entire source code for their sketch or artwork online, as a resource from which others can learn. The assignments professors give in new-media arts courses are often similar; you may discover the work of a student in some other class or school, who has posted code for a project which responds to a similar assignment. You should probably avoid this code. At the very least, you should be very, very careful about approaching such code for possible re-use. If it is necessary to do so, it is best to extract components that solve a specific technical problem, rather than those parts which operate to create a unique experience. Your challenge, if and/or when you work with others’ code, is to make it your own. It should be clear that forking an artwork from someone’s page on GitHub, Glitch, OpenProcessing, etc., and simply changing the colors would be disgracefully lazy. Doing so without proper citation would be plagiarism.

Informal colaborations

Our course places a very high value on civic responsibility that includes, but is not limited to, helping others learn. In this course, we strongly encourage you to give help (or ask others for help) in using various toolkits, algorithms, libraries, or other facilities. Please note the following expectations:

In this class, it’s OK to give and receive help. In fact, it’s better than OK! But students who receive help from someone else are obliged to acknowledge that person in their project report, clarifying the nature of the help that was received.
We are all teachers. Students with advanced skills are expected to help others, yet refrain from doing another’s work for them. You can usually tell when you’re about to cross the line: Ask yourself whether you are teaching someone to fish, or merely giving them the fish.
When in doubt: give credit to the people who have helped you.

Formal colaborations

The assignments in this course are primarily intended to be executed by individuals. That said, I am in favor of students collaborating if such collaborations arise organically and can be conducted safely. Please note the following expectations:

Use proper social distancing. In light of the ongoing the COVID-19 pandemic, please respect University and other health guidelines regarding personal distance. Do not share computer keyboards, sit at least 6 feet apart, etcetera.
Notify the Professor. It’s helpful for me to know who is working with whom. Students who wish to collaborate should jointly inform the professor as early as possible.
Only pairs. Unless permission is explicitly granted by the Professor, collaborations in this course are restricted to pairs of students.
Describe who did what. Written reports for collaborative projects should describe how your effort was distributed.
Only known collaborators. Your project collaborator, if you have one, must be in this class. You may not collaborate with people from outside the course (e.g. your housemate).
Avoid co-dependency. You may not collaborate with the same person (i.e. submit an assignment jointly) on more than two projects.