{"id":153,"date":"2023-10-14T13:45:24","date_gmt":"2023-10-14T11:45:24","guid":{"rendered":"https:\/\/www.jhermann.digital\/?page_id=153"},"modified":"2025-06-12T14:00:53","modified_gmt":"2025-06-12T12:00:53","slug":"creative-coding","status":"publish","type":"page","link":"https:\/\/www.jhermann.digital\/index.php\/projekte\/creative-coding\/","title":{"rendered":"Creative Coding"},"content":{"rendered":"\n
\n

Seit einem Seminar bei Prof. Dan Verst\u00e4ndig an der Otto-von-Guericke-Universis\u00e4t-Magdeburg mit dem Titel „Critical Code Studies“ im Jahr 2018 habe ich mich mit der Anwendung Processing<\/a> und sp\u00e4ter auch mit p5.js<\/a> besch\u00e4ftigt. Ich habe mich bereits vorher mit anderen visuell orientierten Programmiersprachen auseinandergesetzt, doch mit Processing er\u00f6ffneten sich mir ganz neue M\u00f6glichkeiten. Hier habe ich einfach mal ein paar Creative Coding Projekte gesammelt, die ich in der Vergangenheit programmiert habe. Auf meinem Open Processing Profil<\/a> finden sich weitere p5.js Sketche.<\/p>\n\n\n\n

Functions Describe the World Thing<\/h2>\n\n\n\n

Ein gemeinsam mit generativer KI (Gemini) erstelltes Projekt, das ein Kamerabild in eine Reihe oszillierender Kurven umwandelt. Zuvor habe ich etwas vergleichbares ohne Input und auch ohne Interaktion gemacht und habe mich gefragt, ob es funktionieren w\u00fcrde. \u00dcber das Ergebnis war ich sehr gl\u00fccklich und der Effekt hat genau das r\u00fcber gebracht, was ich mir davon gew\u00fcnscht habe. <\/p>\n\n\n\n

Link zu Open Processing<\/a><\/p>\n\n\n\n

\n
Code<\/summary>
\n


let capture; \/\/ Variable to hold the camera input<\/p>\n\n\n\n

let phaseOffsets = []; \/\/ 2D array to store the current phase offset for each point<\/p>\n\n\n\n

\/\/ Set the vertical distance between lines<\/p>\n\n\n\n

const lineSpacing = 4;<\/p>\n\n\n\n

\/\/ Set a CONSTANT amplitude for the waves.<\/p>\n\n\n\n

const amplitude = 3.5;<\/p>\n\n\n\n

\/\/ Define a base frequency for the underlying wave structure.<\/p>\n\n\n\n

const baseFrequency = 0.05;<\/p>\n\n\n\n

\/\/ Smoothing factor. A smaller value means slower, smoother transitions.<\/p>\n\n\n\n

const smoothing = 0.08; <\/p>\n\n\n\n

\/**<\/p>\n\n\n\n

 * p5.js setup function, runs once at the beginning.<\/p>\n\n\n\n

 *\/<\/p>\n\n\n\n

function setup() {<\/p>\n\n\n\n

const canvasSize = min(windowWidth, windowHeight);<\/p>\n\n\n\n

createCanvas(canvasSize, canvasSize);<\/p>\n\n\n\n

\/\/ — CAMERA SETUP —<\/p>\n\n\n\n

capture = createCapture(VIDEO);<\/p>\n\n\n\n

capture.size(width, height);<\/p>\n\n\n\n

capture.hide();<\/p>\n\n\n\n

\/\/ — INITIALIZE PHASE OFFSETS ARRAY —<\/p>\n\n\n\n

\/\/ Pre-populate the 2D array to store the smoothed frequency values.<\/p>\n\n\n\n

for (let y = 0; y < height; y += lineSpacing) {<\/p>\n\n\n\n

let rowz = [];<\/p>\n\n\n\n

for (let x = 0; x < width; x += 2) {<\/p>\n\n\n\n

rowz.push(0);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

phaseOffsets.push(rowz);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

}<\/p>\n\n\n\n

\/**<\/p>\n\n\n\n

 * p5.js draw function, runs in a continuous loop.<\/p>\n\n\n\n

 *\/<\/p>\n\n\n\n

function draw() {<\/p>\n\n\n\n

background(0);<\/p>\n\n\n\n

capture.loadPixels();<\/p>\n\n\n\n

if (capture.pixels.length === 0) {<\/p>\n\n\n\n

return;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

stroke(255, 200);<\/p>\n\n\n\n

noFill();<\/p>\n\n\n\n

strokeWeight(1);<\/p>\n\n\n\n

for (let y_idx = 0; y_idx < phaseOffsets.length; y_idx++) {<\/p>\n\n\n\n

const y = y_idx * lineSpacing;<\/p>\n\n\n\n

beginShape();<\/p>\n\n\n\n

for (let x_idx = 0; x_idx < phaseOffsets[y_idx].length; x_idx++) {<\/p>\n\n\n\n

const x = x_idx * 2;<\/p>\n\n\n\n

\/\/ — PIXEL ANALYSIS —<\/p>\n\n\n\n

const pixelX = floor(x);<\/p>\n\n\n\n

const pixelY = floor(y);<\/p>\n\n\n\n

const index = (pixelY * width + pixelX) * 4;<\/p>\n\n\n\n

const r = capture.pixels[index];<\/p>\n\n\n\n

const g = capture.pixels[index + 1];<\/p>\n\n\n\n

const b = capture.pixels[index + 2];<\/p>\n\n\n\n

const brightness = (r + g + b) \/ 3;<\/p>\n\n\n\n

\/\/ — SMOOTHED PHASE MODULATION —<\/p>\n\n\n\n

\/\/ 1. Normalize the brightness to a 0.0 – 1.0 range<\/p>\n\n\n\n

let normalizedBrightness = brightness \/ 255.0;<\/p>\n\n\n\n

\/\/ 2. Apply an exponential curve to better match human perception.<\/p>\n\n\n\n

\/\/    You can experiment with different exponents (e.g., 2, 3, or even 1.5)<\/p>\n\n\n\n

let curvedBrightness = pow(normalizedBrightness, 2);<\/p>\n\n\n\n

\/\/ 3. Map this new curved value to the target offset.<\/p>\n\n\n\n

const targetOffset = map(curvedBrightness, 0, 1, TWO_PI * 8, 0);<\/p>\n\n\n\n

\/\/ 2. Get the CURRENT offset from our storage array<\/p>\n\n\n\n

let currentOffset = phaseOffsets[y_idx][x_idx];<\/p>\n\n\n\n

\/\/ 3. Interpolate the current offset towards the target<\/p>\n\n\n\n

currentOffset = lerp(currentOffset, targetOffset, smoothing);<\/p>\n\n\n\n

\/\/ 4. Store the new smoothed value back in the array<\/p>\n\n\n\n

phaseOffsets[y_idx][x_idx] = currentOffset;<\/p>\n\n\n\n

\/\/ 5. Use the smoothed value to draw the wave<\/p>\n\n\n\n

const angle = x * baseFrequency + currentOffset;<\/p>\n\n\n\n

const waveY = sin(angle) * amplitude;<\/p>\n\n\n\n

vertex(x, y + waveY);<\/p>\n\n\n\n

}<\/p>\n\n\n\n

endShape();<\/p>\n\n\n\n

}<\/p>\n\n\n\n

}a<\/p>\n<\/div><\/details><\/div>\n<\/div>\n\n\n\n

Binarain<\/h2>\n\n\n\n

Als eine Leistungserbringung im Rahmen meines Masterstudiums habe im Seminar „Critical Code Studies“ zusammen mit einer Kommilitonin ein Creative Coding Projekt gemacht. Die Idee ist, dass ein Kamerabild mithilfe von Nullen und Einsen nachgezeichnet wird. Starke Ver\u00e4nderungen im Bild sorgen daf\u00fcr, dass die Zahlen eine gr\u00f6\u00dfere und l\u00e4ngere Spur ziehen. Das resultiert in einem Effekt, in dem sich eine Art Spur der Bewegungen durch die Szene zieht und nach unten verl\u00e4uft. Die Interpretation des Kunstwerks haben wir einfach mal offen gelassen \ud83d\ude09<\/p>\n\n\n\n

Link zu Open Processing<\/a><\/p>\n\n\n\n

\n
Code<\/summary>
\n

var zahlen = [];
var cam;
var prevFrame;
var threshold;
var camMode;
var scl = 1;
var arrLength = 2000;
var ct = 0;
var move;<\/p>\n\n\n\n

function setup() {
move=0;
frameRate(24);
\/\/createCanvas(window.innerWidth, window.innerHeight);
createCanvas(720,480);
background(130);
threshold = 40;
\/\/pixelDensity(1);
cam = createCapture(VIDEO);
cam.size(width\/scl,height\/scl);
cam.hide();
prevFrame = createImage(cam.width,cam.height);<\/p>\n\n\n\n

for(let i = 0; i < arrLength; i++){
zahlen.push(new Zahl());
}<\/p>\n\n\n\n

}<\/p>\n\n\n\n

function draw() {<\/p>\n\n\n\n

switch(camMode){
case 1:
break;
case 2:
filter(GRAY);
break;
case 3:
filter(POSTERIZE, 2);
break;
case 4:
filter(THRESHOLD, 0.5);
break;
case 5:
filter(OPAQUE);
break;
case 6:
filter(DILATE);
break;
case 7:
filter(BLUR);
break;
case 8:
filter(ERODE);
break;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

ct+=1;<\/p>\n\n\n\n

\/\/if(ct%3==0)background(230,5);<\/p>\n\n\n\n

cam.loadPixels();
prevFrame.loadPixels();<\/p>\n\n\n\n

if(ct%1==0){
for (let i = 0; i < zahlen.length; i++) {
zahlen[i].display();
zahlen[i].move();
}
}<\/p>\n\n\n\n

prevFrame.copy(cam,0,0,cam.width,cam.height ,0,0,cam.width,cam.height);
}<\/p>\n\n\n\n

function keyPressed(){
switch(key){
case ‚1‘:
camMode = 1;
break;
case ‚2‘:
camMode = 2;
break;
case ‚3‘:
camMode = 3;
break;
case ‚4‘:
camMode = 4;
break;
case ‚5‘:
camMode = 5;
break;
case ‚6‘:
camMode = 6;
break;
case ‚7‘:
camMode = 7;
break;
case ‚8‘:
camMode = 8;
break;<\/p>\n\n\n\n

case 's':\n  save();<\/code><\/pre>\n\n\n\n
}
}<\/p>\n\n\n\n
<\/p>\n\n\n\n
class Zahl {<\/p>\n\n\n\n
constructor() {
this.x = random(width);
this.y = random(height);
this.t = random(2,10);
let ran = random(0,1);
this.op = 30;
this.col = color(0,255,255);
this.col.setAlpha(this.op);
this.sz = 5;
this.trig = false;
this.timer = 0;<\/p>\n\n\n\n
if(ran>0.5){\n  this.numb = \"0\";\n}\nelse{\n  this.numb = \"1\";\n}\n\n\nfill(this.col);\ntextSize(this.sz);\ntext(this.numb,this.x,this.y);<\/code><\/pre>\n\n\n\n
}<\/p>\n\n\n\n
move(){
this.y += this.t;
if(this.y > height){
this.y = 0;
this.op= 0;
this.col.setAlpha(this.op);
this.timer=0;
\/\/this.col=color(0,0,0);<\/p>\n\n\n\n
  \/\/zahlen.pop();\n}<\/code><\/pre>\n\n\n\n
}<\/p>\n\n\n\n
display(){<\/p>\n\n\n\n
  \/\/background(255,255,255,5);\n\n\n  \/\/for (let x = 0; x < cam.width; x+=1){\n  \/\/for (let y = 0; y < cam.height; y+=1){\nlet pIndex = (floor(this.x\/scl) + floor(this.y\/scl) * cam.width)*4;\n\/\/print(pIndex);\n\nlet r1 = prevFrame.pixels[pIndex];\nlet g1 = prevFrame.pixels[pIndex+1];\nlet b1 = prevFrame.pixels[pIndex+2];\n      \/\/let a1 = prevFrame.pixels[pIndex+3];\n\nlet r2 = cam.pixels[pIndex];\nlet g2 = cam.pixels[pIndex+1];\nlet b2 = cam.pixels[pIndex+2];\n      \/\/let a2 = cam.pixels[pIndex+3];\n\nlet move = dist(r1,g1,b1,r2,g2,b2);\n\n\nif(move > threshold){\n  this.op = 255;\n  this.col = color(r1,g1,b1);\n  this.col.setAlpha(this.op);\n  this.sz = 25;\n  this.trig = true;\n  this.timer = 50;\n}\n\nif(this.timer>0)this.timer--;\nelse this.trig=false;\n\n\nif(this.sz>5)this.sz-=0.5;\nif(this.op>50)this.op-=10;\n\nthis.col.setAlpha(this.op);\nif(this.trig==true)fill(this.col);\nelse fill(color(r2,g2,b2));\n\nnoStroke();\ntextSize(this.sz);\ntext(this.numb,this.x,this.y);<\/code><\/pre>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
<\/p>\n\n\n\n
class Zahl {<\/p>\n\n\n\n
constructor() {
this.x = random(width);
this.y = random(height);
this.t = random(2,10);
let ran = random(0,1);
this.op = 30;
this.col = color(0,255,255);
this.col.setAlpha(this.op);
this.sz = 5;
this.trig = false;
this.timer = 0;<\/p>\n\n\n\n
if(ran>0.5){\n  this.numb = \"0\";\n}\nelse{\n  this.numb = \"1\";\n}\n\n\nfill(this.col);\ntextSize(this.sz);\ntext(this.numb,this.x,this.y);<\/code><\/pre>\n\n\n\n
}<\/p>\n\n\n\n
move(){
this.y += this.t;
if(this.y > height){
this.y = 0;
this.op= 0;
this.col.setAlpha(this.op);
this.timer=0;
\/\/this.col=color(0,0,0);<\/p>\n\n\n\n
  \/\/zahlen.pop();\n}<\/code><\/pre>\n\n\n\n
}<\/p>\n\n\n\n
display(){<\/p>\n\n\n\n
  \/\/background(255,255,255,5);\n\n\n  \/\/for (let x = 0; x < cam.width; x+=1){\n  \/\/for (let y = 0; y < cam.height; y+=1){\nlet pIndex = (floor(this.x\/scl) + floor(this.y\/scl) * cam.width)*4;\n\/\/print(pIndex);\n\nlet r1 = prevFrame.pixels[pIndex];\nlet g1 = prevFrame.pixels[pIndex+1];\nlet b1 = prevFrame.pixels[pIndex+2];\n      \/\/let a1 = prevFrame.pixels[pIndex+3];\n\nlet r2 = cam.pixels[pIndex];\nlet g2 = cam.pixels[pIndex+1];\nlet b2 = cam.pixels[pIndex+2];\n      \/\/let a2 = cam.pixels[pIndex+3];\n\nlet move = dist(r1,g1,b1,r2,g2,b2);\n\n\nif(move > threshold){\n  this.op = 255;\n  this.col = color(r1,g1,b1);\n  this.col.setAlpha(this.op);\n  this.sz = 25;\n  this.trig = true;\n  this.timer = 50;\n}\n\nif(this.timer>0)this.timer--;\nelse this.trig=false;\n\n\nif(this.sz>5)this.sz-=0.5;\nif(this.op>50)this.op-=10;\n\nthis.col.setAlpha(this.op);\nif(this.trig==true)fill(this.col);\nelse fill(color(r2,g2,b2));\n\nnoStroke();\ntextSize(this.sz);\ntext(this.numb,this.x,this.y);<\/code><\/pre>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n<\/div><\/details><\/div>\n<\/div>\n\n\n\n