2f:T1065,processor = ({ timerCallback: function() { if (this.video.paused || this.video.ended) { return; } this.computeFrame(); var self = this; setTimeout(function() { self.timerCallback(); }, 16); // roughly 60 frames per second }, doLoad: function() { this.video = myVideo; this.c1 = myCanvas; this.ctx1 = this.c1.getContext("2d"); var self = this; this.video.addEventListener( "play", function() { self.width = self.video.width; self.height = self.video.height; self.timerCallback(); }, false ); }, // computeFrame: function() { // this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); // var input = this.ctx1.getImageData(0, 0, this.width, this.height); // var output = this.cctx1.getImageData(0, 0, this.width, this.height); // distortPixels(input, output, this.width, this.height, reverseMap); // var frame = this.ctx1.getImageData(0, 0, this.width, this.height); // var l = frame.data.length / 4; // for (var i = 0; i < l; i++) { // var grey = // (frame.data[i * 4 + 0] + // frame.data[i * 4 + 1] + // frame.data[i * 4 + 2]) / // 3; // frame.data[i * 4 + 0] = grey; // frame.data[i * 4 + 1] = grey; // frame.data[i * 4 + 2] = grey; // } // this.ctx1.putImageData(frame, 0, 0); // return; // } // computeFrame: function() { // this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); // var frame = this.ctx1.getImageData(0, 0, this.width, this.height); // var l = frame.data.length / 4; // for (var i = 0; i < l; i++) { // var grey = // (frame.data[i * 4 + 0] + // frame.data[i * 4 + 1] + // frame.data[i * 4 + 2]) / // 3; // frame.data[i * 4 + 0] = grey; // frame.data[i * 4 + 1] = grey; // frame.data[i * 4 + 2] = grey; // } // this.ctx1.putImageData(frame, 0, 0); // return; // } // computeFrame: function() { // this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); // var frame = this.ctx1.getImageData(0, 0, this.width, this.height); // var l = frame.data.length / 4; // for (var i = 0; i < l; i++) { // var grey = // (frame.data[i * 4 + 0] + // frame.data[i * 4 + 1] + // frame.data[i * 4 + 2]) / // 3; // frame.data[i * 4 + 0] = grey; // frame.data[i * 4 + 1] = grey; // frame.data[i * 4 + 2] = grey; // } // this.ctx1.putImageData(frame, 0, 0); // return; // } computeFrame: function() { this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); var frame = this.ctx1.getImageData(0, 0, this.width, this.height); // var l = frame.data.length / 4; var l = frame.data.length; if (color_fluct != 0 | color_base != 0) { // let cur = episode_selection[img_choice] // if (colorMap == "Color Pallette") { // interpolator = d3.interpolateRgb(...cur_colors); // } else { // interpolator = d3[`interpolate${colorMap}`]; // } let interpolator = d3[`interpolate${colorMap}`]; const LUT = Array.from({ length: 256 }, (_, i) => d3.color(interpolator(i / 255))); let w = color_fluct*spectralSpread/50 + color_base*spectralCentroid/50 for(let i=0; i < l; i+=4) { const color = LUT[frame.data[i]]; // frame.data[i] = (1-w) * frame.data[i] + w*color.r; // frame.data[i+1] = (1-w) * frame.data[i+1] + w*color.g; // frame.data[i+2] = (1-w) * frame.data[i+2] + w*color.b; frame.data[i] = color.r; frame.data[i+1] = color.g; frame.data[i+2] = color.b; } // var grey = // (frame.data[i] + // frame.data[i+1] + // frame.data[i+2]) / // 3; // frame.data[i] = grey; // frame.data[i+1] = grey; // frame.data[i+2] = grey; // } } this.ctx1.putImageData(frame, 0, 0); return; } })30:T499,function displayDistortedImage(input, reverseMap) { const ctx = DOM.context2d(input.width, input.height, 1); const outputPixels = ctx.getImageData(0, 0, input.width, input.height); distortPixels( input.data, outputPixels, input.width, input.height, reverseMap ); if (color_fluct != 0 | color_base != 0) { let cur = episode_selection[img_choice] let interpolator if (colorMap == "Color Pallette") { interpolator = d3.interpolateRgb(...cur_colors); } else { interpolator = d3[`interpolate${colorMap}`]; } const LUT = Array.from({ length: 256 }, (_, i) => d3.color(interpolator(i / 255))); let w = color_fluct*spectralSpread/50 + color_base*spectralCentroid/50 for(let i=0; i d['Episode']), {label: \"Episode Selection\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"// viewof audioHTML = html`\n//

\n// `","pinned":false,"hidden":false,"mode":"ojs"},{"id":5514,"value":"myCanvas = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":5516,"value":"myVideo = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":3762,"value":"// displayDistortedImage(scrub_input, reverseMap)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3368,"value":"viewof amount_scale = Range([0, 1000], {\n label: \"Strength\",\n step: 1,\n // value: maxAmount / 2\n value: 60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3376,"value":"viewof scaling = Range([0, 150], {\n label: \"Scale\",\n step: 0.01,\n // value: maxScale / 4\n value: 15\n})\n// viewof distortion_power = Range([0.1, 10], {\n// label: \"Distortion Power\",\n// step: .01,\n// // value: maxAmount / 2\n// value: 1\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3363,"value":"viewof octaves = Range([1, 4], {\n label: \"Detail\",\n step: 1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3379,"value":"viewof offset1 = Range([0, 500], {\n label: \"X Offset\",\n step: 1,\n value: 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3384,"value":"viewof offset2 = Range([0, 500], {\n label: \"Y Offset\",\n step: 1,\n value: 40\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4920,"value":"viewof reversal = Range([-4, 4], {\n label: \"Inversion Bound\",\n step: 0.1,\n // value: maxScale / 4\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5347,"value":"viewof color_fluct = Range([-10, 10], {\n label: \"Color Spread\",\n step: .01,\n value: -1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5143,"value":"viewof color_base = Range([-10, 10], {\n label: \"Color Center\",\n step: .01,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5076,"value":"viewof colorMap=Inputs.radio([\"Spectral\", \"Turbo\", \"Cividis\", \"Viridis\", \"Magma\", \"Cool\", \"Warm\", \"Sinebow\", \"Inferno\", \"Plasma\"],\n {value:\"Spectral\",label:\"Color Map:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5506,"value":"# new","pinned":false,"hidden":false,"mode":"md"},{"id":5518,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":5520,"value":"processor.doLoad();","pinned":true,"hidden":false,"mode":"ojs"},{"id":5508,"value":"## ...","pinned":false,"hidden":false,"mode":"md"},{"id":1421,"value":"## Traits","pinned":false,"hidden":false,"mode":"md"},{"id":640,"value":"energy = {\n now;\n return analyzer.get([\"energy\"]).energy\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"flatnessDistort = {\n now;\n return analyzer.get([\"spectralFlatness\"]).spectralFlatness\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"oscillation = {\n return Math.sin(energy * now * .000000000025);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5211,"value":"spectralSpread = {\n now;\n return analyzer.get([\"spectralSpread\"]).spectralSpread || 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4989,"value":"spectralCentroid = {\n now;\n return analyzer.get([\"spectralCentroid\"]).spectralCentroid || 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4900,"value":"reverseMap = {\n now;\n if (multiplier > reversal)\n return false\n else\n return true\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"multiplier = Math.PI * (-10 + ((((now * 0.0005) % 10) + energy * 5) % 20)) / 10\n// random1 = {\n// now;\n// if (Math.random() > .5)\n// return 1\n// else\n// return -1\n// }\n// random2 = {\n// now;\n// if (Math.random() > .5)\n// return 1\n// else\n// return -1\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`## Audio Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"audioUrl = audioUrls[episode_selection[0][\"Episode\"]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4327,"value":"audioUrls = ({\n Family: FileAttachment(\"Off the Air - S11E01 - Family [WEBDL-1080p]@2.mp3\").url() ,\n Nightmares: FileAttachment(\"Off the Air - S02E03 - Nightmares [WEBDL-1080p]@1.mp3\").url(),\n Dreams: FileAttachment(\"Off the Air - S10E02 - Dreams [WEBDL-1080p].mp3\").url(),\n Coping: FileAttachment(\"Off the Air - S10E01 - Coping [WEBDL-1080p].mp3\").url(),\n Love: FileAttachment(\"Off the Air - S08E02 - Love [WEBDL-1080p].mp3\").url(),\n Conflict: FileAttachment(\"Off the Air - S05E02 - Conflict [WEBDL-1080p].mp3\").url(),\n Paradise: FileAttachment(\"Off the Air - S07E03 - Paradise [WEBDL-1080p].mp3\").url(),\n Bliss: FileAttachment(\"Off the Air - S12E03 - Bliss [WEBDL-1080p].mp3\").url(),\n Death: FileAttachment(\"Off the Air - S04E03 - Death [WEBDL-1080p].mp3\").url(),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4526,"value":"// analyzer = initialize(audioUrl);\nanalyzer = initialize();","pinned":false,"hidden":false,"mode":"ojs"},{"id":4520,"value":"function initialize() {\n // if (!audioUrl) {\n // return null; \n // }\n \n const audioContext = new AudioContext() \n invalidation.then(() => audioContext.close());\n let htmlAudioElement = document.querySelector('video');\n const source = audioContext.createMediaElementSource(htmlAudioElement); \n source.connect(audioContext.destination);\n\n const analyzer = meyda.createMeydaAnalyzer({\n \"audioContext\": audioContext,\n \"source\": source,\n \"bufferSize\": 512,\n \"windowingFunction\": 'hanning',\n \"featureExtractors\": [\"energy\", \"spectralFlatness\", \"spectralCentroid\", \"spectralSpread\"],\n });\n\n analyzer.start();\n return analyzer;\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":5528,"value":"// function initialize() {\n// if (!audioUrl) {\n// return null; \n// }\n \n// const audioContext = new AudioContext() \n// invalidation.then(() => audioContext.close());\n// let htmlAudioElement = document.querySelector('audio');\n// const source = audioContext.createMediaElementSource(htmlAudioElement); \n// source.connect(audioContext.destination);\n\n// const analyzer = meyda.createMeydaAnalyzer({\n// \"audioContext\": audioContext,\n// \"source\": source,\n// \"bufferSize\": 512,\n// \"windowingFunction\": 'hanning',\n// \"featureExtractors\": [\"energy\", \"spectralFlatness\", \"spectralCentroid\", \"spectralSpread\"],\n// });\n\n// analyzer.start();\n// return analyzer;\n// }\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":4178,"value":"audioElement = {\n await analyzer\n return document.getElementById('my-video');\n // return document.getElementById('audio');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5474,"value":"import('https://cdn.skypack.dev/meyda@5.6.2?min')","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"// meyda = require(\"meyda\")\nmeyda = require('meyda@5.6.2/dist/web/meyda.min.js').catch(() => window[\"Meyda\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"## Image Setup","pinned":false,"hidden":false,"mode":"md"},{"id":3742,"value":"img_choice = {\n await audioElement.currentTime > 0\n yield Math.floor((audioElement.currentTime+.1)/5)\n while (true) yield Promises.delay((5000 - 1000*(Math.floor(audioElement.currentTime)) % 5000), 1+Math.floor((audioElement.currentTime)/5));\n}\n\n\n\n// viewof img_choice = Math.floor(audioContext.currentTime/5)\n\n// viewof img_choice = {\n// const element = htl.html`

I am a silly view!

`;\n// element.value = Math.floor(audioContext.currentTime/5);\n// return element;\n// }\n\n// viewof img_choice = Range([1, githubImgs2.length-1], {\n// label: \"Frame #\",\n// step: 1,\n// value: 121\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":3758,"value":"scrub_input = {\n let img = vid_urls[img_choice]\n let ctx = DOM.canvas(img.naturalWidth, img.naturalHeight).getContext(\"2d\"); \n ctx.drawImage(img, 0, 0);\n\n return {\n data: ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight),\n width: img.naturalWidth,\n height: img.naturalHeight \n };\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":5166,"value":"cur_colors = {\n let cur = episode_selection[img_choice]\n // return cur[\"Colour3\"]\n return new Set([color_mapping[cur[\"Colour1\"]], color_mapping[cur[\"Colour2\"]], color_mapping[cur[\"Colour3\"]]])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"// modification of https://observablehq.com/@kerryrodden/image-distortion-with-perlin-noise\nfunction getShiftedPixelIndex(x, y, width, height) {\n let scale = flatnessDistort*scaling/10\n let amount = energy * amount_scale\n let offset1a = offset1 * oscillation * multiplier + offset1\n let offset2a = offset2 * oscillation * multiplier + offset2\n // let shift1a = movement * oscillation * multiplier\n const shift = {\n x: amount * noise(scale * x, scale * y),\n y: amount * noise(offset1a + scale * x, offset2a + scale * y)\n };\n const newX = clamp(Math.round(x + shift.x), 0, width - 1);\n const newY = clamp(Math.round(y + shift.y), 0, height - 1);\n return getPixelIndex(newX, newY, width);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"function distortPixels(inputPixels, outputPixels, width, height, reverseMap) {\n for (let x = 0; x < width; x++) {\n for (let y = 0; y < height; y++) {\n const inputIndex = reverseMap\n ? getShiftedPixelIndex(x, y, width, height)\n : getPixelIndex(x, y, width);\n const outputIndex = reverseMap\n ? getPixelIndex(x, y, width)\n : getShiftedPixelIndex(x, y, width, height);\n for (let i = 0; i < 4; i++) {\n outputPixels.data[outputIndex + i] = inputPixels.data[inputIndex + i];\n }\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":" function getPixelIndex(x, y, width) {\n return y * width * 4 + x * 4;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"noise = octave(perlin2, octaves)","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"function clamp(value, min, max) {\n if (value < min) {\n return min;\n } else if (value > max) {\n return max;\n } else {\n return value;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":537,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":4300,"value":"colors = FileAttachment(\"labelled_pallets_urls.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5164,"value":"color_mapping = {\n const color_map = {\n red:\"red\",\n maroon:\"maroon\",\n orange: \"orange\",\n lilac: \"MediumPurple\",\n blue: \"blue\",\n // white: \"LightGray\",\n white: \"#fcf9f9\",\n purple: \"Purple\",\n green: \"green\",\n grey: \"grey\",\n yellow:\"yellow\",\n pink:\"pink\",\n beige:\"beige\",\n brown:\"brown\",\n black:\"black\" \n \n }\n return color_map\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4302,"value":"URL_selection = episode_selection.map(x => x.url)\n// URL_selection = colors.map(d => d.url)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4312,"value":"vid_urls = await preload(URL_selection, { throttle: true, throttleNumber: 20, throttlePeriod: 100, ignoreExceptions: true }).then(imgsMap => [\n ...imgsMap.values()\n])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3718,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":543,"value":"import {imageInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"import {Toggle, Range} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"import {octave, perlin2} from \"@mbostock/perlin-noise\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"import {preload} from \"@severo/preload-a-list-of-images\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"import {radio, slider, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}