29:null 2a:["$","title",null,{"children":"Creating Animated Art Stream | Mike Freeman | Observable"}] 2f:T734,bnb({ w: 540, h: 540, numFrames: 60, fps: 20, record: true, //video: true, chromaticAberration: .5, shutterAngle: .6, samplesPerFrame: 16, shaderPass: ` precision mediump float; uniform vec2 u_resolution; uniform sampler2D u_texture; void main() { vec2 uv = gl_FragCoord.xy / u_resolution; uv.y = 1. - uv.y; vec3 c = texture2D(u_texture, uv).rgb; if(uv.x > uv.y) c = vec3(1) - c; gl_FragColor = vec4(c, 1.); } `, setup: (s, g) => { g.n = 150; g.offset = _.range(g.n).map((d) => Math.random()); g.offsetX = _.range(g.n).map((d) => random(-50, 50)); g.offsetY = _.range(g.n).map((d) => random(-50, 50)); }, draw: (s, t, g) => { s.background(0); _.range(g.n).map((d, i) => { const cx = 150 + g.offsetX[i] + easings.easeQuadInOut(linearstep((t + g.offset[i]) % 1, 0.1, 0.5)) * 240; const cy = 150 + g.offsetY[i] + easings.easeQuadInOut(linearstep((t + g.offset[i]) % 1, 0.6, 1.0)) * 240; const r = 40; s.circle(cx, cy, r); s.circle( s.width + g.offsetX[i] - (150 + easings.easeQuadInOut(linearstep((t + g.offset[i]) % 1, 0.1, 0.5)) * 240), s.height + g.offsetY[i] - (150 + easings.easeQuadInOut(linearstep((t + g.offset[i]) % 1, 0.6, 1.0)) * 240), r ); }); // s.circle( // 150 + easings.easeQuadInOut(linearstep(t, 0.1, 0.5)) * 200, // 150 + easings.easeQuadInOut(linearstep(t, 0.6, 1.0)) * 200, // 150 // ); // s.fill(255, 204, 0); // s.circle( // s.width - (150 + easings.easeQuadInOut(linearstep(t, 0.1, 0.5)) * 200), // s.height - (150 + easings.easeQuadInOut(linearstep(t, 0.6, 1.0)) * 200), // 150 // ); } })30:[{"id":"1b7e36284c171922c1a5097622164020277c9c274cdcb80e3bf0d3b3c3e7e4f22d39e40c03d7b8806898eaebb9d12e4ea415918b86e295b178851c98c96b0d80","href":"https://static.observableusercontent.com/files/1b7e36284c171922c1a5097622164020277c9c274cdcb80e3bf0d3b3c3e7e4f22d39e40c03d7b8806898eaebb9d12e4ea415918b86e295b178851c98c96b0d80","name":"observable-1622569370.gif","type":"image/gif","lastModified":1622569414781.962,"size":3164394}] 2d:{"id":"912cd3d25c00c6ac","slug":"creating-animated-art-stream","title":"Creating Animated Art Stream","thumbnail":"c99159da38737db96389ebb3b0c034e234f561107bf30803960093a6fb65cc11","access_level":"public","create_time":"$D2021-06-01T17:03:51.736Z","update_time":"$D2021-06-04T09:54:16.959Z","view_time":null,"first_public_time":"$D2021-06-01T17:03:59.424Z","has_unpublished_edits":null,"fork":false,"stars":22,"starred":false,"owner":{"type":"team","id":"5a7641f443a5ac2c","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":"starter_2024"},"version":384,"publish_version":384,"role":null,"authored":false,"authors":[{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null}],"members":[{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null,"role":"editor"},{"type":"individual","id":"e4c2116dac28a624","login":"mattdzugan","name":"Matt Dzugan","avatar_url":"https://avatars-next.observableusercontent.com/5e6f59dbd54952c1978225f1a7fdc6abf438d0beee68bf8df8be4f097380b46a","tier":null,"role":"editor"},{"type":"individual","id":"49edaef976412aba","login":"mkfreeman","name":"Mike Freeman","avatar_url":"https://avatars-next.observableusercontent.com/c41d269cc7b9f5bea7adf2ca109c2b20486a5af02a59df0b162b2fbb33b44a17","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Creating Animated Art Stream","cells":[{"id":0,"value":"# Creating Animated Art Stream","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"twitch(\"1042542014\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"Some of [Matt's Work](https://observablehq.com/@mattdzugan/cube-swivel-loop)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"// Matt's work!\nswivelBlocks","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"Some of [Lionel's Work](https://observablehq.com/@makio135/generating-svgs/20)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"output","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"Some of Mike's.... [experimentation](https://observablehq.com/@mkfreeman/circle-chase)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"FileAttachment(\"observable-1622569370.gif\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## Discussion\nWhat exactly are we doing here?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"dot`digraph{ \"Computational Randomness\" -> \"Dank GIFs?\"; \"Human decisions\" -> \"Dank GIFs?\";}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"## A touch of randomness\n....","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof smoothness = Inputs.range([1, 1000], {\n label: \"Smoothness\",\n step: 1,\n value: 30\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"viewof power = Inputs.range([1, 10], {\n label: \"power\",\n step: 1,\n value: 2\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"seed = Date.now()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"prng = new PRNG(seed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"import {random, randInt, expRand, PRNG} from '@makio135/utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"## Working with time\nThinking about things from 0 (beginning of animation) - 1 (end of animation):\n\n> _Easing_ (an \"actual\" animation term, according to Matt)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"easings = require('d3-ease')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"viewof easing = Inputs.select(Object.keys(easings), { label: \"Choose an ease\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"funplot(easings[easing], { xdomain: [0, 1], ydomain: [0, 1] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"funplot(x => easings[easing](linearstepUpDown(x, .2, .5, .8, 1)), { xdomain: [0, 1], ydomain: [0, 1] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"Matt:\n> this 👆is very similar to a tool i wrote for myself (didn't realize Lionel had made this)\n> _(so suffice it to say, this is definitely a useful pattern)_\n\n~~~js\nfunction genEasedTimer(start, stop, easer){\n return x => ((xstop) ? 1 : easer((x-start)/(stop-start))))\n}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"SVG v.s. Canvas:\n- **SVG**: Describe all the shapes you want to draw -- easier to get started (? markup language + `now` variable)\n- **Canvas**: draw the whole image pixel by pixel (more complex, better for many (5k +) shapes, easier to export to GIFs)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"import {step, smoothstep, linearstep, linearstepUpDown} from '@makio135/utilities'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"// Goes from 0 to 1: \"%\" is the \"modulo\" operator, which gives you the remainder\ntime = Math.floor((now / 30) % 100) / 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"easings[easing](linearstepUpDown(time, 0.2, 0.5, 0.8, 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"## Using Art Tools\n....","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"import {bnb} from '@makio135/bnb'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// Require a library for generating simplex noise\nSimplexNoise = require(\"simplex-noise@2.4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Create a new instance of our simplex noise object\nsimplex = new SimplexNoise()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"// This is Lionel's work, forked so that it could be imported as a named import\nimport { output } from \"@mkfreeman/generating_svgs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import { swivelBlocks } from \"@mattdzugan/cube-swivel-loop\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"import { funplot } from \"@mbostock/funplot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"import { twitch } from \"@codingwithfire/twitch\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"