Skip to content

Instantly share code, notes, and snippets.

@acidsound

acidsound/README.md

Created January 16, 2020 07:05
Show Gist options
  • Save acidsound/d6884b8adfccaeae3e91c0176056d26f to your computer and use it in GitHub Desktop.
Save acidsound/d6884b8adfccaeae3e91c0176056d26f to your computer and use it in GitHub Desktop.
Download ZIP
Glitch Synth
Raw
README.md

Javascript glitch synth

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Glitch synth</title>
</head>
<body>
<div class="container">
<h3>Glitch music with javascript</h3>
<form action="javascript:;" class="form-inline">
<input name="expression" class="expression input-xxlarge" type="text" value="(3e3/(y=t&16383)&1)*35+(x=t*'6689'[t>>16&3]/24&127)*y/4e4+((t>>8^t>>10|t>>14|x)&63)"/>
<select name="freq" class="freq">
<option value="44.1">44.1Khz</option>
<option value="22">22.0Khz</option>
<option value="11">11.0Khz</option>
<option value="8" selected>8Khz</option>
</select>
<button class="btn btn-primary play">Play</button>
<button class="btn btn-danger stop">Stop</button>
<button class="btn btn-warning share">Share</button>
</form>
<div class="container shareArea">
<span>Copy the following URI to share your music!</span>
<textarea class="copythat span12">
</textarea>
</div>
<h5>
FFT Analyzer
</h5>
<canvas height="256" width="256" id="previewOSC">
</canvas>
<h4>examples</h4>
<ul class="examples unstyled">
<li>
<hr/>
<h5>44khz</h5>
</li>
<li data-frequency="44.1">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>w=t>>9,k=32,m=2048,a=1-t/m%1,s=((y=[3,3,4.7,2][p=w/k&3]/5*t)*.96%64+y%64)*1.2+((5*t%m*a&k*4)*(0x53232323>>w/4&1)+((d=(14*t*t^t)%m*a)&127)*(0xa444c444>>w/4&1)*1.5+(d*w&1)/7.5+((h="IQNNNN!!]]!Q!IW]WQNN??!!W]WQNNN?".charCodeAt(w/2&15|p/3<<4)/33*t-t)%k+h*1.99%k+h*.49%k+h*.97%k-64)*(2-a)*2)*(w>>7&&a),s*s>>14?127:s&255</span>
</li>
<li data-frequency="44.1">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>t&~t>>4^~t>>7-0.1</span>
</li>
<li data-frequency="44.1">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>(t<<3)*[8/9,1,9/8,6/5,4/3,3/2,0][[0xd2d2c8,0xce4088,0xca32c8,0x8e4009][t>>14&3]>>(0x3dbe4688>>((t>>10&15)>9?18:t>>10&15)*3&7)*3&7]&255</span>
</li>
<li data-frequency="44.1">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>t * ((t>>3|t>>9)&82&t>>9)</span>
</li>
<li data-frequency="44.1">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>t*9&(t*1>>4)|t*5&(t>>7)|t*3&(t*4>>12)</span>
</li>
<li data-frequency="44.1">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>t*1&(t*1>>4)|t*5&(t*1>>4)|t*5&(t*4>>14)</span>
</li>
<li data-frequency="44.1">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>( ((t*4)*(((t>>>11)&1)?1:0)*(((t>>>11)&8)?0:1) + (t*2)*(((t>>>10)&1)?1:0)*(((t>>>10)&128)?0:1) +(t*4)*(((t>>>10)&1)?1:0)*(((t>>>10)&128)?1:0) + (t*sin(t)*(((t>>>10)&4)?1:0)*(((t>>>10)&1)?1:0))) % 256) * (7/10)</span>
</li>
<li data-frequency="44.1">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>((((5&((3 *(23*(4^t)))+t))*(9*((15>>((9&((t&12)^15))>>5))*2)))*((((t*(t*8))>>10)&t)>>42))^15)</span>
</li>
<li data-frequency="44.1">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>t * ((t >> 12 | t >> 8) & 63 & t >> 4)</span>
</li>
<li data-frequency="44.1">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>t * ( ((t>>9)&10) | ((t>>11)&24) ^((t>>10)&15&(t>>15)) )</span>
</li>
<li data-frequency="44.1">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>t>>4|t&(t>>5)/(t>>7-(t>>15)&-t>>7-(t>>15))</span>
</li>
<li>
<hr/>
<h5>8khz</h5>
</li>
<li data-frequency="8">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>(3e3/(y=t&16383)&1)*35+(x=t*"6689"[t>>16&3]/24&127)*y/4e4+((t>>8^t>>10|t>>14|x)&63)</span>
</li>
<li data-frequency="8">
<button class="badge copy">Copy</button>
<button class="badge directPlay">Play</button>
<span>((t*("36364689"[t>>13&7]&15))/12&128)
+(((((t>>12)^(t>>12)-2)%11*t)/4|t>>13)&127)</span>
</li>
</ul>
</div>
</body>
</html>
Raw
main.coffee
sampleOffset = 0
frequencyRate = 44.1
samples = 128
calcGlitch=(x)->x
@requestAnimationFrame = @requestAnimationFrame or @webkitRequestAnimationFrame
@AudioContext = @AudioContext or @webkitAudioContext
class OSC
constructor:->
@context = new AudioContext()
@[email protected]()
@fft.fftSize = 128
@isPlay=false
initBuffer:->
@[email protected] @bufferSize, @inChannel, @outChannel
@node.onaudioprocess=@makeNoise
makeSampleFunction:(oneLiner)->
oneLiner= oneLiner.replace /(sin|cos|tan|floor|ceil)/g, 'Math.$1'
eval "f=function (t) { return #{oneLiner}}"
f
makeNoise:(e)->
data=e.outputBuffer.getChannelData 0
# data.length = bufferSize
for i in [0..data.length-1]
t = sampleOffset * 8 / frequencyRate
tt=calcGlitch t
# console.log tt, " generated"
data[i]=(tt & 0xFF) / 0xFF
sampleOffset++
play:->
@node.connect @fft
@fft.connect @context.destination
@isPlay=true
pause:->
@node.disconnect()
@isPlay=false
$().ready ->
getQuery = (search)->
result = {}
if search?
result[param.split('=')[0]] = unescape param.split('=')[1] for param in search.split('&')
result
params = getQuery(location.search.substr 1)
osc = new OSC()
osc.bufferSize = 4096
osc.inChannel = 0
osc.outChannel = 1 # mono
osc.initBuffer()
gradient = null
$(".expression").val params.expression || $(".expression").val()
$(".freq").val params.freq || $(".freq").val()
setUpCanvas=(ctx)->
osc.ctx=ctx
ctx.clearRect 0,0,256,256
ctx.fillStyle = 'lightgray'
ctx.fillRect 0,0,256,256
gradient = ctx.createLinearGradient 0,0,0,256
gradient.addColorStop 1,'#000000'
gradient.addColorStop 0.75,'#ff0000'
gradient.addColorStop 0.25,'#ffff00'
gradient.addColorStop 0,'#ffffff'
requestAnimationFrame updateCanvas
updateCanvas=->
requestAnimationFrame updateCanvas
ctx=osc.ctx
fft=osc.fft
ctx.clearRect 0,0,256,256
ctx.fillStyle = 'lightgray'
ctx.fillRect 0,0,256,256
data = new Uint8Array samples
fft.getByteFrequencyData data
ctx.fillStyle = gradient
#if osc.isPlay
for i in [0..(data.length/4)-1]
ctx.fillRect i*16,256-data[i],8,256
setUpCanvas document.querySelector('canvas#previewOSC').getContext('2d')
$(".play").click ->
frequencyRate=$(".freq").val()
calcGlitch=osc.makeSampleFunction $(".expression").val()
osc.play()
$(".stop").click ->
osc.pause()
setExpression=(e)->
# console.log e.srcElement.parentElement.childNodes
doc=e.srcElement.parentElement.childNodes[5]
$(".freq").val $(e.srcElement.parentElement).attr('data-frequency')
$(".expression").val doc.innerText
$(".copy").click (e)->
setExpression e
$(".directPlay").click (e)->
setExpression e
$(".play").click()
$(".freq").change (e)->
frequencyRate=$(e.srcElement).val()
$(".shareArea").hide()
$(".share").click ->
$(".shareArea").toggle()
$(".copythat").val "#{location.origin+location.pathname}?freq=#{$('.freq').val()}&expression=#{encodeURIComponent($('.expression').val())}"
@acidsound
Copy link
Author

최신화 필요.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment