Skip to content

Instantly share code, notes, and snippets.

@macrat

macrat/space.html

Last active February 23, 2016 13:08
Show Gist options
  • Save macrat/c9f575de1227d04ed808 to your computer and use it in GitHub Desktop.
Save macrat/c9f575de1227d04ed808 to your computer and use it in GitHub Desktop.
Download ZIP
作品の展示会やるって言われて作ったやつ。結局参加しなかったので、gistで供養。 このアドレスから見れる。https://cdn.rawgit.com/macrat/c9f575de1227d04ed808/raw/space.html
Raw
space.html
<!DOCTYPE html>
<html>
<head>
<style>
* {
overflow: hidden;
margin: 0;
padding: 0;
}
html {
background-color: black;
}
canvas {
position: fixed;
top: 0;
left: 0;
}
</style>
<script>
if(location.protocol != 'https:'){
location.protocol = 'https:';
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
var meanRate = 0.5;
var beaconOpacity = 0.2;
window.addEventListener('load', function(){
var background = document.querySelector('#background');
var backgroundCtx = background.getContext('2d');
var beacon = document.querySelector('#beacon');
var beaconCtx = beacon.getContext('2d');
background.width = beacon.width = window.innerWidth;
background.height = beacon.height = window.innerHeight;
window.addEventListener('resize', function(){
background.width = beacon.width = window.innerWidth;
background.height = beacon.height = window.innerHeight;
});
navigator.getUserMedia(
{audio : true},
function(stream) {
document.querySelector('audio').src = URL.createObjectURL(stream);
var audioContext = new AudioContext();
var analyser = audioContext.createAnalyser();
var timeDomain = new Float32Array(analyser.frequencyBinCount);
audioContext.createMediaStreamSource(stream).connect(analyser);
var beacons = [];
var mean = 1;
// 焼き付きへの急場凌ぎ。フラッシュさせることで全面に焼き付きを起こす。
backgroundCtx.fillStyle = 'rgba(255, 255, 255, 0.1)';
backgroundCtx.beginPath();
backgroundCtx.rect(0, 0, background.width, background.height);
backgroundCtx.fill();
(function animation(){
analyser.getFloatTimeDomainData(timeDomain);
var max_level = timeDomain.reduce(function(prev, current, i, arr) {
return Math.max(prev, Math.abs(current));
}) + 1;
mean = mean*(1-meanRate) + max_level*meanRate;
if(mean*1.05 < max_level){
beacons.push(0);
}
backgroundCtx.fillStyle = 'rgba(0, 0, 0, 0.1)';
backgroundCtx.beginPath();
backgroundCtx.rect(0, 0, background.width, background.height);
backgroundCtx.fill();
if(max_level > 1.01){
backgroundCtx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
backgroundCtx.beginPath();
backgroundCtx.moveTo(0, background.height/2 - timeDomain[0]*background.height);
for(var i=1; i<timeDomain.length; i++) {
backgroundCtx.lineTo(Math.round(i/timeDomain.length * background.width), Math.round(background.height/2 - timeDomain[i]*background.height));
}
backgroundCtx.stroke();
}
function drawCircle(x, y, r){
backgroundCtx.beginPath();
backgroundCtx.arc(x, y, r * Math.min(10, Math.pow(mean, 2)), 0, Math.PI*2);
backgroundCtx.fill();
}
backgroundCtx.fillStyle = 'rgba(255, 255, 255, 0.4)';
drawCircle(background.width/2, background.height/2, 40); // 太陽
var earth = (new Date())/1000/60 * -Math.PI*2;
drawCircle(background.width/2 + Math.cos(earth/0.2408467)*80, background.height/2 + Math.sin(earth/0.2408467)*80, 4); // 水星
drawCircle(background.width/2 + Math.cos(earth/0.615207)*120, background.height/2 + Math.sin(earth/0.615207)*120, 9); // 金星
var earthX = background.width/2 + Math.cos(earth)*180;
var earthY = background.height/2 + Math.sin(earth)*180;
drawCircle(earthX, earthY, 10); // 地球
drawCircle(earthX + Math.cos(earth*12)*30, earthY + Math.sin(earth*12)*30, 3); // 地球: 月
drawCircle(background.width/2 + Math.cos(earth/1.880866)*240, background.height/2 + Math.sin(earth/1.880866)*240, 5); // 火星
var jupiterX = background.width/2 + Math.cos(earth/11.86155)*330;
var jupiterY = background.height/2 + Math.sin(earth/11.86155)*330;
drawCircle(jupiterX, jupiterY, 30); // 木星
drawCircle(jupiterX + Math.cos(earth/0.00484931506)*40, jupiterY + Math.sin(earth/0.00484931506)*40, 3); // 木星: イオ
drawCircle(jupiterX + Math.cos(earth/0.00972602739)*50, jupiterY + Math.sin(earth/0.00972602739)*50, 2); // 木星: エウロパ
drawCircle(jupiterX + Math.cos(earth/0.01960273972)*60, jupiterY + Math.sin(earth/0.01960273972)*60, 4); // 木星: ガニメデ
drawCircle(jupiterX + Math.cos(earth/0.04572602739)*70, jupiterY + Math.sin(earth/0.04572602739)*70, 4); // 木星: カリスト
var saturnX = background.width/2 + Math.cos(earth/29.53216)*450;
var saturnY = background.height/2 + Math.sin(earth/29.53216)*450;
drawCircle(saturnX, saturnY, 20); // 土星
drawCircle(saturnX + Math.cos(earth/0.04360730593)*30, saturnY + Math.sin(earth/0.04360730593)*30, 4); // 土星: タイタン
drawCircle(background.width/2 + Math.cos(earth/84.25301)*520, background.height/2 + Math.sin(earth/84.25301)*520, 15); // 天王星
beaconCtx.clearRect(0, 0, beacon.width, beacon.height);
beacons = beacons.filter(function(x){ return x < beacon.width }).map(function(x){
beaconCtx.fillStyle = 'rgba(255, 255, 255, ' + (1 - x/background.width)*beaconOpacity + ')'
beaconCtx.beginPath();
beaconCtx.arc(beacon.width/2, beacon.height/2, x, 0, Math.PI*2);
beaconCtx.fill();
return x + 15;
});
requestAnimationFrame(animation);
})();
},
function(e) {
console.log(e);
}
);
});
</script>
</head>
<body>
<audio muted></audio>
<canvas id=background></canvas>
<canvas id=beacon></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment