<a class="bg-token-main-surface-primary fixed start-1/2 top-1 z-50 mx-auto w-fit -translate-x-1/2 translate-y-[-100lvh] rounded-full px-3 py-2 focus-visible:translate-y-0" href="https://chatgpt.com/c/68fd6517-0990-832f-a6bf-027f3dd17f7a#main" data-skip-to-content="">Weiter zum Inhalt</a>
<div class="flex h-full w-full flex-col">
<div class="relative flex h-full w-full flex-1 transition-colors z-0">
<div class="relative flex h-full w-full flex-row">
<div id="stage-slideover-sidebar" class="border-token-border-light relative z-21 h-full shrink-0 overflow-hidden border-e max-md:hidden">
<div class="relative flex h-full flex-col">
<div id="stage-sidebar-tiny-bar" class="group/tiny-bar flex h-full w-(–sidebar-rail-width) cursor-e-resize flex-col items-start bg-transparent pb-1.5 motion-safe:transition-colors rtl:cursor-w-resize absolute inset-0 pointer-events-none opacity-0 motion-safe:[transition-timing-function:steps(1,end)] motion-safe:transition-opacity motion-safe:duration-150">
<div class="h-header-height flex items-center justify-center">
<div class="flex items-center justify-center group-disabled:opacity-50 group-data-disabled:opacity-50 icon"></div>
</div>
</div>
<div class="opacity-100 motion-safe:transition-opacity motion-safe:duration-150 motion-safe:ease-linear h-full w-[var(–sidebar-width)] overflow-x-clip overflow-y-auto text-clip whitespace-nowrap bg-token-bg-elevated-secondary">
<h2>Chatverlauf</h2>
<nav class="group/scrollport relative flex h-full w-full flex-1 flex-col overflow-y-auto transition-opacity duration-500" aria-label="Chatverlauf">
<div class="short:group-data-scrolled-from-top/scrollport:shadow-(–sharp-edge-top-shadow) bg-token-bg-elevated-secondary sticky top-0 z-30">
<div class="touch:px-1.5 px-2">
<div id="sidebar-header" class="h-header-height flex items-center justify-between">
<div class="flex"></div>
</div>
</div>
</div>
<aside class="pt-(–sidebar-section-first-margin-top) last:mb-5 tall:sticky tall:top-header-height tall:z-20 bg-token-bg-elevated-secondary relative [–sticky-spacer:6px]">
<div class="pointer-events-none absolute start-0 end-0 -bottom-[var(–sticky-spacer)] h-[var(–sticky-spacer)] opacity-0 will-change-[opacity] group-data-scrolled-from-top/scrollport:opacity-100 bg-token-bg-elevated-secondary" aria-hidden="true"></div>
</aside>
<div class="pb-[calc(var(–sidebar-section-margin-top)-var(–sidebar-section-first-margin-top))]"></div>
<div class="group/sidebar-expando-section mb-[var(–sidebar-expanded-section-margin-bottom)]">
<div class="group __menu-item hoverable" tabindex="0" data-fill="" aria-expanded="true" aria-label="Abschnitt reduzieren" data-no-hover-bg="true" data-no-contents-gap="true">
<div class="text-token-text-tertiary flex w-full items-center justify-start gap-0.5"></div>
</div>
</div>
<div class="group/sidebar-expando-section mb-[var(–sidebar-expanded-section-margin-bottom)]">
<div class="group __menu-item hoverable" tabindex="0" data-fill="" aria-expanded="true" aria-label="Abschnitt reduzieren" data-no-hover-bg="true" data-no-contents-gap="true">
<div class="text-token-text-tertiary flex w-full items-center justify-start gap-0.5"></div>
</div>
</div>
<div class="group/sidebar-expando-section mb-[var(–sidebar-expanded-section-margin-bottom)]">
<div class="group __menu-item hoverable" tabindex="0" data-fill="" aria-expanded="true" aria-label="Abschnitt reduzieren" data-no-hover-bg="true" data-no-contents-gap="true">
<div class="text-token-text-tertiary flex w-full items-center justify-start gap-0.5"></div>
</div>
<div id="history" class=""></div>
</div>
<div class="grow"></div>
<div class="sticky bottom-0 z-30 empty:hidden bg-token-bg-elevated-secondary py-1.5 group-data-scrolled-from-end/scrollport:shadow-(–sharp-edge-bottom-shadow)">
<div class="relative">
<div class=""></div>
</div>
</div>
</nav></div>
</div>
</div>
<div class="relative flex h-full max-w-full flex-1 flex-col"><main id="main" class="transition-width relative h-full w-full flex-1 overflow-auto -translate-y-[calc(env(safe-area-inset-bottom,0px)/2)] pt-[calc(env(safe-area-inset-bottom,0px)/2)]">
<div id="thread" class="group/thread @container/thread h-full w-full">
<div class="composer-parent flex flex-col focus-visible:outline-0 overflow-hidden h-full" role="presentation"><header id="page-header" class="draggable no-draggable-children sticky top-0 p-2 touch:p-2.5 flex items-center justify-between z-20 h-header-height bg-token-main-surface-primary pointer-events-none select-none [view-transition-name:var(–vt-page-header)] *:pointer-events-auto motion-safe:transition max-md:hidden thread-xl:absolute thread-xl:start-0 thread-xl:end-0 thread-xl:shadow-none! thread-xl:bg-transparent [box-shadow:var(–sharp-edge-top-shadow)]">
<div class="flex items-center">
<div></div>
</div>
</header>
<div class="relative basis-auto flex-col -mb-(–composer-overlap-px) [–composer-overlap-px:28px] grow flex overflow-hidden">
<div class="relative h-full">
<div class="flex h-full flex-col overflow-y-auto thread-xl:pt-(–header-height) [scrollbar-gutter:stable_both-edges]">
<div class="pointer-events-none h-px w-px absolute start-0 top-0" aria-hidden="true" data-edge="true"></div>
<div class="flex flex-col text-sm thread-xl:pt-header-height pb-25"><article class="text-token-text-primary w-full focus:outline-none [–shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(–shadow-height) has-data-writing-block:pt-(–shadow-height) [&:has([data-writing-block])>*]:pointer-events-auto scroll-mt-(–header-height)" dir="auto" tabindex="-1" data-turn-id="bd3519fc-324a-42d9-a886-6b5b44a6a179" data-testid="conversation-turn-1" data-scroll-anchor="false" data-turn="user">
<h5 class="sr-only">Du:</h5>
<div class="text-base my-auto mx-auto pt-3 [–thread-content-margin:–spacing(4)] thread-sm:[–thread-content-margin:–spacing(6)] thread-lg:[–thread-content-margin:–spacing(16)] px-(–thread-content-margin)">
<div class="[–thread-content-max-width:40rem] thread-lg:[–thread-content-max-width:48rem] mx-auto max-w-(–thread-content-max-width) flex-1 group/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col" tabindex="-1">
<div class="flex max-w-full flex-col grow">
<div class="min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&]:mt-1" dir="auto" data-message-author-role="user" data-message-id="bd3519fc-324a-42d9-a886-6b5b44a6a179">
<div class="flex w-full flex-col gap-1 empty:hidden items-end rtl:items-start">
<div class="user-message-bubble-color relative rounded-[18px] px-4 py-1.5 data-[multiline]:py-3 max-w-[var(–user-chat-width,70%)]">
<div class="whitespace-pre-wrap">processing code für das malen eines bildes abstract / street art</div>
</div>
</div>
</div>
</div>
<div class="z-0 flex justify-end"></div>
</div>
</div>
</article><article class="text-token-text-primary w-full focus:outline-none [–shadow-height:45px] has-data-writing-block:pointer-events-none has-data-writing-block:-mt-(–shadow-height) has-data-writing-block:pt-(–shadow-height) [&:has([data-writing-block])>*]:pointer-events-auto scroll-mt-[calc(var(–header-height)+min(200px,max(70px,20svh)))]" dir="auto" tabindex="-1" data-turn-id="f69b2ca3-e8e1-4d20-9567-3625f080a179" data-testid="conversation-turn-2" data-scroll-anchor="true" data-turn="assistant">
<h6 class="sr-only">ChatGPT:</h6>
<div class="text-base my-auto mx-auto pb-10 [–thread-content-margin:–spacing(4)] thread-sm:[–thread-content-margin:–spacing(6)] thread-lg:[–thread-content-margin:–spacing(16)] px-(–thread-content-margin)">
<div class="[–thread-content-max-width:40rem] thread-lg:[–thread-content-max-width:48rem] mx-auto max-w-(–thread-content-max-width) flex-1 group/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn" tabindex="-1">
<div class="flex max-w-full flex-col grow">
<div class="absolute flex h-8 w-3 origin-center items-center justify-center">
<div class="bg-token-text-primary h-3 w-3 rounded-full"></div>
</div>
<div class="relative my-1 min-h-6">
<div class="origin-top-start relative flex flex-col gap-2 overflow-x-clip">
<div class="relative w-full text-start">
<div class="flex w-full flex-col items-start justify-between text-start flex-row"><button class="flex w-full items-center gap-0.5"><span class="font-medium"><span class="flex items-center gap-1 truncate text-start align-middle text-token-text-secondary hover:text-token-text-primary dark:hover:text-token-text-primary dark:text-[var(–interactive-label-tertiary-default)]">Nachgedacht für 6s</span></span></button></div>
</div>
<div class="max-w-[calc(0.8*var(–thread-content-max-width,40rem))]"></div>
</div>
</div>
<div class="min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal [.text-message+&]:mt-1" dir="auto" data-message-author-role="assistant" data-message-id="09cdced1-3ec5-4176-8636-51faa040aaf2" data-message-model-slug="gpt-5-thinking">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[1px]">
<div class="markdown prose dark:prose-invert w-full break-words dark markdown-new-styling">
<p data-start="0" data-end="230">Klar! Hier ist ein vollständiger <strong data-start="33" data-end="47">Processing</strong>-Sketch (Java-Mode), der ein abstraktes Street-Art-Bild generiert – mit Spray-Effekten, Drips, Stencil-Shapes, Halftone-Dots, Marker-Scribbles und Papiertextur. Keine Libraries nötig.</p>

<h3 data-start="232" data-end="245">Bedienung</h3>
<ul data-start="246" data-end="377">
<li data-start="246" data-end="295">
<p data-start="248" data-end="295"><strong data-start="248" data-end="253">N</strong>: neues Motiv (neue Zufalls-Komposition)</p>
</li>
<li data-start="296" data-end="343">
<p data-start="298" data-end="343"><strong data-start="298" data-end="303">S</strong>: als PNG speichern (im Sketch-Ordner)</p>
</li>
<li data-start="344" data-end="377">
<p data-start="346" data-end="377"><strong data-start="346" data-end="353">1–5</strong>: Farbpalette wechseln</p>
</li>
</ul>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"><code></div>
</div>
</div>
<div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-java"><span class="hljs-comment">// Abstract / Street Art Generator</span>
<span class="hljs-comment">// Processing (Java Mode) — keine externen Libraries</span>
<span class="hljs-comment">// Henning-ready: 1920×1080, skalierbar, Tastatur-Controls siehe oben</span>

<span class="hljs-type">int</span> <span class="hljs-variable">W</span> <span class="hljs-operator">=</span> <span class="hljs-number">1920</span>;
<span class="hljs-type">int</span> <span class="hljs-variable">H</span> <span class="hljs-operator">=</span> <span class="hljs-number">1080</span>;

<span class="hljs-type">int</span> <span class="hljs-variable">seed</span> <span class="hljs-operator">=</span> (<span class="hljs-type">int</span>)random(<span class="hljs-number">1</span><<<span class="hljs-number">30</span>);
<span class="hljs-type">int</span> <span class="hljs-variable">paletteIndex</span> <span class="hljs-operator">=</span> <span class="hljs-number">0</span>;

ArrayList<<span class="hljs-type">int</span>[]> palettes = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ArrayList</span><<span class="hljs-type">int</span>[]>();

<span class="hljs-keyword">void</span> <span class="hljs-title function_">settings</span><span class="hljs-params">()</span> {
size(W, H, P2D);
pixelDensity(displayDensity());
smooth(<span class="hljs-number">8</span>);
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">setup</span><span class="hljs-params">()</span> {
<span class="hljs-comment">// knallige Street-Art-Paletten</span>
palettes.add(<span class="hljs-keyword">new</span> <span class="hljs-title class_">int</span>[]{ #<span class="hljs-number">111111</span>, #F20530, #05F2C7, #F2E205, #056CF2, #F279A6 });
palettes.add(<span class="hljs-keyword">new</span> <span class="hljs-title class_">int</span>[]{ #0C0C0C, #FF6B00, #FFD100, #00E0FF, #B300FF, #FFFFFF });
palettes.add(<span class="hljs-keyword">new</span> <span class="hljs-title class_">int</span>[]{ #<span class="hljs-number">101010</span>, #F1155B, #3AE374, #17C0EB, #FFA36C, #E84393 });
palettes.add(<span class="hljs-keyword">new</span> <span class="hljs-title class_">int</span>[]{ #0E0E14, #E63946, #F1FAEE, #A8DADC, #457B9D, #FFBE0B });
palettes.add(<span class="hljs-keyword">new</span> <span class="hljs-title class_">int</span>[]{ #0D0D0D, #ff007f, #06d6a0, #ffd166, #118ab2, #ef476f });

noLoop();
compose();
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">draw</span><span class="hljs-params">()</span> { <span class="hljs-comment">/* alles in compose() */</span> }

<span class="hljs-keyword">void</span> <span class="hljs-title function_">compose</span><span class="hljs-params">()</span> {
randomSeed(seed);
noiseSeed(seed);

<span class="hljs-comment">// Hintergrund: subtile Papier-Textur + Gradient</span>
background(<span class="hljs-number">12</span>);
gradientBackground();
paperTexture();

<span class="hljs-comment">// große Stencil-Shapes (Multiplikation)</span>
blendMode(NORMAL);
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<<span class="hljs-number">6</span>; i++) stencilShape();

<span class="hljs-comment">// Spray-Splatters (mehrere Layer) </span>
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<<span class="hljs-number">6</span>; i++) sprayCloud();

<span class="hljs-comment">// Drips (nach unten laufende „Farb-Nasen“)</span>
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<<span class="hljs-number">60</span>; i++) drip();

<span class="hljs-comment">// Halftone-Dots auf Noise-Feld</span>
halftoneDots();

<span class="hljs-comment">// Marker-Scribbles / Tags</span>
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<<span class="hljs-number">8</span>; i++) scribble();

<span class="hljs-comment">// Kanten glätten / leichtes Film-Grain</span>
filmGrain();
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">gradientBackground</span><span class="hljs-params">()</span> {
<span class="hljs-type">int</span> <span class="hljs-variable">c1</span> <span class="hljs-operator">=</span> color(<span class="hljs-number">10</span>,<span class="hljs-number">10</span>,<span class="hljs-number">14</span>);
<span class="hljs-type">int</span> <span class="hljs-variable">c2</span> <span class="hljs-operator">=</span> color(<span class="hljs-number">24</span>,<span class="hljs-number">24</span>,<span class="hljs-number">32</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> y=<span class="hljs-number">0</span>; y<H; y++) {
<span class="hljs-type">float</span> <span class="hljs-variable">t</span> <span class="hljs-operator">=</span> pow(map(y,<span class="hljs-number">0</span>,H,<span class="hljs-number">0</span>,<span class="hljs-number">1</span>), <span class="hljs-number">1.2</span>);
stroke(lerpColor(c1, c2, t));
line(<span class="hljs-number">0</span>,y,W,y);
}
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">paperTexture</span><span class="hljs-params">()</span> {
loadPixels();
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> y=<span class="hljs-number">0</span>; y<H; y++) {
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> x=<span class="hljs-number">0</span>; x<W; x++) {
<span class="hljs-type">float</span> <span class="hljs-variable">n</span> <span class="hljs-operator">=</span> noise(x*<span class="hljs-number">0.003</span>, y*<span class="hljs-number">0.003</span>)*<span class="hljs-number">0.06</span>; <span class="hljs-comment">// feines Rauschen</span>
<span class="hljs-type">int</span> <span class="hljs-variable">idx</span> <span class="hljs-operator">=</span> x + y*W;
<span class="hljs-type">color</span> <span class="hljs-variable">base</span> <span class="hljs-operator">=</span> pixels[idx];
<span class="hljs-type">float</span> <span class="hljs-variable">b</span> <span class="hljs-operator">=</span> brightness(base)/<span class="hljs-number">100.0</span>;
<span class="hljs-type">int</span> <span class="hljs-variable">g</span> <span class="hljs-operator">=</span> color(
red(base)*(<span class="hljs-number">1</span>-n),
green(base)*(<span class="hljs-number">1</span>-n),
blue(base)*(<span class="hljs-number">1</span>-n)
);
pixels[idx] = g;
}
}
updatePixels();
<span class="hljs-comment">// feine Falten/Schrammen</span>
stroke(<span class="hljs-number">255</span>, <span class="hljs-number">8</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<<span class="hljs-number">150</span>; i++) {
<span class="hljs-type">float</span> <span class="hljs-variable">y</span> <span class="hljs-operator">=</span> random(H);
line(<span class="hljs-number">0</span>, y, W, y + random(-<span class="hljs-number">5</span>,<span class="hljs-number">5</span>));
}
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">stencilShape</span><span class="hljs-params">()</span> {
<span class="hljs-type">int</span>[] pal = palettes.get(paletteIndex);
<span class="hljs-type">int</span> <span class="hljs-variable">fillCol</span> <span class="hljs-operator">=</span> pal[(<span class="hljs-type">int</span>)random(<span class="hljs-number">1</span>, pal.length)]; <span class="hljs-comment">// selten Schwarz</span>
<span class="hljs-type">float</span> <span class="hljs-variable">cx</span> <span class="hljs-operator">=</span> random(W*<span class="hljs-number">0.1</span>, W*<span class="hljs-number">0.9</span>);
<span class="hljs-type">float</span> <span class="hljs-variable">cy</span> <span class="hljs-operator">=</span> random(H*<span class="hljs-number">0.15</span>, H*<span class="hljs-number">0.85</span>);
<span class="hljs-type">float</span> <span class="hljs-variable">s</span> <span class="hljs-operator">=</span> random(min(W,H)*<span class="hljs-number">0.15</span>, min(W,H)*<span class="hljs-number">0.45</span>);
<span class="hljs-type">int</span> <span class="hljs-variable">sides</span> <span class="hljs-operator">=</span> (<span class="hljs-type">int</span>)random(<span class="hljs-number">3</span>, <span class="hljs-number">9</span>);

pushMatrix();
translate(cx, cy);
rotate(random(TWO_PI));
blendMode(MULTIPLY);
noStroke();
fill(fillCol, random(<span class="hljs-number">120</span>, <span class="hljs-number">220</span>));
beginShape();
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<sides; i++) {
<span class="hljs-type">float</span> <span class="hljs-variable">ang</span> <span class="hljs-operator">=</span> map(i, <span class="hljs-number">0</span>, sides, <span class="hljs-number">0</span>, TWO_PI);
<span class="hljs-type">float</span> <span class="hljs-variable">r</span> <span class="hljs-operator">=</span> s * (<span class="hljs-number">0.8</span> + <span class="hljs-number">0.4</span>*noise(seed*<span class="hljs-number">0.01</span> + i*<span class="hljs-number">0.3</span> + frameCount*<span class="hljs-number">0.0</span>));
vertex(cos(ang)*r, sin(ang)*r);
}
endShape(CLOSE);

<span class="hljs-comment">// leichte Rough-Edge</span>
stroke(<span class="hljs-number">0</span>, <span class="hljs-number">30</span>);
strokeWeight(<span class="hljs-number">2</span>);
noFill();
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<<span class="hljs-number">3</span>; i++) {
beginShape();
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> j=<span class="hljs-number">0</span>; j<sides; j++) {
<span class="hljs-type">float</span> <span class="hljs-variable">ang</span> <span class="hljs-operator">=</span> map(j, <span class="hljs-number">0</span>, sides, <span class="hljs-number">0</span>, TWO_PI);
<span class="hljs-type">float</span> <span class="hljs-variable">r</span> <span class="hljs-operator">=</span> s*<span class="hljs-number">1.02</span> + i*<span class="hljs-number">2</span> + random(-<span class="hljs-number">2</span>,<span class="hljs-number">2</span>);
vertex(cos(ang)*r, sin(ang)*r);
}
endShape(CLOSE);
}
popMatrix();
blendMode(NORMAL);
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">sprayCloud</span><span class="hljs-params">()</span> {
<span class="hljs-type">int</span>[] pal = palettes.get(paletteIndex);
<span class="hljs-type">int</span> <span class="hljs-variable">c</span> <span class="hljs-operator">=</span> pal[(<span class="hljs-type">int</span>)random(pal.length)];
<span class="hljs-type">float</span> <span class="hljs-variable">cx</span> <span class="hljs-operator">=</span> random(W);
<span class="hljs-type">float</span> <span class="hljs-variable">cy</span> <span class="hljs-operator">=</span> random(H);
<span class="hljs-type">float</span> <span class="hljs-variable">rMax</span> <span class="hljs-operator">=</span> random(<span class="hljs-number">120</span>, <span class="hljs-number">320</span>);
<span class="hljs-type">int</span> <span class="hljs-variable">dots</span> <span class="hljs-operator">=</span> (<span class="hljs-type">int</span>)random(<span class="hljs-number">2000</span>, <span class="hljs-number">6000</span>);
noStroke();

<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<dots; i++) {
<span class="hljs-type">float</span> <span class="hljs-variable">r</span> <span class="hljs-operator">=</span> rMax * pow(random(<span class="hljs-number">1</span>), <span class="hljs-number">1.8</span>); <span class="hljs-comment">// dicht zur Mitte</span>
<span class="hljs-type">float</span> <span class="hljs-variable">ang</span> <span class="hljs-operator">=</span> random(TWO_PI);
<span class="hljs-type">float</span> <span class="hljs-variable">x</span> <span class="hljs-operator">=</span> cx + cos(ang)*r + random(-<span class="hljs-number">1.5</span>,<span class="hljs-number">1.5</span>);
<span class="hljs-type">float</span> <span class="hljs-variable">y</span> <span class="hljs-operator">=</span> cy + sin(ang)*r + random(-<span class="hljs-number">1.5</span>,<span class="hljs-number">1.5</span>);
<span class="hljs-type">float</span> <span class="hljs-variable">a</span> <span class="hljs-operator">=</span> map(r, <span class="hljs-number">0</span>, rMax, <span class="hljs-number">220</span>, <span class="hljs-number">0</span>) + random(-<span class="hljs-number">10</span>,<span class="hljs-number">10</span>);
fill(c, constrain(a, <span class="hljs-number">8</span>, <span class="hljs-number">240</span>));
<span class="hljs-type">float</span> <span class="hljs-variable">d</span> <span class="hljs-operator">=</span> random(<span class="hljs-number">1</span>, <span class="hljs-number">3.8</span>);
ellipse(x, y, d, d);
}

<span class="hljs-comment">// harte Spritzer</span>
<span class="hljs-type">int</span> <span class="hljs-variable">splats</span> <span class="hljs-operator">=</span> (<span class="hljs-type">int</span>)random(<span class="hljs-number">20</span>, <span class="hljs-number">60</span>);
stroke(c, <span class="hljs-number">220</span>);
strokeWeight(<span class="hljs-number">1</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<splats; i++) {
<span class="hljs-type">float</span> <span class="hljs-variable">x1</span> <span class="hljs-operator">=</span> cx + random(-rMax, rMax);
<span class="hljs-type">float</span> <span class="hljs-variable">y1</span> <span class="hljs-operator">=</span> cy + random(-rMax, rMax);
<span class="hljs-type">float</span> <span class="hljs-variable">len</span> <span class="hljs-operator">=</span> random(<span class="hljs-number">6</span>, <span class="hljs-number">32</span>);
<span class="hljs-type">float</span> <span class="hljs-variable">ang</span> <span class="hljs-operator">=</span> random(TWO_PI);
line(x1, y1, x1 + cos(ang)*len, y1 + sin(ang)*len);
}
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">drip</span><span class="hljs-params">()</span> {
<span class="hljs-type">int</span>[] pal = palettes.get(paletteIndex);
<span class="hljs-type">int</span> <span class="hljs-variable">c</span> <span class="hljs-operator">=</span> pal[(<span class="hljs-type">int</span>)random(pal.length)];
<span class="hljs-type">float</span> <span class="hljs-variable">x</span> <span class="hljs-operator">=</span> random(W);
<span class="hljs-type">float</span> <span class="hljs-variable">y</span> <span class="hljs-operator">=</span> random(-H*<span class="hljs-number">0.1</span>, H*<span class="hljs-number">0.2</span>);
<span class="hljs-type">float</span> <span class="hljs-variable">len</span> <span class="hljs-operator">=</span> random(H*<span class="hljs-number">0.15</span>, H*<span class="hljs-number">0.7</span>);
<span class="hljs-type">float</span> <span class="hljs-variable">t</span> <span class="hljs-operator">=</span> random(<span class="hljs-number">1000</span>);
<span class="hljs-type">float</span> <span class="hljs-variable">w</span> <span class="hljs-operator">=</span> random(<span class="hljs-number">2</span>, <span class="hljs-number">10</span>);
noFill();
stroke(c, random(<span class="hljs-number">120</span>, <span class="hljs-number">220</span>));
strokeCap(ROUND);

beginShape();
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<<span class="hljs-number">200</span>; i++) {
<span class="hljs-type">float</span> <span class="hljs-variable">yy</span> <span class="hljs-operator">=</span> y + map(i, <span class="hljs-number">0</span>, <span class="hljs-number">199</span>, <span class="hljs-number">0</span>, len);
<span class="hljs-type">float</span> <span class="hljs-variable">xx</span> <span class="hljs-operator">=</span> x + map(noise(t + i*<span class="hljs-number">0.02</span>), <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, -<span class="hljs-number">30</span>, <span class="hljs-number">30</span>);
strokeWeight(w * map(i, <span class="hljs-number">0</span>, <span class="hljs-number">199</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0.4</span>) + random(<span class="hljs-number">0</span>, <span class="hljs-number">0.8</span>));
vertex(xx, yy);
}
endShape();

<span class="hljs-comment">// Tropfen Ende</span>
noStroke();
fill(c, <span class="hljs-number">230</span>);
ellipse(x + map(noise(t+<span class="hljs-number">5</span>),<span class="hljs-number">0</span>,<span class="hljs-number">1</span>,-<span class="hljs-number">20</span>,<span class="hljs-number">20</span>), y+len, w*<span class="hljs-number">2.2</span>, w*<span class="hljs-number">2.2</span>);
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">halftoneDots</span><span class="hljs-params">()</span> {
<span class="hljs-comment">// Dichte/Durchmesser per Noise – in Screen-Optik</span>
blendMode(MULTIPLY);
<span class="hljs-type">float</span> <span class="hljs-variable">cell</span> <span class="hljs-operator">=</span> <span class="hljs-number">14</span>;
noStroke();
<span class="hljs-keyword">for</span> (<span class="hljs-type">float</span> yy=<span class="hljs-number">0</span>; yy<H; yy+=cell) {
<span class="hljs-keyword">for</span> (<span class="hljs-type">float</span> xx=<span class="hljs-number">0</span>; xx<W; xx+=cell) {
<span class="hljs-type">float</span> <span class="hljs-variable">n</span> <span class="hljs-operator">=</span> noise(xx*<span class="hljs-number">0.003</span>, yy*<span class="hljs-number">0.003</span>, <span class="hljs-number">100</span> + seed*<span class="hljs-number">0.001</span>);
<span class="hljs-type">float</span> <span class="hljs-variable">d</span> <span class="hljs-operator">=</span> map(n, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, cell*<span class="hljs-number">0.95</span>);
<span class="hljs-type">int</span>[] pal = palettes.get(paletteIndex);
<span class="hljs-type">int</span> <span class="hljs-variable">c</span> <span class="hljs-operator">=</span> pal[(<span class="hljs-type">int</span>)random(pal.length)];
fill(c, <span class="hljs-number">38</span>);
ellipse(xx+cell*<span class="hljs-number">0.5</span>, yy+cell*<span class="hljs-number">0.5</span>, d, d);
}
}
blendMode(NORMAL);
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">scribble</span><span class="hljs-params">()</span> {
<span class="hljs-type">int</span>[] pal = palettes.get(paletteIndex);
<span class="hljs-type">int</span> <span class="hljs-variable">c</span> <span class="hljs-operator">=</span> pal[(<span class="hljs-type">int</span>)random(pal.length)];
<span class="hljs-type">int</span> <span class="hljs-variable">segs</span> <span class="hljs-operator">=</span> (<span class="hljs-type">int</span>)random(<span class="hljs-number">3</span>, <span class="hljs-number">7</span>);
<span class="hljs-type">float</span> <span class="hljs-variable">x</span> <span class="hljs-operator">=</span> random(W);
<span class="hljs-type">float</span> <span class="hljs-variable">y</span> <span class="hljs-operator">=</span> random(H);
stroke(c, random(<span class="hljs-number">160</span>, <span class="hljs-number">230</span>));
strokeWeight(random(<span class="hljs-number">2</span>, <span class="hljs-number">6</span>));
noFill();
beginShape();
vertex(x, y);
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<segs; i++) {
x += random(-<span class="hljs-number">240</span>, <span class="hljs-number">240</span>);
y += random(-<span class="hljs-number">160</span>, <span class="hljs-number">160</span>);
bezierVertex(
x + random(-<span class="hljs-number">80</span>, <span class="hljs-number">80</span>), y + random(-<span class="hljs-number">80</span>, <span class="hljs-number">80</span>),
x + random(-<span class="hljs-number">80</span>, <span class="hljs-number">80</span>), y + random(-<span class="hljs-number">80</span>, <span class="hljs-number">80</span>),
x, y
);
}
endShape();

<span class="hljs-comment">// Doppellinie/Marker-Schattierung</span>
stroke(<span class="hljs-number">0</span>, <span class="hljs-number">40</span>);
strokeWeight(<span class="hljs-number">1.2</span>);
line(x, y, x + random(-<span class="hljs-number">40</span>, <span class="hljs-number">40</span>), y + random(-<span class="hljs-number">40</span>, <span class="hljs-number">40</span>));
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">filmGrain</span><span class="hljs-params">()</span> {
loadPixels();
<span class="hljs-keyword">for</span> (<span class="hljs-type">int</span> i=<span class="hljs-number">0</span>; i<pixels.length; i++) {
<span class="hljs-type">float</span> <span class="hljs-variable">g</span> <span class="hljs-operator">=</span> random(-<span class="hljs-number">10</span>, <span class="hljs-number">10</span>);
<span class="hljs-type">color</span> <span class="hljs-variable">p</span> <span class="hljs-operator">=</span> pixels[i];
pixels[i] = color(
constrain(red(p)+g, <span class="hljs-number">0</span>, <span class="hljs-number">255</span>),
constrain(green(p)+g, <span class="hljs-number">0</span>, <span class="hljs-number">255</span>),
constrain(blue(p)+g, <span class="hljs-number">0</span>, <span class="hljs-number">255</span>),
<span class="hljs-number">255</span>
);
}
updatePixels();
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">keyPressed</span><span class="hljs-params">()</span> {
<span class="hljs-keyword">if</span> (key==<span class="hljs-string">'n'</span> || key==<span class="hljs-string">'N'</span>) {
seed = (<span class="hljs-type">int</span>)random(<span class="hljs-number">1</span><<<span class="hljs-number">30</span>);
redrawAll();
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (key==<span class="hljs-string">'s'</span> || key==<span class="hljs-string">'S'</span>) {
<span class="hljs-type">String</span> <span class="hljs-variable">ts</span> <span class="hljs-operator">=</span> nf(year(),<span class="hljs-number">4</span>)+nf(month(),<span class="hljs-number">2</span>)+nf(day(),<span class="hljs-number">2</span>)+<span class="hljs-string">"_"</span>+nf(hour(),<span class="hljs-number">2</span>)+nf(minute(),<span class="hljs-number">2</span>)+nf(second(),<span class="hljs-number">2</span>);
save(<span class="hljs-string">"street_art_"</span>+ts+<span class="hljs-string">".png"</span>);
println(<span class="hljs-string">"gespeichert: street_art_"</span>+ts+<span class="hljs-string">".png"</span>);
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (key>=<span class="hljs-string">'1'</span> && key<=<span class="hljs-string">'5'</span>) {
paletteIndex = key – <span class="hljs-string">'1'</span>;
redrawAll();
}
}

<span class="hljs-keyword">void</span> <span class="hljs-title function_">redrawAll</span><span class="hljs-params">()</span> {
clear();
compose();
redraw();
}
</code></div>
</div>
<p data-start="7256" data-end="7280"></code></p>
<p data-start="7256" data-end="7280"></p>
<p data-start="7256" data-end="7280"><strong data-start="7256" data-end="7280">Tipps zum Feintuning</strong></p>

<ul data-start="7281" data-end="7577">
<li data-start="7281" data-end="7345">
<p data-start="7283" data-end="7345">Größe ändern: <code data-start="7297" data-end="7300">W</code>/<code data-start="7301" data-end="7304">H</code> anpassen (z. B. 3000×4000 für Poster).</p>
</li>
<li data-start="7346" data-end="7438">
<p data-start="7348" data-end="7438">Mehr/menos Drips: in <code data-start="7369" data-end="7377">drip()</code> Anzahl im <code data-start="7388" data-end="7393">for</code> (Aufrufe in <code data-start="7406" data-end="7415">compose</code>) erhöhen/verringern.</p>
</li>
<li data-start="7439" data-end="7495">
<p data-start="7441" data-end="7495">Halftone intensiver: Alpha in <code data-start="7471" data-end="7484">fill(c, 38)</code> anheben.</p>
</li>
<li data-start="7496" data-end="7577">
<p data-start="7498" data-end="7577">Knalliger Look: In <code data-start="7517" data-end="7533">stencilShape()</code> statt <code data-start="7540" data-end="7550">MULTIPLY</code> mit <code data-start="7555" data-end="7560">ADD</code> experimentieren.</p>
</li>
</ul>
<p data-start="7579" data-end="7690" data-is-last-node="" data-is-only-node="">Wenn du willst, passe ich dir das auf ein festes CI-Farbschema oder füge Text/Tag-Overlay mit einer Font hinzu.</p>

</div>
</div>
</div>
</div>
<div class="z-0 flex min-h-[46px] justify-start"></div>
<div class="mt-3 w-full empty:hidden">
<div class="text-center"></div>
</div>
</div>
</div>
</article>
<div class="pointer-events-none h-px w-px" aria-hidden="true" data-edge="true"></div>
<div></div>
</div>
</div>
</div>
</div>
<div id="thread-bottom-container" class="group/thread-bottom-container relative isolate z-10 w-full basis-auto has-data-has-thread-error:pt-2 has-data-has-thread-error:[box-shadow:var(–sharp-edge-bottom-shadow)] md:border-transparent md:pt-0 dark:border-white/20 md:dark:border-transparent content-fade single-line flex flex-col">
<div id="thread-bottom">
<div class="text-base mx-auto [–thread-content-margin:–spacing(4)] thread-sm:[–thread-content-margin:–spacing(6)] thread-lg:[–thread-content-margin:–spacing(16)] px-(–thread-content-margin)">
<div class="[–thread-content-max-width:40rem] thread-lg:[–thread-content-max-width:48rem] mx-auto max-w-(–thread-content-max-width) flex-1">
<div class="pointer-events-auto relative z-1 flex h-[var(–composer-container-height,100%)] max-w-full flex-[var(–composer-container-flex,1)] flex-col"><button class="invisible absolute self-center" tabindex="-1" name="context-connector-pasted-link-popover-trigger" type="button" aria-hidden="true" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-_R_jl4lh6aj5cea4qcm_" data-state="closed"></button>
<div class="absolute start-0 end-0 bottom-full z-20"></div>
<form class="group/composer w-full" data-type="unified-composer">
<div class="">
<div class="bg-token-bg-primary cursor-text overflow-clip bg-clip-padding p-2.5 contain-inline-size dark:bg-[#303030] grid grid-cols-[auto_1fr_auto] [grid-template-areas:'header_header_header'_'leading_primary_trailing'_'._footer_.'] group-data-expanded/composer:[grid-template-areas:'header_header_header'_'primary_primary_primary'_'leading_footer_trailing'] shadow-short">
<div class="-my-2.5 flex min-h-14 items-center overflow-x-hidden px-1.5 [grid-area:primary] group-data-expanded/composer:mb-0 group-data-expanded/composer:px-2.5">
<div class="_prosemirror-parent_198md_2 text-token-text-primary max-h-[max(35svh,5rem)] max-h-52 flex-1 overflow-auto [scrollbar-width:thin] default-browser vertical-scroll-fade-mask">
<div id="prompt-textarea" class="ProseMirror" contenteditable="true" translate="no" data-virtualkeyboard="true">
<p class="placeholder" data-placeholder="Stelle irgendeine Frage"></p>

</div>
</div>
</div>
<div class="[grid-area:leading]"></div>
<div class="flex items-center gap-2 [grid-area:trailing]">
<div class="ms-auto flex items-center gap-1.5">
<div class="min-w-9" data-testid="composer-speech-button-container">
<div class="flex items-center justify-center"></div>
</div>
</div>
</div>
</div>
<div id="chatgpt-exporter-container">
<div class="MuiButtonGroup-root MuiButtonGroup-outlined MuiButtonGroup-horizontal MuiButtonGroup-colorSecondary css-rvzrp6" role="group"></div>
<div class="MuiButtonGroup-root MuiButtonGroup-contained MuiButtonGroup-horizontal MuiButtonGroup-colorSecondary css-y6h3wv" role="group"></div>
</div>
</div>
</form></div>
<input id="upload-photos" class="sr-only" tabindex="-1" accept="image/*" multiple="multiple" type="file" aria-hidden="true" /><input id="upload-camera" class="sr-only" tabindex="-1" accept="image/*" multiple="multiple" type="file" aria-hidden="true" /></div>
</div>
</div>
<div class="text-token-text-secondary relative mt-auto flex min-h-8 w-full items-center justify-center p-2 text-center text-xs [view-transition-name:var(–vt-disclaimer)] md:px-[60px]">
<div class="pointer-events-auto">ChatGPT kann Fehler machen. Überprüfe wichtige Informationen. Siehe <a class="text-token-text-primary decoration-token-text-primary cursor-pointer underline">Cookie-Voreinstellungen</a>.</div>
</div>
</div>
</div>
</div>
</main></div>
</div>
</div>
</div>
<div id="live-region-assertive" class="sr-only" aria-live="assertive" aria-atomic="true"></div>
<div id="live-region-polite" class="sr-only" aria-live="polite" aria-atomic="true"></div>
<iframe width="1" height="1" data-mce-fragment="1"></iframe><iframe id="hs-walkthrough-toolbar" data-mce-fragment="1"></iframe>
<div id="root-scribe-elem">
<div tabindex="-1" role="region" aria-label="Notifications (F8)"></div>
</div>