2e:null 2f:["$","title",null,{"children":"Sonakinatography I, Composition III Animated | Colin Casey | Observable"}] 34:T8ca,{ const delay = 2000 const generator = beats() const iterator = generator[Symbol.asyncIterator]() const bufferSize = Math.ceil(width / squareSize) + 2 const data = new Array(bufferSize) await async.times(bufferSize, async (i) => { const { value } = await iterator.next() data[i] = value }) const svg = d3.create("svg") svg.attr("viewBox", [0, 0, width, height]) yield svg.node() function drawInstruments(value, i) { const { instruments } = value const node = this const rc = Rough.svg(node) instruments.forEach((instrument, j) => { if (instrument.state === 0) { const x1 = 0 const x2 = squareSize const y1 = y(j + 1) + squareSize / 2 const y2 = y(j + 1) + squareSize / 2 node.appendChild(rc.line(x1, y1, x2, y2, { stroke: instrument.color, bowing: _.random(1, 3), roughness: _.random(0.3, 0.7, true), strokeWidth: _.random(2,3) })) } else { const x1 = 0 const y1 = y(j + 1) const width = squareSize const height = squareSize node.appendChild(rc.rectangle(x1, y1, width, height, { stroke: instrument.color, strokeWidth: _.random(0.5, 1.5, true), fill: instrument.color, fillStyle: 'solid', roughness: _.random(0.3, 0.7, true), bowing: _.random(0.1, 0.3, true) })) } }) } while (true) { const t = svg.transition() .duration(delay) svg.selectAll('.beat') .data(data, d => d.beat) .join( enter => enter.append('g') .classed('beat', true) .attr('transform', (d, i) => `translate(${x(i)}, 0)`) .each(drawInstruments), update => update .attr('transform', (d, i) => `translate(${x(i)}, 0)`) .call(update => { update.transition(t) .attr('transform', (d, i) => `translate(${x(i - 1)}, 0)`) }), exit => exit.remove() ) for(let i = 1; i < data.length; i++) { data[i - 1] = data[i] } const { value } = await iterator.next() data[data.length - 1] = value await Promises.delay(delay) } }35:[] 32:{"id":"9e1806b6d956f4a5","slug":"sonakinatography-i-composition-iii-animated","title":"Sonakinatography I, Composition III Animated","thumbnail":"bd74c84a379c3e92066a4fe580e4198e4b58b8623b10b1a5b6e4148f1f6ac052","access_level":"public","create_time":"$D2021-01-26T02:37:39.930Z","update_time":"$D2022-01-13T19:18:06.137Z","view_time":null,"first_public_time":"$D2022-01-13T19:18:42.475Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"5e8b7d21ee76b4f8","login":"colincasey","name":"Colin Casey","avatar_url":"https://avatars-next.observableusercontent.com/8391eae2e6c4a5c95c2067fc7be7029d724516bc020efc503bbddbd4aa5dcf8c","tier":"starter_2024"},"version":1115,"publish_version":1115,"role":null,"authored":false,"authors":[{"type":"individual","id":"e498c9db30bfdcca","login":"colincasey","name":"Colin Casey","avatar_url":"https://avatars-next.observableusercontent.com/8391eae2e6c4a5c95c2067fc7be7029d724516bc020efc503bbddbd4aa5dcf8c","tier":null}],"members":[{"type":"individual","id":"e498c9db30bfdcca","login":"colincasey","name":"Colin Casey","avatar_url":"https://avatars-next.observableusercontent.com/8391eae2e6c4a5c95c2067fc7be7029d724516bc020efc503bbddbd4aa5dcf8c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"0ad1f502895e58e7","slug":"generative-art","title":"Generative Art","owner":{"id":"5e8b7d21ee76b4f8","login":"colincasey","name":"Colin Casey"}},"type":"notebook","body":{"title":"Sonakinatography I, Composition III Animated","cells":[{"id":0,"value":"md`# Sonakinatography I, Composition III Animated`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1105,"value":"[Adapted from Sonakinatography I, Composition III by Channa Horwitz](https://www.lissongallery.com/artists/Estate%20of%20Channa%20Horwitz/artworks/time-structure-composition-iii-sonakinatography-i-detail?image_id=19972)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":942,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"{\n const htmlContent = _.reduce(NUMBER_GRID, (acc, row, i) => {\n acc.push(`

`)\n row.forEach(cell => {\n acc.push(`

\n ${cell}\n

`)\n })\n acc.push('

')\n return acc\n }, []).join('\\n')\n return html`

${htmlContent}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"{\n const htmlContent = _.reduce(NUMBER_GRID, (acc, row, i) => {\n acc.push(`

`)\n row.forEach(cell => {\n acc.push(`

`)\n })\n acc.push('

')\n return acc\n }, []).join('\\n')\n return html`

${htmlContent}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"{\n \n return\n const els = NUMBER_GRID.reduce((acc, row, i) => {\n const intrumentIndex = (NUMBER_GRID.length - i) - 1\n row.forEach((cell, j) => {\n const id = `${intrumentIndex}:${j}`\n const el = document.createElement('div')\n el.style.backgroundColor = COLORS[cell - 1]\n el.className = 'cell'\n acc[id] = el\n })\n return acc\n }, {})\n \n const grid = document.createElement('div')\n grid.className = 'grid-container'\n _.each(els, el => grid.appendChild(el))\n yield grid\n \n const generator = beats()\n const iterator = generator[Symbol.asyncIterator]()\n while(true) {\n const { value } = await iterator.next()\n const { instruments } = value\n _.each(els, el => {\n el.style.opacity = 0.3\n el.textContent = ''\n })\n _.each(instruments, (instrument, i) => {\n const id = `${instrument.index}:${i}`\n const el = els[id]\n el.textContent = instrument.counter\n el.style.opacity = 1\n })\n await Promises.delay(750)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"md`Like a [pendulum wave](https://youtu.be/yVkdfJ9PkRQ?t=25), the movements seem, at first, random but then a brief moment of harmony appears.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## /support`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"COLORS = [\n '#6BB05C',\n '#007652',\n '#1141A2',\n '#352C67',\n '#AB4A7F',\n '#AA2A31',\n '#D75324',\n '#E9A400'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"NUMBER_GRID = ` 2 3 4 5 6 7 8 1\n 3 4 5 6 7 8 1 2\n 4 5 6 7 8 1 2 3\n 5 6 7 8 1 2 3 4\n 6 7 8 1 2 3 4 5\n 7 8 1 2 3 4 5 6\n 8 1 2 3 4 5 6 7\n 1 2 3 4 5 6 7 8`\n .trim()\n .split('\\n')\n .map(line => {\n return line.trim()\n .split(' ')\n .map(v => parseInt(v.trim(), 10))\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"NUMBER_OF_INSTRUMENTS = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"height = {\n return 8 * squareSize\n + margins.top\n + margins.bottom\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"squareSize = 25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"margins = ({\n top: 10,\n bottom: 10,\n left: 10,\n right: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"async function* beats () {\n const instruments = _.times(8, instrument).map(generator => {\n return generator[Symbol.asyncIterator]()\n })\n \n let beat = 1\n const initialState = (await Promise.all(instruments.map(i => {\n return i.next()\n }))).map(result => result.value)\n \n yield { beat, instruments: initialState }\n \n while (true) {\n beat += 1\n const nextState = (await Promise.all(instruments.map(i => {\n return i.next()\n }))).map(result => result.value)\n\n if (_.isEqual(initialState, nextState)) {\n beat = 1\n }\n //console.log(beat)\n \n yield { beat, instruments: nextState }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"instrument = async function* (instrument) {\n const maxIndex = Math.pow(2, NUMBER_GRID.length)\n const counters = NUMBER_GRID.map(row => row[instrument]).reverse()\n \n let direction = 1\n let index = 0\n let counter = counters[index]\n let value = counter\n let color = COLORS[counter - 1]\n \n while (true) {\n while (counter !== 1) {\n yield { \n color, \n direction, \n value,\n counter,\n index,\n state: 0\n }\n counter -= 1\n }\n yield {\n color,\n direction,\n value,\n counter,\n index,\n state: 1\n }\n \n if (index === 0) {\n direction = 1\n } else if (index === counters.length - 1) {\n direction = -1\n }\n index += direction\n counter = counters[index]\n value = counter\n color = COLORS[counter - 1]\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"{\n const generator = beats()\n const iterator = generator[Symbol.asyncIterator]()\n const first = await iterator.next()\n let b = await iterator.next()\n const toString = i => {\n return JSON.stringify(_.map([i.value.instruments[0]], (v) => {\n return _.pick(v, 'direction', 'state', 'value')\n }))\n }\n while (toString(first) !== toString(b)) {\n b = await iterator.next() \n yield [false, first.value, b.value]\n }\n yield [true, first.value, b.value]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"x = (v) => v * squareSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"y = d3.scaleLinear()\n .domain([1, NUMBER_OF_INSTRUMENTS + 1])\n .range([margins.top, NUMBER_OF_INSTRUMENTS * squareSize + margins.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`## /tests`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"it = async function (description, fn) {\n try {\n await fn()\n return html`

✔ ${description}

`\n } catch (e) {\n return e\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"beatAt = async function (index) {\n const generator = beats()\n const iterator = generator[Symbol.asyncIterator]()\n let beatPromise\n _.times(index, () => {\n beatPromise = iterator.next()\n })\n const beat = await beatPromise\n return beat.value.instruments\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"it('should be produce beat 1 correctly', async () => {\n const beat = await beatAt(1)\n expect(_.map(beat, 'value')).toEqual([1, 2, 3, 4, 5, 6, 7, 8])\n expect(_.map(beat, 'counter')).toEqual([1, 2, 3, 4, 5, 6, 7, 8])\n expect(_.map(beat, 'state')).toEqual([1, 0, 0, 0, 0, 0, 0, 0])\n expect(_.map(beat, 'color')).toEqual([\n COLORS[0], COLORS[1], COLORS[2], COLORS[3],\n COLORS[4], COLORS[5], COLORS[6], COLORS[7]\n ])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"it('should produce beat 2 correctly', async () => {\n const beat = await beatAt(2)\n expect(_.map(beat, 'value')).toEqual([8, 2, 3, 4, 5, 6, 7, 8])\n expect(_.map(beat, 'counter')).toEqual([8, 1, 2, 3, 4, 5, 6, 7])\n expect(_.map(beat, 'state')).toEqual([0, 1, 0, 0, 0, 0, 0, 0])\n expect(_.map(beat, 'color')).toEqual([\n COLORS[7], COLORS[1], COLORS[2], COLORS[3],\n COLORS[4], COLORS[5], COLORS[6], COLORS[7]\n ])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"it('should produce beat 36 correctly', async () => {\n const beat = await beatAt(36)\n expect(_.map(beat, 'value')).toEqual([2, 3, 4, 5, 6, 7, 8, 1])\n expect(_.map(beat, 'counter')).toEqual([1, 1, 1, 1, 1, 1, 1, 1])\n expect(_.map(beat, 'state')).toEqual([1, 1, 1, 1, 1, 1, 1, 1])\n expect(_.map(beat, 'color')).toEqual([\n COLORS[1], COLORS[2], COLORS[3], COLORS[4],\n COLORS[5], COLORS[6], COLORS[7], COLORS[0]\n ])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`## /imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Rough = (await import('https://unpkg.com/roughjs@4.3.1/bundled/rough.esm.js?module')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {slider,select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"expect = require('https://bundle.run/expect@26.6.2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"async = require('async')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"