[{"data":1,"prerenderedAt":780},["ShallowReactive",2],{"article-0040_dummy_article":3,"surround-\u002Farticle\u002F0040_dummy_article":771},{"id":4,"title":5,"body":6,"date":750,"description":751,"extension":752,"images":753,"meta":758,"navigation":108,"path":759,"seo":760,"stem":761,"tags":762,"thumbnail":33,"tools":767,"__hash__":770},"articles\u002Farticle\u002F0040_dummy_article.md","Generative Art and Animation",{"type":7,"value":8,"toc":744},"minimark",[9,22,27,223,226,230,240,374,377,381,384,733,737,740],[10,11,12,13,17,18,21],"p",{},"Generative art is what happens when you write rules and let the output surprise you. For animators it clicks fast — ",[14,15,16],"code",{},"setup()"," runs once, ",[14,19,20],{},"draw()"," runs every frame. You've thought in frames your whole career.",[23,24,26],"h2",{"id":25},"start-here","Start here",[28,29,34],"pre",{"className":30,"code":31,"language":32,"meta":33,"style":33},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function setup() {\n  createCanvas(800, 800);\n  background(10);\n}\n\nfunction draw() {\n  fill(random(255), 150, 200, 80);\n  noStroke();\n  ellipse(random(width), random(height), random(5, 30));\n}\n","js","",[14,35,36,56,82,97,103,110,122,159,169,218],{"__ignoreMap":33},[37,38,41,45,49,53],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"spNyl","function",[37,46,48],{"class":47},"s2Zo4"," setup",[37,50,52],{"class":51},"sMK4o","()",[37,54,55],{"class":51}," {\n",[37,57,59,62,66,70,73,76,79],{"class":39,"line":58},2,[37,60,61],{"class":47},"  createCanvas",[37,63,65],{"class":64},"swJcz","(",[37,67,69],{"class":68},"sbssI","800",[37,71,72],{"class":51},",",[37,74,75],{"class":68}," 800",[37,77,78],{"class":64},")",[37,80,81],{"class":51},";\n",[37,83,85,88,90,93,95],{"class":39,"line":84},3,[37,86,87],{"class":47},"  background",[37,89,65],{"class":64},[37,91,92],{"class":68},"10",[37,94,78],{"class":64},[37,96,81],{"class":51},[37,98,100],{"class":39,"line":99},4,[37,101,102],{"class":51},"}\n",[37,104,106],{"class":39,"line":105},5,[37,107,109],{"emptyLinePlaceholder":108},true,"\n",[37,111,113,115,118,120],{"class":39,"line":112},6,[37,114,44],{"class":43},[37,116,117],{"class":47}," draw",[37,119,52],{"class":51},[37,121,55],{"class":51},[37,123,125,128,130,133,135,138,140,142,145,147,150,152,155,157],{"class":39,"line":124},7,[37,126,127],{"class":47},"  fill",[37,129,65],{"class":64},[37,131,132],{"class":47},"random",[37,134,65],{"class":64},[37,136,137],{"class":68},"255",[37,139,78],{"class":64},[37,141,72],{"class":51},[37,143,144],{"class":68}," 150",[37,146,72],{"class":51},[37,148,149],{"class":68}," 200",[37,151,72],{"class":51},[37,153,154],{"class":68}," 80",[37,156,78],{"class":64},[37,158,81],{"class":51},[37,160,162,165,167],{"class":39,"line":161},8,[37,163,164],{"class":47},"  noStroke",[37,166,52],{"class":64},[37,168,81],{"class":51},[37,170,172,175,177,179,181,185,187,189,192,194,197,199,201,203,205,208,210,213,216],{"class":39,"line":171},9,[37,173,174],{"class":47},"  ellipse",[37,176,65],{"class":64},[37,178,132],{"class":47},[37,180,65],{"class":64},[37,182,184],{"class":183},"sTEyZ","width",[37,186,78],{"class":64},[37,188,72],{"class":51},[37,190,191],{"class":47}," random",[37,193,65],{"class":64},[37,195,196],{"class":183},"height",[37,198,78],{"class":64},[37,200,72],{"class":51},[37,202,191],{"class":47},[37,204,65],{"class":64},[37,206,207],{"class":68},"5",[37,209,72],{"class":51},[37,211,212],{"class":68}," 30",[37,214,215],{"class":64},"))",[37,217,81],{"class":51},[37,219,221],{"class":39,"line":220},10,[37,222,102],{"class":51},[10,224,225],{},"Random semi-transparent circles, every frame. Not much — but it's a live, running visual system in ten lines.",[23,227,229],{"id":228},"random-vs-noise","random() vs noise()",[10,231,232,235,236,239],{},[14,233,234],{},"random()"," jumps around chaotically. ",[14,237,238],{},"noise()"," flows smoothly — more organic, more interesting:",[28,241,243],{"className":30,"code":242,"language":32,"meta":33,"style":33},"let t = 0;\n\nfunction draw() {\n  let x = noise(t) * width;\n  let y = noise(t + 100) * height;\n  ellipse(x, y, 8);\n  t += 0.005;\n}\n",[14,244,245,261,265,275,305,335,357,370],{"__ignoreMap":33},[37,246,247,250,253,256,259],{"class":39,"line":40},[37,248,249],{"class":43},"let",[37,251,252],{"class":183}," t ",[37,254,255],{"class":51},"=",[37,257,258],{"class":68}," 0",[37,260,81],{"class":51},[37,262,263],{"class":39,"line":58},[37,264,109],{"emptyLinePlaceholder":108},[37,266,267,269,271,273],{"class":39,"line":84},[37,268,44],{"class":43},[37,270,117],{"class":47},[37,272,52],{"class":51},[37,274,55],{"class":51},[37,276,277,280,283,286,289,291,294,297,300,303],{"class":39,"line":99},[37,278,279],{"class":43},"  let",[37,281,282],{"class":183}," x",[37,284,285],{"class":51}," =",[37,287,288],{"class":47}," noise",[37,290,65],{"class":64},[37,292,293],{"class":183},"t",[37,295,296],{"class":64},") ",[37,298,299],{"class":51},"*",[37,301,302],{"class":183}," width",[37,304,81],{"class":51},[37,306,307,309,312,314,316,318,320,323,326,328,330,333],{"class":39,"line":105},[37,308,279],{"class":43},[37,310,311],{"class":183}," y",[37,313,285],{"class":51},[37,315,288],{"class":47},[37,317,65],{"class":64},[37,319,293],{"class":183},[37,321,322],{"class":51}," +",[37,324,325],{"class":68}," 100",[37,327,296],{"class":64},[37,329,299],{"class":51},[37,331,332],{"class":183}," height",[37,334,81],{"class":51},[37,336,337,339,341,344,346,348,350,353,355],{"class":39,"line":112},[37,338,174],{"class":47},[37,340,65],{"class":64},[37,342,343],{"class":183},"x",[37,345,72],{"class":51},[37,347,311],{"class":183},[37,349,72],{"class":51},[37,351,352],{"class":68}," 8",[37,354,78],{"class":64},[37,356,81],{"class":51},[37,358,359,362,365,368],{"class":39,"line":124},[37,360,361],{"class":183},"  t",[37,363,364],{"class":51}," +=",[37,366,367],{"class":68}," 0.005",[37,369,81],{"class":51},[37,371,372],{"class":39,"line":161},[37,373,102],{"class":51},[10,375,376],{},"Pass different offsets for X and Y and you get wandering motion with no keyframes. This is Perlin noise — the function behind most natural-looking generative movement.",[23,378,380],{"id":379},"particle-systems","Particle systems",[10,382,383],{},"A classic: a bunch of points that each move independently.",[28,385,387],{"className":30,"code":386,"language":32,"meta":33,"style":33},"let particles = [];\n\nfunction setup() {\n  createCanvas(800, 800);\n  for (let i = 0; i \u003C 200; i++) {\n    particles.push({ x: random(width), y: random(height), t: random(1000) });\n  }\n}\n\nfunction draw() {\n  background(10, 20); \u002F\u002F low alpha = trails\n  for (let p of particles) {\n    p.x += noise(p.t) * 4 - 2;\n    p.y += noise(p.t + 500) * 4 - 2;\n    point(p.x, p.y);\n    p.t += 0.005;\n  }\n}\n",[14,388,389,403,407,417,433,473,539,544,548,552,562,584,606,643,682,708,723,728],{"__ignoreMap":33},[37,390,391,393,396,398,401],{"class":39,"line":40},[37,392,249],{"class":43},[37,394,395],{"class":183}," particles ",[37,397,255],{"class":51},[37,399,400],{"class":183}," []",[37,402,81],{"class":51},[37,404,405],{"class":39,"line":58},[37,406,109],{"emptyLinePlaceholder":108},[37,408,409,411,413,415],{"class":39,"line":84},[37,410,44],{"class":43},[37,412,48],{"class":47},[37,414,52],{"class":51},[37,416,55],{"class":51},[37,418,419,421,423,425,427,429,431],{"class":39,"line":99},[37,420,61],{"class":47},[37,422,65],{"class":64},[37,424,69],{"class":68},[37,426,72],{"class":51},[37,428,75],{"class":68},[37,430,78],{"class":64},[37,432,81],{"class":51},[37,434,435,439,442,444,447,449,451,454,456,459,461,463,465,468,470],{"class":39,"line":105},[37,436,438],{"class":437},"s7zQu","  for",[37,440,441],{"class":64}," (",[37,443,249],{"class":43},[37,445,446],{"class":183}," i",[37,448,285],{"class":51},[37,450,258],{"class":68},[37,452,453],{"class":51},";",[37,455,446],{"class":183},[37,457,458],{"class":51}," \u003C",[37,460,149],{"class":68},[37,462,453],{"class":51},[37,464,446],{"class":183},[37,466,467],{"class":51},"++",[37,469,296],{"class":64},[37,471,472],{"class":51},"{\n",[37,474,475,478,481,484,486,489,491,494,496,498,500,502,504,506,508,510,512,514,516,518,521,523,525,527,530,532,535,537],{"class":39,"line":112},[37,476,477],{"class":183},"    particles",[37,479,480],{"class":51},".",[37,482,483],{"class":47},"push",[37,485,65],{"class":64},[37,487,488],{"class":51},"{",[37,490,282],{"class":64},[37,492,493],{"class":51},":",[37,495,191],{"class":47},[37,497,65],{"class":64},[37,499,184],{"class":183},[37,501,78],{"class":64},[37,503,72],{"class":51},[37,505,311],{"class":64},[37,507,493],{"class":51},[37,509,191],{"class":47},[37,511,65],{"class":64},[37,513,196],{"class":183},[37,515,78],{"class":64},[37,517,72],{"class":51},[37,519,520],{"class":64}," t",[37,522,493],{"class":51},[37,524,191],{"class":47},[37,526,65],{"class":64},[37,528,529],{"class":68},"1000",[37,531,296],{"class":64},[37,533,534],{"class":51},"}",[37,536,78],{"class":64},[37,538,81],{"class":51},[37,540,541],{"class":39,"line":124},[37,542,543],{"class":51},"  }\n",[37,545,546],{"class":39,"line":161},[37,547,102],{"class":51},[37,549,550],{"class":39,"line":171},[37,551,109],{"emptyLinePlaceholder":108},[37,553,554,556,558,560],{"class":39,"line":220},[37,555,44],{"class":43},[37,557,117],{"class":47},[37,559,52],{"class":51},[37,561,55],{"class":51},[37,563,565,567,569,571,573,576,578,580],{"class":39,"line":564},11,[37,566,87],{"class":47},[37,568,65],{"class":64},[37,570,92],{"class":68},[37,572,72],{"class":51},[37,574,575],{"class":68}," 20",[37,577,78],{"class":64},[37,579,453],{"class":51},[37,581,583],{"class":582},"sHwdD"," \u002F\u002F low alpha = trails\n",[37,585,587,589,591,593,596,599,602,604],{"class":39,"line":586},12,[37,588,438],{"class":437},[37,590,441],{"class":64},[37,592,249],{"class":43},[37,594,595],{"class":183}," p",[37,597,598],{"class":51}," of",[37,600,601],{"class":183}," particles",[37,603,296],{"class":64},[37,605,472],{"class":51},[37,607,609,612,614,616,618,620,622,624,626,628,630,632,635,638,641],{"class":39,"line":608},13,[37,610,611],{"class":183},"    p",[37,613,480],{"class":51},[37,615,343],{"class":183},[37,617,364],{"class":51},[37,619,288],{"class":47},[37,621,65],{"class":64},[37,623,10],{"class":183},[37,625,480],{"class":51},[37,627,293],{"class":183},[37,629,296],{"class":64},[37,631,299],{"class":51},[37,633,634],{"class":68}," 4",[37,636,637],{"class":51}," -",[37,639,640],{"class":68}," 2",[37,642,81],{"class":51},[37,644,646,648,650,653,655,657,659,661,663,665,667,670,672,674,676,678,680],{"class":39,"line":645},14,[37,647,611],{"class":183},[37,649,480],{"class":51},[37,651,652],{"class":183},"y",[37,654,364],{"class":51},[37,656,288],{"class":47},[37,658,65],{"class":64},[37,660,10],{"class":183},[37,662,480],{"class":51},[37,664,293],{"class":183},[37,666,322],{"class":51},[37,668,669],{"class":68}," 500",[37,671,296],{"class":64},[37,673,299],{"class":51},[37,675,634],{"class":68},[37,677,637],{"class":51},[37,679,640],{"class":68},[37,681,81],{"class":51},[37,683,685,688,690,692,694,696,698,700,702,704,706],{"class":39,"line":684},15,[37,686,687],{"class":47},"    point",[37,689,65],{"class":64},[37,691,10],{"class":183},[37,693,480],{"class":51},[37,695,343],{"class":183},[37,697,72],{"class":51},[37,699,595],{"class":183},[37,701,480],{"class":51},[37,703,652],{"class":183},[37,705,78],{"class":64},[37,707,81],{"class":51},[37,709,711,713,715,717,719,721],{"class":39,"line":710},16,[37,712,611],{"class":183},[37,714,480],{"class":51},[37,716,293],{"class":183},[37,718,364],{"class":51},[37,720,367],{"class":68},[37,722,81],{"class":51},[37,724,726],{"class":39,"line":725},17,[37,727,543],{"class":51},[37,729,731],{"class":39,"line":730},18,[37,732,102],{"class":51},[23,734,736],{"id":735},"bringing-it-back-to-video","Bringing it back to video",[10,738,739],{},"p5.js sketches can be recorded frame-by-frame and imported into After Effects as image sequences. Complex organic backgrounds, particle passes, texture layers — all faster to generate in code than to animate by hand.",[741,742,743],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":33,"searchDepth":58,"depth":58,"links":745},[746,747,748,749],{"id":25,"depth":58,"text":26},{"id":228,"depth":58,"text":229},{"id":379,"depth":58,"text":380},{"id":735,"depth":58,"text":736},"3 December, 2025","What happens when you apply an animator's instincts — timing, rhythm, visual weight — to systems built from code? A look at creative coding through the lens of motion work.","md",[754,756],{"src":33,"alt":755},"A generative sketch showing flowing particle trails built in p5.js",{"src":33,"alt":757},"A grid of color-shifting rectangles animated with noise functions",{},"\u002Farticle\u002F0040_dummy_article",{"title":5,"description":751},"article\u002F0040_dummy_article",[763,764,765,766],"generative art","creative coding","p5.js","animation",[765,768,769],"JavaScript","After Effects","RKmBbN3dF1C5dHmVYBY47LCiDnX54JqHY9wjzsWVmG4",[772,776],{"title":773,"path":774,"stem":775,"children":-1},"Automating Your Pipeline with Python","\u002Farticle\u002F0030_dummy_article","article\u002F0030_dummy_article",{"title":777,"path":778,"stem":779,"children":-1},"From Motion Graphics to JavaScript","\u002Farticle\u002F0050_dummy_article","article\u002F0050_dummy_article",1776374632751]