31: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 // ); } })32:[{"id":"1b7e36284c171922c1a5097622164020277c9c274cdcb80e3bf0d3b3c3e7e4f22d39e40c03d7b8806898eaebb9d12e4ea415918b86e295b178851c98c96b0d80","href":"https://static.observableusercontent.com/files/1b7e36284c171922c1a5097622164020277c9c274cdcb80e3bf0d3b3c3e7e4f22d39e40c03d7b8806898eaebb9d12e4ea415918b86e295b178851c98c96b0d80","name":"observable-1622569370.gif","type":"image/gif","lastModified":1622569414781.962,"size":3164394}] 2f:{"title":"Creating Animated Art Stream","cells":[{"id":0,"value":"# Creating Animated Art Stream","pinned":false,"hidden":false,"mode":"md"},{"id":381,"value":"twitch(\"1042542014\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"Some of [Matt's Work](https://observablehq.com/@mattdzugan/cube-swivel-loop)","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"// Matt's work!\nswivelBlocks","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"Some of [Lionel's Work](https://observablehq.com/@makio135/generating-svgs/20)","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"output","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"Some of Mike's.... [experimentation](https://observablehq.com/@mkfreeman/circle-chase)","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"FileAttachment(\"observable-1622569370.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"## Discussion\nWhat exactly are we doing here?","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"dot`digraph{ \"Computational Randomness\" -> \"Dank GIFs?\"; \"Human decisions\" -> \"Dank GIFs?\";}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"## A touch of randomness\n....","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":127,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":167,"value":"seed = Date.now()","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"prng = new PRNG(seed)","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"import {random, randInt, expRand, PRNG} from '@makio135/utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":179,"value":"easings = require('d3-ease')","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"viewof easing = Inputs.select(Object.keys(easings), { label: \"Choose an ease\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"funplot(easings[easing], { xdomain: [0, 1], ydomain: [0, 1] })","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":197,"value":"import {step, smoothstep, linearstep, linearstepUpDown} from '@makio135/utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":252,"value":"easings[easing](linearstepUpDown(time, 0.2, 0.5, 0.8, 1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":82,"value":"## Using Art Tools\n....","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"import {bnb} from '@makio135/bnb'","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"// Require a library for generating simplex noise\nSimplexNoise = require(\"simplex-noise@2.4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"// Create a new instance of our simplex noise object\nsimplex = new SimplexNoise()","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":37,"value":"import { swivelBlocks } from \"@mattdzugan/cube-swivel-loop\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"import { funplot } from \"@mbostock/funplot\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"import { twitch } from \"@codingwithfire/twitch\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}