2:I[6860,["173","static/chunks/173-424fa9be91923976.js","49","static/chunks/49-d41f7eeba1de0524.js","33","static/chunks/app/blog/creating-sketches-with-solandra-for-amimetic/page-0933c37ce5ffa07e.js"],"IndexPageCard"]
3:I[9275,[],""]
4:I[1343,[],""]
5:I[2650,["173","static/chunks/173-424fa9be91923976.js","231","static/chunks/231-1e7bbdc770c66fc3.js","521","static/chunks/521-7266f541e89dccd7.js","185","static/chunks/app/layout-1a67d20efb7fbcee.js"],"Providers"]
6:I[7848,["173","static/chunks/173-424fa9be91923976.js","231","static/chunks/231-1e7bbdc770c66fc3.js","521","static/chunks/521-7266f541e89dccd7.js","185","static/chunks/app/layout-1a67d20efb7fbcee.js"],"Header"]
7:I[231,["173","static/chunks/173-424fa9be91923976.js","49","static/chunks/49-d41f7eeba1de0524.js","231","static/chunks/231-1e7bbdc770c66fc3.js","847","static/chunks/847-d03f1a8cba4db626.js","404","static/chunks/app/blog/page-527c30508ff17cd7.js"],""]
0:["zCwPuQV_WbLEohhlcHJz-",[[["",{"children":["blog",{"children":["creating-sketches-with-solandra-for-amimetic",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",{"children":["blog",{"children":["creating-sketches-with-solandra-for-amimetic",{"children":["__PAGE__",{},[["$L1",["$","div",null,{"className":"sm:px-8 mt-16 lg:mt-32","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"relative px-4 sm:px-8 lg:px-12","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","div",null,{"className":"xl:relative","children":["$","div",null,{"className":"mx-auto max-w-2xl","children":["$","article",null,{"children":[["$","header",null,{"className":"flex flex-col","children":[["$","h1",null,{"className":"mt-6 text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100","children":"Creating sketches with Solandra for the Amimetic website"}],["$","time",null,{"dateTime":"2024-06-08","className":"order-first flex items-center text-base text-zinc-400 dark:text-zinc-500","children":[["$","span",null,{"className":"h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"}],["$","span",null,{"className":"ml-3","children":"8 June 2024"}]]}]]}],["$","div",null,{"className":"mt-8 prose dark:prose-invert","data-mdx-content":true,"children":[["$","p",null,{"children":["I wanted to create a few 'sketches' with my ",["$","a",null,{"href":"https://solandra.amimetic.co.uk","children":"open source, TypeScript-first creative coding library Solandra"}]," both as a demo and for something interesting to look at on my website. Here is their source code and explanations."]}],"\n",["$","h2",null,{"children":"1"}],"\n",["$","$L2",null,{"imageIndex":0,"size":1344}],"\n",["$","p",null,{"children":["This shows off a couple of Solandra's features. ",["$","code",null,{"children":"palettePreset"}]," returns a nice palette of colours in an array."]}],"\n",["$","p",null,{"children":["Then the main code converts a basic shape to a ",["$","code",null,{"children":"path"}]," then uses a bunch of Solandra's powerful path manipulation functions to create a bunch of interesting shapes which can then be coloured by the palette."]}],"\n",["$","pre",null,{"className":"language-typescript","children":["$","code",null,{"className":"language-typescript","children":[["$","span",null,{"className":"token keyword","children":"const"}]," cols ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"palettePreset"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token string","children":"'natural'"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"12"}],["$","span",null,{"className":"token punctuation","children":")"}],"\ns",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"background"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"350"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"30"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"80"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n\n",["$","span",null,{"className":"token keyword","children":"new"}]," ",["$","span",null,{"className":"token class-name","children":["$","span",null,{"className":"token maybe-class-name","children":"RegularPolygon"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," at",["$","span",null,{"className":"token operator","children":":"}]," s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"meta"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"center"}],["$","span",null,{"className":"token punctuation","children":","}]," r",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"0.35"}],["$","span",null,{"className":"token punctuation","children":","}]," n",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"6"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"path"}],"\n  ",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"exploded"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n  ",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"flatMap"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],"p",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," p",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"exploded"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n  ",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"flatMap"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],"p",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," p",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"exploded"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," scale",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"1.2"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n  ",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"forEach"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],"p",["$","span",null,{"className":"token punctuation","children":","}]," i",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n    s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setFillColor"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token spread operator","children":"..."}],"cols",["$","span",null,{"className":"token punctuation","children":"["}],"i ",["$","span",null,{"className":"token operator","children":"%"}]," cols",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"length"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n    s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"fill"}],["$","span",null,{"className":"token punctuation","children":"("}],"p",["$","span",null,{"className":"token punctuation","children":")"}],"\n  ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}]}],"\n",["$","h2",null,{"children":"2"}],"\n",["$","$L2",null,{"imageIndex":1,"size":1344}],"\n",["$","p",null,{"children":["This one uses some HTML canvas capabilities but as nicely exposed by Solandra. We can fill a linear gradient with an arbitrary clipping (which with Solandra we can do via a function passed to ",["$","code",null,{"children":"withClipping"}],")."]}],"\n",["$","pre",null,{"className":"language-typescript","children":["$","code",null,{"className":"language-typescript","children":["s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"background"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"210"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"70"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n\ns",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"withClipping"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token keyword","children":"new"}]," ",["$","span",null,{"className":"token class-name","children":["$","span",null,{"className":"token maybe-class-name","children":"Circle"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," at",["$","span",null,{"className":"token operator","children":":"}]," s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"meta"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"center"}],["$","span",null,{"className":"token punctuation","children":","}]," r",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"0.4"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"backgroundGradient"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n    ",["$","span",null,{"className":"token keyword","children":"new"}]," ",["$","span",null,{"className":"token class-name","children":["$","span",null,{"className":"token maybe-class-name","children":"LinearGradient"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}],"\n      ",["$","span",null,{"className":"token keyword module","children":"from"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"0.5"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n      to",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"0.5"}],["$","span",null,{"className":"token punctuation","children":","}]," s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"meta"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"bottom"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n      colors",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"\n        ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," h",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"210"}],["$","span",null,{"className":"token punctuation","children":","}]," s",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"80"}],["$","span",null,{"className":"token punctuation","children":","}]," l",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"40"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n        ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"1"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," h",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"190"}],["$","span",null,{"className":"token punctuation","children":","}]," s",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"60"}],["$","span",null,{"className":"token punctuation","children":","}]," l",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"60"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n      ",["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n    ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":","}],"\n  ",["$","span",null,{"className":"token punctuation","children":")"}],"\n\n  s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"forPoissonDiskPoints"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," minDist",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"0.05"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"pt",["$","span",null,{"className":"token punctuation","children":","}]," i",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n    ",["$","span",null,{"className":"token keyword control-flow","children":"if"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token function","children":"perlin2"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token spread operator","children":"..."}],"v",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"scale"}],["$","span",null,{"className":"token punctuation","children":"("}],"pt",["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"4"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":">"}]," ",["$","span",null,{"className":"token number","children":"0.05"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n      s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setFillColor"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"210"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"90"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0.4"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n      s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"fill"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token keyword","children":"new"}]," ",["$","span",null,{"className":"token class-name","children":["$","span",null,{"className":"token maybe-class-name","children":"RegularPolygon"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," at",["$","span",null,{"className":"token operator","children":":"}]," pt",["$","span",null,{"className":"token punctuation","children":","}]," r",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"0.06"}],["$","span",null,{"className":"token punctuation","children":","}]," n",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"6"}],["$","span",null,{"className":"token punctuation","children":","}]," a",["$","span",null,{"className":"token operator","children":":"}]," s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"randomAngle"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n    ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n  ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}]}],"\n",["$","h2",null,{"children":"3"}],"\n",["$","$L2",null,{"imageIndex":2,"size":1344}],"\n",["$","p",null,{"children":["Here we use the new ",["$","code",null,{"children":"forPoissonDiskPoints"}]," function to iterate over a bunch of points created by the Poisson disk algorithm."]}],"\n",["$","p",null,{"children":["We can colour nicely based on a palette using the ",["$","code",null,{"children":"perlin2"}]," function to get a nice natural looking value."]}],"\n",["$","pre",null,{"className":"language-typescript","children":["$","code",null,{"className":"language-typescript","children":[["$","span",null,{"className":"token keyword","children":"const"}]," cols ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"palettePreset"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token string","children":"'autumnal'"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"20"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token function-variable function","children":"c"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"v",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token builtin","children":"number"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," cols",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"floor"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"1"}]," ",["$","span",null,{"className":"token operator","children":"+"}]," v",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"*"}]," cols",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"length"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"2"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"]"}],"\n\ns",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"background"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"40"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"70"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"80"}],["$","span",null,{"className":"token punctuation","children":")"}],"\ns",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"forPoissonDiskPoints"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," minDist",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"0.05"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"pt",["$","span",null,{"className":"token punctuation","children":","}]," i",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  ",["$","span",null,{"className":"token keyword","children":"const"}]," value ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"perlin2"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token spread operator","children":"..."}],"pt",["$","span",null,{"className":"token punctuation","children":")"}],"\n  s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setFillColor"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token spread operator","children":"..."}],["$","span",null,{"className":"token method function property-access","children":"c"}],["$","span",null,{"className":"token punctuation","children":"("}],"value",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n  s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"fill"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token keyword","children":"new"}]," ",["$","span",null,{"className":"token class-name","children":["$","span",null,{"className":"token maybe-class-name","children":"Circle"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," at",["$","span",null,{"className":"token operator","children":":"}]," pt",["$","span",null,{"className":"token punctuation","children":","}]," r",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"0.02"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}]}],"\n",["$","h2",null,{"children":"4"}],"\n",["$","$L2",null,{"imageIndex":3,"size":1344}],"\n",["$","p",null,{"children":["This is one of the longer examples but shows how we can layer several arbitrary drawings to create something interesting. It was adapted from one of the ",["$","a",null,{"href":"https://solandra.amimetic.co.uk/main","children":"many examples in the Solandra docs"}],"."]}],"\n",["$","pre",null,{"className":"language-typescript","children":["$","code",null,{"className":"language-typescript","children":[["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," bottom",["$","span",null,{"className":"token punctuation","children":","}]," right ",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token operator","children":"="}]," s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"meta"}],"\ns",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"backgroundGradient"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n  ",["$","span",null,{"className":"token keyword","children":"new"}]," ",["$","span",null,{"className":"token class-name","children":["$","span",null,{"className":"token maybe-class-name","children":"LinearGradient"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}],"\n    ",["$","span",null,{"className":"token keyword module","children":"from"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n    to",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," bottom",["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n    colors",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"\n      ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," h",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"215"}],["$","span",null,{"className":"token punctuation","children":","}]," s",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"80"}],["$","span",null,{"className":"token punctuation","children":","}]," l",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"60"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n      ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"1"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," h",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"215"}],["$","span",null,{"className":"token punctuation","children":","}]," s",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"80"}],["$","span",null,{"className":"token punctuation","children":","}]," l",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"20"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n    ",["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n  ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":","}],"\n",["$","span",null,{"className":"token punctuation","children":")"}],"\n\ns",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"times"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"40"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setFillColor"}],["$","span",null,{"className":"token punctuation","children":"("}],"s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"uniformRandomInt"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," ",["$","span",null,{"className":"token keyword module","children":"from"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"180"}],["$","span",null,{"className":"token punctuation","children":","}]," to",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"225"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"80"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"40"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0.3"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n  s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"fill"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n    ",["$","span",null,{"className":"token keyword","children":"new"}]," ",["$","span",null,{"className":"token class-name","children":["$","span",null,{"className":"token maybe-class-name","children":"Rect"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}],"\n      at",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"gaussian"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," mean",["$","span",null,{"className":"token operator","children":":"}]," bottom ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"0.6"}],["$","span",null,{"className":"token punctuation","children":","}]," sd",["$","span",null,{"className":"token operator","children":":"}]," bottom ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"0.15"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n      w",["$","span",null,{"className":"token operator","children":":"}]," right",["$","span",null,{"className":"token punctuation","children":","}],"\n      h",["$","span",null,{"className":"token operator","children":":"}]," bottom ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"0.1"}],["$","span",null,{"className":"token punctuation","children":","}],"\n    ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":","}],"\n  ",["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\ns",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"lineWidth"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token number","children":"0.005"}],"\ns",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"times"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"20"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setStrokeColor"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"100"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"0.2"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n  ",["$","span",null,{"className":"token keyword","children":"const"}]," y ",["$","span",null,{"className":"token operator","children":"="}]," s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"gaussian"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," mean",["$","span",null,{"className":"token operator","children":":"}]," bottom ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"0.8"}],["$","span",null,{"className":"token punctuation","children":","}]," sd",["$","span",null,{"className":"token operator","children":":"}]," bottom ",["$","span",null,{"className":"token operator","children":"*"}]," ",["$","span",null,{"className":"token number","children":"0.1"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n  s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"draw"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token keyword","children":"new"}]," ",["$","span",null,{"className":"token class-name","children":["$","span",null,{"className":"token maybe-class-name","children":"Line"}]}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token number","children":"0"}],["$","span",null,{"className":"token punctuation","children":","}]," y",["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"right",["$","span",null,{"className":"token punctuation","children":","}]," y",["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}]}],"\n",["$","h2",null,{"children":"5"}],"\n",["$","$L2",null,{"imageIndex":4,"size":1344}],"\n",["$","p",null,{"children":"One of Solandra's nicest features is an original take on how to draw curves, with an approach, that unlike standard Bezier curves:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"allows for the shape to remain the same as the start and end points change"}],"\n",["$","li",null,{"children":"has a more natural, human set of parameters: you set the 'curve size' or 'bulbousness' rather than control points."}],"\n"]}],"\n",["$","p",null,{"children":"Here we draw a bunch of curves between points with a variety of pseudo-random parameters."}],"\n",["$","pre",null,{"className":"language-typescript","children":["$","code",null,{"className":"language-typescript","children":["s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"backgroundFromSpec"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," h",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"30"}],["$","span",null,{"className":"token punctuation","children":","}]," s",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"50"}],["$","span",null,{"className":"token punctuation","children":","}]," l",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"90"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n\n",["$","span",null,{"className":"token keyword","children":"const"}]," hr ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"palettePreset"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token string","children":"'rusty'"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token number","children":"22"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n\n",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  bottom",["$","span",null,{"className":"token operator","children":":"}]," b",["$","span",null,{"className":"token punctuation","children":","}],"\n  right",["$","span",null,{"className":"token operator","children":":"}]," r",["$","span",null,{"className":"token punctuation","children":","}],"\n  center",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"cX",["$","span",null,{"className":"token punctuation","children":","}]," cY",["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}]," ",["$","span",null,{"className":"token operator","children":"="}]," s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"meta"}],"\n",["$","span",null,{"className":"token keyword","children":"const"}]," u",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token maybe-class-name","children":"Point2D"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"cX ",["$","span",null,{"className":"token operator","children":"-"}]," r ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"3.5"}],["$","span",null,{"className":"token punctuation","children":","}]," cY ",["$","span",null,{"className":"token operator","children":"-"}]," b ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"3.5"}],["$","span",null,{"className":"token punctuation","children":"]"}],"\n",["$","span",null,{"className":"token keyword","children":"const"}]," v",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token maybe-class-name","children":"Point2D"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"cX ",["$","span",null,{"className":"token operator","children":"+"}]," r ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"3.5"}],["$","span",null,{"className":"token punctuation","children":","}]," cY ",["$","span",null,{"className":"token operator","children":"+"}]," b ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"3.5"}],["$","span",null,{"className":"token punctuation","children":"]"}],"\n\ns",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"lineWidth"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token number","children":"0.02"}],"\ns",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"range"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}]," ",["$","span",null,{"className":"token keyword module","children":"from"}],["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token operator","children":"-"}],["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":","}]," to",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":","}]," n",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"20"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"n",["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token arrow operator","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n  s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"setStrokeColor"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token spread operator","children":"..."}],"hr",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token punctuation","children":"("}],"n ",["$","span",null,{"className":"token operator","children":"+"}]," ",["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token operator","children":"%"}]," ",["$","span",null,{"className":"token number","children":"20"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n  s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"draw"}],["$","span",null,{"className":"token punctuation","children":"("}],"\n    ",["$","span",null,{"className":"token maybe-class-name","children":"Path"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"startAt"}],["$","span",null,{"className":"token punctuation","children":"("}],"u",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"addCurveTo"}],["$","span",null,{"className":"token punctuation","children":"("}],"v",["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n      curveSize",["$","span",null,{"className":"token operator","children":":"}]," n ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"10"}],["$","span",null,{"className":"token punctuation","children":","}],"\n      curveAngle",["$","span",null,{"className":"token operator","children":":"}]," s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"gaussian"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":","}],"\n      bulbousness",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"1"}]," ",["$","span",null,{"className":"token operator","children":"+"}]," ",["$","span",null,{"className":"token known-class-name class-name","children":"Math"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token method function property-access","children":"cos"}],["$","span",null,{"className":"token punctuation","children":"("}],"s",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"t"}]," ",["$","span",null,{"className":"token operator","children":"/"}]," ",["$","span",null,{"className":"token number","children":"2"}]," ",["$","span",null,{"className":"token operator","children":"+"}]," n",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":","}],"\n    ",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":","}],"\n  ",["$","span",null,{"className":"token punctuation","children":")"}],"\n",["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}]}]]}]]}]}]}]}]}]}]}]],null],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children","creating-sketches-with-solandra-for-amimetic","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","styles":null}],null]},[["$","html",null,{"lang":"en","className":"h-full antialiased","suppressHydrationWarning":true,"children":["$","body",null,{"className":"flex h-full bg-zinc-200 dark:bg-black","children":["$","$L5",null,{"children":["$","div",null,{"className":"flex w-full","children":[["$","div",null,{"className":"fixed inset-0 flex justify-center sm:px-8","children":["$","div",null,{"className":"flex w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"}]}]}],["$","div",null,{"className":"relative flex w-full flex-col","children":[["$","$L6",null,{}],["$","main",null,{"className":"flex-auto","children":["$","$L3",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":["$","div",null,{"className":"sm:px-8 flex h-full items-center pt-16 sm:pt-32","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"relative px-4 sm:px-8 lg:px-12","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","div",null,{"className":"flex flex-col items-center","children":[["$","p",null,{"className":"text-base font-semibold text-zinc-400 dark:text-zinc-500","children":"404"}],["$","h1",null,{"className":"mt-4 text-4xl font-bold tracking-tight text-rose-800 sm:text-5xl dark:text-rose-100","children":"Page not found"}],["$","p",null,{"className":"mt-4 text-base text-zinc-600 dark:text-zinc-400","children":"Sorry, we couldn’t find the page you’re looking for."}],["$","p",null,{"className":"mt-4 text-base text-zinc-600 dark:text-zinc-400","children":["You may want to try"," ",["$","a",null,{"href":"https://archive.amimetic.co.uk","className":"font-semibold text-rose-600 hover:text-rose-500","children":"the old version of this website"}]," ","as not everything was included here."]}],["$","$L7",null,{"className":"inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70 mt-4","href":"/","children":"Go back home"}]]}]}]}]}]}],"notFoundStyles":[],"styles":null}]}],["$","footer",null,{"className":"mt-32 flex-none","children":["$","div",null,{"className":"sm:px-8","children":["$","div",null,{"className":"mx-auto w-full max-w-7xl lg:px-8","children":["$","div",null,{"className":"border-t border-zinc-100 pb-16 pt-10 dark:border-zinc-700/40","children":["$","div",null,{"className":"relative px-4 sm:px-8 lg:px-12","children":["$","div",null,{"className":"mx-auto max-w-2xl lg:max-w-5xl","children":["$","div",null,{"className":"flex flex-col items-center justify-between gap-6 sm:flex-row","children":[["$","div",null,{"className":"flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200","children":[["$","$L7",null,{"href":"/about","className":"transition hover:text-sky-500 dark:hover:text-sky-400","children":"About"}],["$","$L7",null,{"href":"/blog","className":"transition hover:text-sky-500 dark:hover:text-sky-400","children":"Writing"}],["$","$L7",null,{"href":"/projects","className":"transition hover:text-sky-500 dark:hover:text-sky-400","children":"Projects"}]]}],["$","p",null,{"className":"text-sm text-zinc-400 dark:text-zinc-500","children":["© ",2024," James Porter"]}]]}]}]}]}]}]}]}]]}]]}]}]}]}],null],null],[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/3dda7107ffc2265a.css","precedence":"next","crossOrigin":"$undefined"}]],"$L8"]]]]
8:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","1",{"charSet":"utf-8"}],["$","title","2",{"children":"Creating sketches with Solandra for the Amimetic website - James Porter"}],["$","meta","3",{"name":"description","content":"Projects and thoughts from James Porter"}]]
1:null