class Alien
grid: null
cellSize: 30
numberOfRows: 10
numberOfColumns: 10
halfColumns: 0
colReflected: 0
ticks: 0
canvas: null
drawingContext: null
canvasWidth: 0
canvasHeight: 0
constructor: () ->
@halfColumns = @numberOfColumns / 2
@canvasWidth = @cellSize * (@numberOfColumns + 2)
@canvasHeight = @cellSize * (@numberOfRows + 2)
@canvas = document.createElement 'canvas'
@drawingContext = @canvas.getContext '2d'
@canvas.height = @canvasWidth
@canvas.width = @canvasHeight
@canvas.aliens = { x: 0, y: 0 }
# console.log "canvas:::", @canvas
clearCanvas: ->
@drawingContext.clearRect 0, 0, @canvasWidth, @canvasHeight
# @drawingContext.fillStyle = "red"
# @drawingContext.fillRect 0,0, @canvasWidth, @canvasHeight
seed: ->
@grid = []
for row in [0...@numberOfRows]
@grid[row] = []
for column in [0...@halfColumns]
seedCell = @createSeedCell column
@grid[row][column] = seedCell
createSeedCell: (probability) ->
chance = Math.random()
cutoff = (probability + 1) / (@halfColumns + 1)
tobe = chance < cutoff
# console.log chance, cutoff, tobe
tobe
generateAlien: () ->
r = (m) => ~~(Math.random() * m + 1)
q = () =>
l = r(11)
g = r(5)
a = []
i = 0
while i < l
j = i * g
a.push( j )
a.unshift(-j) if i
i++
a
{
x: q()
y: q()
}
drawGrid: (pixels) ->
@canvas.aliens = @generateAlien()
r = ~~(Math.random() * 128 + 64)
g = ~~(Math.random() * 128 + 64)
b = ~~(Math.random() * 128 + 64)
colourLine = "rgba(#{r}, #{g}, #{b}, 1)"
r1 = ~~(r - Math.random() * 64)
g1 = ~~(g - Math.random() * 64)
b1 = ~~(b - Math.random() * 64)
colourFill = "rgb(#{r1}, #{g1}, #{b1})"
for row in [0...@numberOfRows]
for column in [0...@numberOfColumns]
@drawCell row, column, colourLine, 10
for row in [0...@numberOfRows]
for column in [0...@numberOfColumns]
@drawCell row, column, colourFill, 0
drawCell: (y, x, fillStyle, strokeWidth) ->
if x >= @halfColumns
colReflected = @numberOfColumns - x - 1
else
colReflected = x
isOn = @grid[y][colReflected]
if isOn
@drawingContext.fillStyle = fillStyle
@drawingContext.fillRect (1+x) * @cellSize - strokeWidth,
(1+y) * @cellSize - strokeWidth,
@cellSize + strokeWidth * 2,
@cellSize + strokeWidth * 2
getAlien: =>
# console.log "getAlien", @canvas
@canvas
step: =>
# if @ticks % 40 == 0
# @change()
# @ticks++
change: ->
@clearCanvas()
@seed()
@drawGrid()
window.Alien = Alien
con = console
class Analyse
waves: null
node: null
analyser: null
audio: null
frameBufferSize: Math.pow 2, 11
channels: 4
bufferSize: 0
signal: null
fft: null
amplitude: 0
spectrum : []
constructor: () ->
@bufferSize = @frameBufferSize / @channels
@signal = new Float32Array(@bufferSize)
@fft = new FFT(@bufferSize, 44100)
@newAudioContext()
@loadAudio 'https://dl.dropboxusercontent.com/s/yxv9ycl8sjr7fvq/usee.mp3'
con.log "Analyse constructor", @signal.length
newAudioContext: ->
fok = (f) =>
window[f]? # and typeof window[f] is 'function' # not a function in safari!
@waves = false
if fok('AudioContext')
con.log("AudioContext")
@waves = new AudioContext()
else if (fok('webkitAudioContext'))
con.log("webkitAudioContext")
@waves = new webkitAudioContext()
con.log "waves", @waves
loadAudio: (url) ->
con.log "loadAudio", url, @waves
if @audio
@audio.remove()
if @node
@node.disconnect()
@audio = new Audio()
@audio.crossOrigin = "anonymous";
@audio.preload = 'auto'
# @audio.loop = true
@audio.controls = true
document.body.appendChild @audio
if @waves
con.log("waves created")
@audio.addEventListener( 'canplay', ( e ) => @setupAudioNodes(e) )
else
# @audio.addEventListener('canplay', tryMoz, false)
@audio.src = url
# waves.playbackRate = 1000
setupAudioNodes: (e) ->
con.log "setupAudioNodes"
unless @analyser?
@analyser = @analyser || @waves.createScriptProcessor( @bufferSize, 2, 2 )
@analyser.onaudioprocess = @processAudio
@node = @waves.createMediaElementSource( @audio )
@node.connect(@analyser)
# gainNode = @node.context.createGain()
# @node.connect( gainNode )
# gainNode.connect( @analyser )
# gainNode.gain.value = 0
# filter = @node.context.createBiquadFilter()
# @node.connect( filter )
# filter.connect( @analyser );
# filter.type = 0 # // Low-pass filter. See BiquadFilterNode docs
# filter.frequency.value = 440 # Set cutoff to 440 HZ
# window.addEventListener( 'mousemove', ( e ) =>
# filter.frequency.value = e.clientX * 2
# filter.Q.value = e.clientY / 10
# )
@analyser.connect(@waves.destination)
@audio.play()
# con.log "node", @node
# con.log "analyser", @analyser
processAudio: (e) =>
# con.log "processAudio"
inputArrayL = e.inputBuffer.getChannelData(0)
inputArrayR = e.inputBuffer.getChannelData(1)
outputArrayL = e.outputBuffer.getChannelData(0)
outputArrayR = e.outputBuffer.getChannelData(1)
# n = bufferSize
for i in [0...@bufferSize]
outputArrayL[i] = inputArrayL[i]
outputArrayR[i] = inputArrayR[i]
@signal[i] = (inputArrayL[i] + inputArrayR[i]) / 2
@fft.forward(@signal)
@fftChanged()
fftChanged: ->
specLength = @fft.spectrum.length
magSum = 0
for i in [0...specLength]
magSum += @fft.spectrum[i]
@amplitude = 100 * magSum / specLength
step: =>
specLength = @fft.spectrum.length # should be @signal.length / 2
totalBands = specLength / 32
@spectrum = []
currentBand = -1
for i in [0...specLength]
if i % totalBands == 0
bandTotal = 0
currentBand++
bandTotal += @fft.spectrum[i]
if i % totalBands == totalBands - 1
@spectrum[currentBand] = bandTotal
getAnalysis: ->
{
spectrum: @spectrum,
amplitude: @amplitude,
waveform: @signal
}
window.Analyse = Analyse
`
//------------------------------------------//
//-------- STUFF FOR AUDIO ANALYSIS --------//
function FourierTransform(bufferSize, sampleRate)
{
this.bufferSize = bufferSize;
this.sampleRate = sampleRate;
this.bandwidth = bufferSize * sampleRate;
this.spectrum = new Float32Array(bufferSize/2);
this.real = new Float32Array(bufferSize);
this.imag = new Float32Array(bufferSize);
this.peakBand = 0;
this.peak = 0;
this.getBandFrequency = function(index)
{
return this.bandwidth * index + this.bandwidth / 2;
};
this.calculateSpectrum = function()
{
var spectrum = this.spectrum,
real = this.real,
imag = this.imag,
bSi = 2 / this.bufferSize,
rval, ival, mag;
this.peak = this.peakBand = 0;
for (var i = 0, N = bufferSize*0.5; i < N; i++)
{
rval = real[i];
ival = imag[i];
mag = bSi * Math.sqrt(rval * rval + ival * ival);
if (mag > this.peak)
{
this.peakBand = i;
this.peak = mag;
}
spectrum[i] = mag;
}
};
}
function FFT(bufferSize, sampleRate)
{
FourierTransform.call(this, bufferSize, sampleRate);
this.reverseTable = new Uint32Array(bufferSize);
var limit = 1;
var bit = bufferSize >> 1;
var i;
while (limit < bufferSize)
{
for (i = 0; i < limit; i++)
this.reverseTable[i + limit] = this.reverseTable[i] + bit;
limit = limit << 1;
bit = bit >> 1;
}
this.sinTable = new Float32Array(bufferSize);
this.cosTable = new Float32Array(bufferSize);
for (i = 0; i < bufferSize; i++)
{
this.sinTable[i] = Math.sin(-Math.PI/i);
this.cosTable[i] = Math.cos(-Math.PI/i);
}
}
FFT.prototype.forward = function(buffer)
{
var bufferSize = this.bufferSize,
cosTable = this.cosTable,
sinTable = this.sinTable,
reverseTable = this.reverseTable,
real = this.real,
imag = this.imag,
spectrum = this.spectrum;
var k = Math.floor(Math.log(bufferSize) / Math.LN2);
if (Math.pow(2, k) !== bufferSize) { throw "Invalid buffer size, must be a power of 2."; }
if (bufferSize !== buffer.length) { throw "Supplied buffer is not the same size as defined FFT. FFT Size: " + bufferSize + " Buffer Size: " + buffer.length; }
var halfSize = 1,
phaseShiftStepReal,
phaseShiftStepImag,
currentPhaseShiftReal,
currentPhaseShiftImag,
off,
tr,
ti,
tmpReal,
i;
for (i = 0; i < bufferSize; i++)
{
real[i] = buffer[reverseTable[i]];
imag[i] = 0;
}
while (halfSize < bufferSize)
{
phaseShiftStepReal = cosTable[halfSize];
phaseShiftStepImag = sinTable[halfSize];
currentPhaseShiftReal = 1;
currentPhaseShiftImag = 0;
for (var fftStep = 0; fftStep < halfSize; fftStep++)
{
i = fftStep;
while (i < bufferSize)
{
off = i + halfSize;
tr = (currentPhaseShiftReal * real[off]) - (currentPhaseShiftImag * imag[off]);
ti = (currentPhaseShiftReal * imag[off]) + (currentPhaseShiftImag * real[off]);
real[off] = real[i] - tr;
imag[off] = imag[i] - ti;
real[i] += tr;
imag[i] += ti;
i += halfSize << 1;
}
tmpReal = currentPhaseShiftReal;
currentPhaseShiftReal = (tmpReal * phaseShiftStepReal) - (currentPhaseShiftImag * phaseShiftStepImag);
currentPhaseShiftImag = (tmpReal * phaseShiftStepImag) + (currentPhaseShiftImag * phaseShiftStepReal);
}
halfSize = halfSize << 1;
}
return this.calculateSpectrum();
};
window.FFT = FFT;
`
con = console
class Music
analyser: null
aliendude: null
canvas: null
pixels: null
canvasWidth: 1000
canvasHeight: 500
centreX: 0
centreY: 0
scale: 1
float: 20
constructor: ->
con.log "Music constructor"
@createCanvas()
@analyser = new Analyse( @pixels, @centreX, @centreY )
@aliendude = new Alien( )
if window.requestAnimationFrame
con.log "native requestAnimationFrame"
else
con.log "creating requestAnimationFrame"
window.requestAnimationFrame = window.webkitRequestAnimationFrame or window.mozRequestAnimationFrame or window.oRequestAnimationFrame or window.msRequestAnimationFrame
# function(callback, element){
# window.setTimeout(callback, 1000 / 60);
# };
@step()
createCanvas: ->
@centreX = @canvasWidth / 2
@centreY = @canvasHeight / 2
@canvas = document.createElement 'canvas'
document.body.appendChild @canvas
@pixels = @canvas.getContext '2d'
@canvas.width = @canvasWidth
@canvas.height = @canvasHeight
clearCanvas: ->
#pixels.globalCompositeOperation = 'source-atop'
@pixels.fillStyle = "rgb(0, 0, 0)"
#@pixels.fillStyle = "rgba(0, 0, 0, 0.4)"
@pixels.fillRect 0, 0, @canvasWidth, @canvasHeight
#@pixels.globalCompositeOperation = 'lighter'
alienScale: 2
alienRotate: 0.01
step: =>
@clearCanvas()
@analyser.step()
@aliendude.step()
anal = @analyser.getAnalysis()
spectrum = anal.spectrum
amplitude = anal.amplitude
waveform = anal.waveform
# draw amplitude
@pixels.fillStyle = "rgb(0, 20, 40)"
@pixels.fillRect( 0, @canvasHeight, @canvasWidth, -amplitude * @canvasHeight)
# draw spectrum
specLength = spectrum.length
bandWidth = @canvasWidth / specLength
padding = 5
for i in [0...specLength]
c = ~~(i / specLength * 55)
r = 100
g = 200 + c
b = 255 - c
level = spectrum[i]
@pixels.fillStyle = "rgba(#{r}, #{g}, #{b}, 0.5)"
@pixels.fillRect( i * bandWidth + padding, @canvasHeight, bandWidth - padding * 2, -level * @centreY)
# draw waveform
waveformLength = waveform.length
bandWidth = @canvasWidth / waveformLength
@pixels.beginPath();
for i in [0...waveformLength]
#@pixels.fillStyle = "rgba(255, 255, 255, 0.5)"
#@pixels.fillRect( i * bandWidth, @centreY, bandWidth, waveform[i] * @centreY)
@pixels.strokeStyle = '#0fe';
@pixels.lineWidth = 1;
x = i * bandWidth
y = @centreY + waveform[i] * @centreY
if i == 0
@pixels.moveTo( x, y )
else
@pixels.lineTo( x,y )
@pixels.stroke();
# draw alien
@float += @alienRotate
#@scale += 0.01
@scale = spectrum[0]
if @scale > @alienScale * 4
@aliendude.change()
@alienScale = @scale
@alienRotate = (Math.random() - 0.5) * 0.1
else
@alienScale *= 0.9
sc = @alienScale * 1 #+ (Math.sin @scale) * 0.5
#sc = (Math.sin @scale) * 0.5
img = @aliendude.getAlien()
@pixels.save()
@pixels.translate( @centreX, @centreY )
@pixels.rotate( @float )
@pixels.scale( sc, sc )
@pixels.translate( -img.width / 2, -img.height / 2 )
# i think this pattern method 'leaks' like a motherfuck
# pat = @pixels.createPattern(img,"repeat");
# @pixels.rect(0,0, @canvasWidth, @canvasHeight )
# @pixels.fillStyle = pat
# @pixels.fill()
for x in img.aliens.x
for y in img.aliens.y
@pixels.drawImage( img, img.width * x, img.height * y)
@pixels.restore()
# attempt at 3d, but shearing of only 2 triangle subdivisions and this will get costly really fast.
# corners = [
# {x:100,y:100,u:0,v:0},
# {x:300,y:50,u:img.width,v:0},
# {x:350,y:300,u:img.width,v:img.height},
# {x:200,y:400,u:0,v:img.height}
# ]
# for c in corners
# @pixels.fillStyle = "#f00"
# @pixels.fillRect( c.x, c.y, 5, 5 )
# textureMap( @pixels, img, corners )
requestAnimationFrame @step
window.Music = Music
document.getElementById("start").addEventListener("click", () =>
new Music()
document.getElementById("start").remove()
)
!
