2b:null 2c:["$","title",null,{"children":"Unknown Pleasures | Colin Casey | Observable"}] 31:[] 2f:{"id":"67fb85e823676a30","slug":"unknown-pleasures","title":"Unknown Pleasures","thumbnail":"0c5216bea70b043cd1da55979c50e8b22d7a0357fdbf5ef76bdbe94a4ebb97f4","access_level":"public","create_time":"$D2019-10-26T01:46:38.382Z","update_time":"$D2021-01-31T01:00:22.783Z","view_time":null,"first_public_time":"$D2019-10-27T04:45:38.806Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5e8b7d21ee76b4f8","login":"colincasey","name":"Colin Casey","avatar_url":"https://avatars-next.observableusercontent.com/8391eae2e6c4a5c95c2067fc7be7029d724516bc020efc503bbddbd4aa5dcf8c","tier":"starter_2024"},"version":385,"publish_version":385,"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,"subscribed":null,"forks":0,"collection":{"id":"0ad1f502895e58e7","slug":"generative-art","title":"Generative Art","owner":{"id":"5e8b7d21ee76b4f8","login":"colincasey","name":"Colin Casey"}},"type":"notebook","body":{"title":"Unknown Pleasures","cells":[{"id":0,"value":"md`# Unknown Pleasures`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"vis = {\n const ctx = DOM.context2d(canvasSize, canvasSize)\n const canvas = ctx.canvas\n const dpr = window.devicePixelRatio\n \n canvas.width = canvasSize * dpr\n canvas.height = canvasSize * dpr\n \n ctx.scale(dpr, dpr)\n ctx.lineWidth = lineWidth\n ctx.strokeStyle = lineColor\n ctx.fillStyle = backgroundColor\n ctx.fillRect(0, 0, canvasSize, canvasSize)\n \n lines.forEach(line => {\n const p0 = _.first(line)\n ctx.beginPath()\n ctx.moveTo(p0.x, p0.y)\n line.forEach(({ controlPoint, endPoint }) => ctx.quadraticCurveTo(\n controlPoint.x, \n controlPoint.y, \n endPoint.x, \n endPoint.y\n ))\n ctx.save()\n ctx.globalCompositeOperation = 'source-over'\n ctx.fill()\n ctx.restore()\n ctx.stroke()\n })\n \n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"md`# /references`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"md`* Code based on the [Joy Division tutorial](https://generativeartistry.com/tutorials/joy-division/) from [Generative Artistry](https://generativeartistry.com/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`# /configuration`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"viewof linesToRender = slider({\n min: 40, \n max: 100, \n step: 1, \n value: isDevelopment ? 70 : 100, \n title: \"Change the step to change the amount of lines to render\", \n description: \"Lines\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"viewof variance = {\n const max = size.width / 3\n const min = max / 2\n const value = (max + min) / 2.5\n return slider({\n min, \n max, \n value,\n step: 0.1,\n title: \"Change the variance to change the amount of vertical noise\", \n description: \"Variance\"\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"viewof lineColor = color({\n value: \"#efefef\",\n title: \"Line Color\",\n description: \"The color of the line\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"viewof backgroundColor = color({\n value: \"#111111\",\n title: \"Background Color\",\n description: \"The color of the background\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`# /support`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"isDevelopment = mode === 'dev'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"lineWidth = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"canvasSize = isDevelopment ? 300 : width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"step = canvasSize / linesToRender","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"margin = {\n const top = canvasSize / 7\n const bottom = top\n const left = canvasSize / 7 * 2\n const right = left\n return { top, right, bottom, left }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"size = ({ \n width: canvasSize - margin.left - margin.right,\n height: canvasSize - margin.top - margin.bottom\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"xs = _.range(margin.left, margin.left + size.width, step)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"ys = _.range(margin.top, margin.top + size.height, step)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"lines = ys.map(createLine)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"createLine = (x) => _.chain(xs)\n .map(createPoint(x))\n .map(toQuadradicCurve)\n .filter(isTruthy)\n .tail()\n .value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"createPoint = (y) => (x) => {\n const distanceToCenter = Math.abs(x - canvasSize / 2)\n const v = Math.max(variance - distanceToCenter, 0)\n const random = -1 * Math.random() * v / 2\n return { x, y: y + random }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"function toQuadradicCurve ({ x, y }, index, points) {\n const nextPoint = points[index + 1]\n\n if (!nextPoint) return null\n \n return { \n controlPoint: { \n x, \n y \n },\n endPoint: { \n x: (x + nextPoint.x) / 2,\n y: (y + nextPoint.y) / 2\n }\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"isTruthy = _.identity","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`# /imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"import {slider, checkbox, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"md`# /flags`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"viewof mode = checkbox({\n description: \"Toggle development mode\",\n options: [{ value: \"dev\", label: \"Development Mode\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"