image.deconstruct()

image.deconstruct() marks the start of my p5 explorations that I've shared online. I drew inspiration from a project by Patrik Hübner on Instagram and aimed to expand on the idea by incorporating the matter.js physics library. Due to the fact that it was the first of my works which I shared online, I gained valuable insights into developing responsive p5 tools and navigating challenges that arise when creating a website compatible with various platforms and browsers.

The tool can be tried out by following this link

InDesign grid script

To create the documentation for my 4th semester course Make your own Tools (more on this in the other projects) I created an analogue algorithm that divides any given area into a grid. This algorithm could be executed using just a dice, a ruler, and a pen. Knowing that scripts could be created for most Adobe products, I challenged myself to translate my algorithm into an InDesign script. In the images below, you can see how I utilized the script to generate a new, random grid for each page

You can download the script under this link!

The first two iterations

The algorithm

1. Choose any size for your area, but bigger areas (like A4) work best.

2. Roll the dice and divide the height of your area by the number you have rolled (e.g. 10cm / 3 = 3.33cm).

3. Draw a line in the calculated distance and parallel to the top edge of your area.

4. Now, focus on the bottom part. Repeat steps 2 and 3 four more times, dividing the new bottom areas.

5. Repeat this process for vertical lines.

6. You've now got an area divided into a grid.

The cover of my documentation

Muppet Color Picker

The Muppet Color Picker was a project done for the course Make your own Tools in my 4th semester. The job of the course was to create three tools with a visual output, one analogue, one digital and one as a set of instructions. This one is the digital tool. It started when I discovered the drawingContext-function of p5js which allows to draw gradients easily. To get some beautiful colors, I used this particular image of the Muppetshow which kind of became a meme online.

The tool can be tried out by following this link.

Selected pixels..

..represented as a gradient

Creative Coding

Since my first encounter with computers as a young boy, I've explored different programming languages in various domains. However, it wasn't until I started my studies that I found my groove. In my first semester, I discovered Processing, and thanks to my pre-existing coding knowledge, I made significant progress quickly. Over the years, I've transitioned to p5.js and also got into web applications with JavaScript. When working on personal projects, I typically don't start with a specific image or idea. Instead, I begin with a new function or library that I want to experiment with. Creative Coding has significantly enhanced my creative problem-solving skills and deepened my understanding of technology.

KD Lounge Support

The KD Lounge is a public lecture series about design and related disciplines organized by communication design students of HTWG Konstanz. For two seasons, I was able to support the teams. In the 20th season, themed power of connection, they explored how people are connected through hobbies and shared interests. They selected 100 objects that could relate to each other, and I provided a script to arrange them randomly in a grid.

To financially support the Lounge, each new season kicks off with the Lounge Supporter Club, a party event hosted by the Lounge. For the 21st season, themed chaos kitchen, I created a looping 3D animation in Blender to be displayed at the event.

A small collection of private 3D projects

Rendered in blender with cycles, mostly using quixel assets

Mahagoni Kollektiv

Since 2023 I'm part of the Konstanz based Mahagoni Kollektiv. We organise parties and events all around electronic music. In our design team I am responsible for 3D animations which we use on instagram and as visuals on events

Frames

Frames is an ongoing series showcasing sets recorded at our events, capturing the essence of the featured artists and their unique vibes. Most of the time, they just have a vague idea in their head how they want their video to look. This makes working on Frames an enjoyable and exciting project, where I have lots of freedom and room to experiment

Credits

Pleasure	Graphics by Annie
Raveyard	Typo by Sophia
Rooted	Typo by Josh
Frames	SD-Card Graphics by Josh
Afterparty	Typo by Josh

Mahagoni x StuVe

In the last quarter of 2023, Mahagoni Kollektiv collaborated with StuVe.Konstanz, the student representation of the University of Konstanz, on two occasions. For these events, I crafted two 3D animations, utilized on Instagram and as visuals during the events.

Splice Dice

Splice Dice was the analog tool for my course Make your own Tools. It consists of four stamping dice that can be used to fill a pre-generated grid. The goal was to create a physical toy that explains what generative art is and how it works. The grid resembles a maze, which you fill out by using one dice for straight passages and one for curves. When the maze is completely filled out, there are still some dead ends that you fill out with the last two dice. In order to experiment with the tool and create your own rules, one of the dice resembles a regular dice with numbers ranging from one to six.

Blender	Expert
p5.js	Expert
Creative Cloud	Intermediate
HTML and CSS	Intermediate
Javascript	Basics
Arduino	Basics

German	Fluent
English	B2
French	A2

2020	Highschool diploma
2021 – Now	Studies of communication design at HTWG Konstanz
2021 – 23	Teaching basics of p5.js
2023 – Now	Freelancing

Christoph Seibel

Gallery 1/9

show next