Broadcasting a Dynamic YouTube Video for Slipknot

Putting the “We” in We Are Not Your Kind

Image for post
Image for post

Progressive Web Album

Image for post
Image for post
let tracks = [{
id: '',
name: '',
url: '',
duration: 30000
}]
let player = new preview.Player({
tracks: tracks,
onload: () => {
// loaded
}
})
player.togglePlay()

Live Photography

let uppy = Uppy({
autoProceed: false,
})
uppy.use(AwsS3, {
getUploadParameters (file) {
return fetch(`/.netlify/functions/presign?key=${file.name}`)
.then(response => response.json())
.then(data => data)
}
})
uppy.on('upload-success', (file, data) => {
let url = data.body.location
})

IP Address to Heatmap

geoip2.city(data => {
// data.location.longitude
// data.location.latitude
}, error => {
console.log(error)
}, {})
let coordinateToPixel = (height, width, coordinate) => {
let x = (coordinate[0] + 180) * (width / 360)
let latRad = coordinate[1] * Math.PI / 180
let mercN = Math.log(Math.tan((Math.PI / 4) + (latRad / 2)))
let y = (height / 2) - (width * mercN / (2 * Math.PI))
return [x, y]
}
let heat = simpleheat(canvas)heat.max(15)heat.gradient({
0.5: 'white',
0.75: 'black',
1.0: 'red'
})
heat.add([x, y, z])heat.draw()

Single File (Maggots)

let loadImage = (url) => {
return new Promise((resolve, revoke) => {
let img = new Image()
img.onload = () => {
resolve(img)
}
img.crossOrigin = 'Anonymous'
img.src = url
})
}
import queue from 'async/queue'let photoQueue = queue((task, callback) => {
loadImage(task.url)
.then(img => {
// add image to visualization
callback()
})
}, 1)
photoQueue.push({
url: url
})

Visualizer

let buffer = document.createElement('canvas')let drawImage = (img) => {
let context = buffer.getContext('2d')

let split = 4
let cellWidth = buffer.width / split
let cellHeight = buffer.height / split
let scaled = loadImage.scale(
img, {
maxWidth: cellWidth,
maxHeight: cellHeight,
cover: true,
crop: true
}
)
context.drawImage(
scaled,
Math.floor(Math.random() * split) * cellWidth,
Math.floor(Math.random() * split) * cellHeight,
cellWidth,
cellHeight
)
}
let screen = document.getElementById('screen')let seriously = new Seriously()let source = seriously.source(buffer)
let target = seriously.target(screen)
let blur = seriously.effect('blur')
let glitch = seriously.effect('tvglitch')
let grayed = seriously.effect('hue-saturation')
let noise = seriously.effect('noise')
blur.source = source
glitch.source = blur
grayed.source = glitch
noise.source = grayed
target.source = noise
seriously.go()
let render = () => {
glitch.distortion = Math.random() * 0.1
source.update()
}
requestAnimationFrame(render)

Broadcast

Image for post
Image for post

Thanks

Image for post
Image for post

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store