{"id":610,"date":"2026-02-13T08:15:15","date_gmt":"2026-02-13T08:15:15","guid":{"rendered":"https:\/\/kurtgrung.com\/blog\/?p=610"},"modified":"2026-02-13T08:15:15","modified_gmt":"2026-02-13T08:15:15","slug":"creative-coding","status":"publish","type":"post","link":"https:\/\/kurtgrung.com\/blog\/creative-coding\/","title":{"rendered":"Creative Coding"},"content":{"rendered":"\n<p>Creative coding animation techniques span math, physics, generative art, and real-time graphics. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Trigonometric Motion (Oscillation &amp; Loops)<\/strong><\/h2>\n\n\n\n<p><strong>Core idea:<\/strong>&nbsp;Use&nbsp;sin()&nbsp;and&nbsp;cos()&nbsp;for smooth periodic motion.<\/p>\n\n\n\n<p><strong>Common uses<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Floating UI elements<\/li>\n\n\n\n<li>Orbital motion<\/li>\n\n\n\n<li>Waveforms<\/li>\n\n\n\n<li>Lissajous curves<\/li>\n\n\n\n<li>Loopable animations<\/li>\n<\/ul>\n\n\n\n<p><strong>Example (JS):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const x = centerX + Math.cos(time) * radius;\nconst y = centerY + Math.sin(time) * radius;<\/code><\/pre>\n\n\n\n<p><strong>GLSL:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>float wave = sin(uv.x * 10.0 + uTime);<\/code><\/pre>\n\n\n\n<p>Why it\u2019s powerful:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Perfect for seamless loops<\/li>\n\n\n\n<li>Cheap computation<\/li>\n\n\n\n<li>Predictable motion<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Perlin \/ Simplex Noise (Organic Motion)<\/strong><\/h2>\n\n\n\n<p><strong>Core idea:<\/strong>&nbsp;Replace predictable sine waves with controlled randomness.<\/p>\n\n\n\n<p>Used for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Flow fields<\/li>\n\n\n\n<li>Smoke \/ fog<\/li>\n\n\n\n<li>Terrain<\/li>\n\n\n\n<li>Wavy distortions<\/li>\n\n\n\n<li>Blob animations<\/li>\n\n\n\n<li>Camera drift<\/li>\n<\/ul>\n\n\n\n<p><strong>Concept:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>x += noise(x * scale, y * scale, time) * amplitude;<\/code><\/pre>\n\n\n\n<p>In shaders:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>float n = snoise(vec3(uv * 2.0, uTime));<\/code><\/pre>\n\n\n\n<p>Why it\u2019s powerful:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Natural motion<\/li>\n\n\n\n<li>Infinite variation<\/li>\n\n\n\n<li>Smooth randomness (not jittery)<\/li>\n<\/ul>\n\n\n\n<p>You\u2019ve already leaned toward real Perlin noise in your Three.js experiments \u2014 this is where creative coding really shines.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Easing Functions (Motion Design Feel)<\/strong><\/h2>\n\n\n\n<p><strong>Core idea:<\/strong>&nbsp;Map linear time into expressive motion.<\/p>\n\n\n\n<p>Instead of:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>position = start + progress * distance;<\/code><\/pre>\n\n\n\n<p>Use:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>progress = easeInOutCubic(t);<\/code><\/pre>\n\n\n\n<p>Common easing:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>easeInQuad<\/li>\n\n\n\n<li>easeOutExpo<\/li>\n\n\n\n<li>easeInOutCubic<\/li>\n\n\n\n<li>spring-based motion<\/li>\n<\/ul>\n\n\n\n<p>Essential for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UI animation<\/li>\n\n\n\n<li>Scroll-based motion<\/li>\n\n\n\n<li>Cinematic camera moves<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Physics-Based Animation<\/strong><\/h2>\n\n\n\n<p><strong>Core idea:<\/strong>&nbsp;Simulate forces instead of scripting positions.<\/p>\n\n\n\n<p>Techniques:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Verlet integration<\/li>\n\n\n\n<li>Springs &amp; dampers<\/li>\n\n\n\n<li>Gravity fields<\/li>\n\n\n\n<li>Collision systems<\/li>\n\n\n\n<li>Boids (flocking)<\/li>\n<\/ul>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>velocity += force;\nposition += velocity;\nvelocity *= 0.98; \/\/ friction<\/code><\/pre>\n\n\n\n<p>Best for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Particle systems<\/li>\n\n\n\n<li>Cloth \/ ropes<\/li>\n\n\n\n<li>Interactive systems<\/li>\n\n\n\n<li>Reactive UI motion<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Shader-Based Distortion &amp; Post-Processing<\/strong><\/h2>\n\n\n\n<p><strong>Core idea:<\/strong>&nbsp;Animate pixels instead of objects.<\/p>\n\n\n\n<p>Common effects:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UV distortion<\/li>\n\n\n\n<li>Chromatic aberration<\/li>\n\n\n\n<li>Bloom<\/li>\n\n\n\n<li>Glitch<\/li>\n\n\n\n<li>Pixel sorting<\/li>\n\n\n\n<li>Scanlines<\/li>\n\n\n\n<li>Afterimage trails<\/li>\n<\/ul>\n\n\n\n<p>Example distortion:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>uv.x += sin(uv.y * 10.0 + uTime) * 0.02;<\/code><\/pre>\n\n\n\n<p>This pairs perfectly with your Three.js + EffectComposer setups.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Procedural Geometry Deformation<\/strong><\/h2>\n\n\n\n<p>Move vertices instead of objects:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>vec3 pos = position;\npos.z += sin(pos.x * 5.0 + uTime) * 0.2;<\/code><\/pre>\n\n\n\n<p>Used for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wavy tubes<\/li>\n\n\n\n<li>Audio-reactive meshes<\/li>\n\n\n\n<li>Morphing forms<\/li>\n\n\n\n<li>Abstract landscapes<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Flow Fields<\/strong><\/h2>\n\n\n\n<p>Particles follow directional vectors generated from noise.<\/p>\n\n\n\n<p>Concept:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>angle = noise(x * scale, y * scale) * Math.PI * 2;\nvelocity.x = Math.cos(angle);\nvelocity.y = Math.sin(angle);<\/code><\/pre>\n\n\n\n<p>Results:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mesmerizing line art<\/li>\n\n\n\n<li>Organic swarms<\/li>\n\n\n\n<li>Ink-like systems<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Advanced Hybrid Techniques <\/strong><\/h2>\n\n\n\n<p>Combine:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Noise + vertex displacement<\/li>\n\n\n\n<li>Physics + flow fields<\/li>\n\n\n\n<li>Camera path + easing + noise<\/li>\n\n\n\n<li>Post-processing + temporal feedback<\/li>\n<\/ul>\n\n\n\n<p>Hybrid:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Perlin-noise animated tube<\/li>\n\n\n\n<li>Camera moving along spline<\/li>\n\n\n\n<li>Subtle chromatic aberration<\/li>\n\n\n\n<li>Afterimage pass for ghost trails<\/li>\n\n\n\n<li>Film grain overlay<\/li>\n<\/ul>\n\n\n\n<p>That\u2019s peak creative coding aesthetic.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creative coding animation techniques span math, physics, generative art, and real-time graphics. Trigonometric Motion (Oscillation &amp; Loops) Core idea:&nbsp;Use&nbsp;sin()&nbsp;and&nbsp;cos()&nbsp;for smooth periodic motion. Common uses Example (JS): GLSL: Why it\u2019s powerful: Perlin \/ Simplex Noise (Organic Motion) Core idea:&nbsp;Replace predictable sine waves with controlled randomness. Used for: Concept: In shaders: Why it\u2019s powerful: You\u2019ve already leaned [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,177,80],"tags":[42],"class_list":["post-610","post","type-post","status-publish","format-standard","hentry","category-code","category-creative-coding","category-thoughts","tag-creative-coding"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/comments?post=610"}],"version-history":[{"count":1,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/610\/revisions"}],"predecessor-version":[{"id":611,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/610\/revisions\/611"}],"wp:attachment":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/media?parent=610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/categories?post=610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/tags?post=610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}