User:Lbattich/Sound Prototypes: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
== Circle Scanner == | |||
Scans the canvas and produces sounds according to the image data (forefox only) | |||
[http://lucasbattich.com/tests/circlescanner.html Circle Scanner] | |||
<source lang="html4strict"> | |||
<!DOCTYPE html> | |||
<!-- | |||
_ | |||
| |_ _ ___ __ _ ___ | |||
| | | | |/ __/ _` / __| | |||
| | |_| | (_| (_| \__ \ | |||
|_|\__,_|\___\__,_|___/ | |||
_ _ _ _ _ | |||
| |__ __ _| |_| |_(_) ___| |__ | |||
| '_ \ / _` | __| __| |/ __| '_ \ | |||
| |_) | (_| | |_| |_| | (__| | | | | |||
|_.__/ \__,_|\__|\__|_|\___|_| |_| | |||
CRICLE SCANNER | |||
by LUCAS BATTICH, 2014 | |||
--> | |||
<html> | |||
<head> | |||
<meta content="text/html; charset=utf-8" http-equiv="content-type"> | |||
<title>Circle Scanner - by lucas battich</title> | |||
</head> | |||
<body> | |||
<button onclick="start()">scan</button> | |||
<button onclick="circle()">draw a circle</button> | |||
<button onclick="white()">clear up</button> | |||
<button onclick="silence()">stop</button> | |||
<br> | |||
<br> | |||
<canvas id="myCanvas" width="500" height="300"></canvas> | |||
<script> | |||
var context = new AudioContext(); | |||
var osc1 = context.createOscillator(); | |||
var osc2 = context.createOscillator(); | |||
var osc3 = context.createOscillator(); | |||
var osc4 = context.createOscillator(); | |||
var osc5 = context.createOscillator(); | |||
var gain1 = context.createGain(); // Create gain node 1 | |||
var gain2 = context.createGain(); | |||
var gain3 = context.createGain(); | |||
var gain4 = context.createGain(); | |||
var gain5 = context.createGain(); | |||
var tid; | |||
var x = 0; | |||
// Connect oscillators to gains, and gain to context destination (speakers) | |||
osc1.connect(gain1); | |||
osc2.connect(gain2); | |||
osc3.connect(gain3); | |||
osc4.connect(gain4); | |||
osc5.connect(gain5); | |||
gain1.connect(context.destination); | |||
gain2.connect(context.destination); | |||
gain3.connect(context.destination); | |||
gain4.connect(context.destination); | |||
gain5.connect(context.destination); | |||
osc1.frequency.value = 500; | |||
osc2.frequency.value = 400; | |||
osc3.frequency.value = 300; | |||
osc4.frequency.value = 200; | |||
osc5.frequency.value = 100; | |||
gain1.gain.value = 0; | |||
gain2.gain.value = 0; | |||
gain3.gain.value = 0; | |||
gain4.gain.value = 0; | |||
gain5.gain.value = 0; | |||
osc1.start(0); | |||
osc2.start(0); | |||
osc3.start(0); | |||
osc4.start(0); | |||
osc5.start(0); | |||
var blackloud = true; | |||
var canvas = document.getElementById('myCanvas'); | |||
var ctx = canvas.getContext('2d'); | |||
canvas.width=window.innerWidth-30; | |||
white(); | |||
circle(); | |||
function start(){ | |||
if (tid){ | |||
clearTimeout(tid); | |||
} | |||
x = 0; | |||
change(); | |||
} | |||
function scan() { | |||
var data = ctx.getImageData(x,0,1,1).data; // (x, y, width, height) | |||
var pixel = data[0] + data[1] + data[2]; | |||
var scale = pixel / (255*3); //scale from 0=black=quiet and 1=white=loud | |||
gain1.gain.value = blackloud ? 1-scale : scale; | |||
var data = ctx.getImageData(x,75,1,1).data; // (x, y, width, height) | |||
var pixel = data[0] + data[1] + data[2]; | |||
var scale = pixel / (255*3); //0=black and 1=white | |||
gain2.gain.value = blackloud ? 1-scale : scale; | |||
var data = ctx.getImageData(x,150,1,1).data; // (x, y, width, height) | |||
var pixel = data[0] + data[1] + data[2]; | |||
var scale = pixel / (255*3); //0=black and 1=white | |||
gain3.gain.value = blackloud ? 1-scale : scale; | |||
var data = ctx.getImageData(x,225,1,1).data; // (x, y, width, height) | |||
var pixel = data[0] + data[1] + data[2]; | |||
var scale = pixel / (255*3); //0=black and 1=white | |||
gain4.gain.value = blackloud ? 1-scale : scale; | |||
var data = ctx.getImageData(x,299,1,1).data; // (x, y, width, height) | |||
var pixel = data[0] + data[1] + data[2]; | |||
var scale = pixel / (255*3); //0=black and 1=white | |||
gain5.gain.value = blackloud ? 1-scale : scale; | |||
//ctx.drawImage(imageObj, 0, 0); | |||
//ctx.beginPath(); | |||
//ctx.moveTo(x,0); | |||
//ctx.lineTo(x,300); | |||
//ctx.lineWidth="1"; | |||
//ctx.strokeStyle="red"; | |||
//ctx.stroke(); | |||
} | |||
function white() { | |||
ctx.fillStyle="white"; //first colour | |||
ctx.fillRect(0,0,canvas.width,canvas.height); | |||
ctx.fill(); | |||
} | |||
function change() { | |||
scan(); | |||
x = x+1; | |||
if (x < (canvas.width-1)) { | |||
tid = setTimeout(change,7); | |||
} | |||
else { | |||
x=0; | |||
tid = setTimeout(change,7); | |||
} | |||
} | |||
function silence() { | |||
gain1.gain.value = 0; | |||
gain2.gain.value = 0; | |||
gain3.gain.value = 0; | |||
gain4.gain.value = 0; | |||
gain5.gain.value = 0; | |||
clearTimeout(tid); | |||
} | |||
function circle() | |||
{ | |||
var xc,yc,radio; | |||
yc=Math.floor((canvas.height+1)*Math.random()); | |||
xc=Math.floor((canvas.width+1)*Math.random()); | |||
radio=Math.floor((200)*Math.random()); | |||
ctx.beginPath(); | |||
ctx.arc(xc,yc,radio,0,2*Math.PI); | |||
var grd=ctx.createLinearGradient(xc-radio,yc-radio,xc+radio,yc+radio); | |||
grd.addColorStop(0,colourme()); | |||
grd.addColorStop(1,colourme()); | |||
ctx.strokeStyle=grd; | |||
ctx.lineWidth=Math.floor((100)*Math.random()); | |||
ctx.stroke(); | |||
} | |||
function colourme() | |||
{ | |||
var a = Math.floor(256*Math.random()); | |||
var b = Math.floor(256*Math.random()); | |||
var c = Math.floor(256*Math.random()); | |||
var colour = "rgb("+a+","+b+","+c+")"; | |||
return colour; | |||
} | |||
</script> | |||
</body> | |||
</html> | |||
</source> | |||
== Audio Test - Play a random composition using the Oscillator wave generator on the Web Audio API == | == Audio Test - Play a random composition using the Oscillator wave generator on the Web Audio API == | ||
Revision as of 22:23, 4 November 2014
Circle Scanner
Scans the canvas and produces sounds according to the image data (forefox only)
<!DOCTYPE html>
<!--
_
| |_ _ ___ __ _ ___
| | | | |/ __/ _` / __|
| | |_| | (_| (_| \__ \
|_|\__,_|\___\__,_|___/
_ _ _ _ _
| |__ __ _| |_| |_(_) ___| |__
| '_ \ / _` | __| __| |/ __| '_ \
| |_) | (_| | |_| |_| | (__| | | |
|_.__/ \__,_|\__|\__|_|\___|_| |_|
CRICLE SCANNER
by LUCAS BATTICH, 2014
-->
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Circle Scanner - by lucas battich</title>
</head>
<body>
<button onclick="start()">scan</button>
<button onclick="circle()">draw a circle</button>
<button onclick="white()">clear up</button>
<button onclick="silence()">stop</button>
<br>
<br>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
var context = new AudioContext();
var osc1 = context.createOscillator();
var osc2 = context.createOscillator();
var osc3 = context.createOscillator();
var osc4 = context.createOscillator();
var osc5 = context.createOscillator();
var gain1 = context.createGain(); // Create gain node 1
var gain2 = context.createGain();
var gain3 = context.createGain();
var gain4 = context.createGain();
var gain5 = context.createGain();
var tid;
var x = 0;
// Connect oscillators to gains, and gain to context destination (speakers)
osc1.connect(gain1);
osc2.connect(gain2);
osc3.connect(gain3);
osc4.connect(gain4);
osc5.connect(gain5);
gain1.connect(context.destination);
gain2.connect(context.destination);
gain3.connect(context.destination);
gain4.connect(context.destination);
gain5.connect(context.destination);
osc1.frequency.value = 500;
osc2.frequency.value = 400;
osc3.frequency.value = 300;
osc4.frequency.value = 200;
osc5.frequency.value = 100;
gain1.gain.value = 0;
gain2.gain.value = 0;
gain3.gain.value = 0;
gain4.gain.value = 0;
gain5.gain.value = 0;
osc1.start(0);
osc2.start(0);
osc3.start(0);
osc4.start(0);
osc5.start(0);
var blackloud = true;
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
canvas.width=window.innerWidth-30;
white();
circle();
function start(){
if (tid){
clearTimeout(tid);
}
x = 0;
change();
}
function scan() {
var data = ctx.getImageData(x,0,1,1).data; // (x, y, width, height)
var pixel = data[0] + data[1] + data[2];
var scale = pixel / (255*3); //scale from 0=black=quiet and 1=white=loud
gain1.gain.value = blackloud ? 1-scale : scale;
var data = ctx.getImageData(x,75,1,1).data; // (x, y, width, height)
var pixel = data[0] + data[1] + data[2];
var scale = pixel / (255*3); //0=black and 1=white
gain2.gain.value = blackloud ? 1-scale : scale;
var data = ctx.getImageData(x,150,1,1).data; // (x, y, width, height)
var pixel = data[0] + data[1] + data[2];
var scale = pixel / (255*3); //0=black and 1=white
gain3.gain.value = blackloud ? 1-scale : scale;
var data = ctx.getImageData(x,225,1,1).data; // (x, y, width, height)
var pixel = data[0] + data[1] + data[2];
var scale = pixel / (255*3); //0=black and 1=white
gain4.gain.value = blackloud ? 1-scale : scale;
var data = ctx.getImageData(x,299,1,1).data; // (x, y, width, height)
var pixel = data[0] + data[1] + data[2];
var scale = pixel / (255*3); //0=black and 1=white
gain5.gain.value = blackloud ? 1-scale : scale;
//ctx.drawImage(imageObj, 0, 0);
//ctx.beginPath();
//ctx.moveTo(x,0);
//ctx.lineTo(x,300);
//ctx.lineWidth="1";
//ctx.strokeStyle="red";
//ctx.stroke();
}
function white() {
ctx.fillStyle="white"; //first colour
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fill();
}
function change() {
scan();
x = x+1;
if (x < (canvas.width-1)) {
tid = setTimeout(change,7);
}
else {
x=0;
tid = setTimeout(change,7);
}
}
function silence() {
gain1.gain.value = 0;
gain2.gain.value = 0;
gain3.gain.value = 0;
gain4.gain.value = 0;
gain5.gain.value = 0;
clearTimeout(tid);
}
function circle()
{
var xc,yc,radio;
yc=Math.floor((canvas.height+1)*Math.random());
xc=Math.floor((canvas.width+1)*Math.random());
radio=Math.floor((200)*Math.random());
ctx.beginPath();
ctx.arc(xc,yc,radio,0,2*Math.PI);
var grd=ctx.createLinearGradient(xc-radio,yc-radio,xc+radio,yc+radio);
grd.addColorStop(0,colourme());
grd.addColorStop(1,colourme());
ctx.strokeStyle=grd;
ctx.lineWidth=Math.floor((100)*Math.random());
ctx.stroke();
}
function colourme()
{
var a = Math.floor(256*Math.random());
var b = Math.floor(256*Math.random());
var c = Math.floor(256*Math.random());
var colour = "rgb("+a+","+b+","+c+")";
return colour;
}
</script>
</body>
</html>
Audio Test - Play a random composition using the Oscillator wave generator on the Web Audio API
Works only on Firefox so far...
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Audio test - Play a random composition</title>
</head>
<body>
<p>Choose frequency between 80Hz and 880Hz: <input type="text" size="7" id="fr" value=""> <label for="fr">Hz</label></p>
<p>Choose gain between 0.2 and 1.2: <input type="text" size="7" id="gn" value=""> <label for="gn">Gain</label></p>
<p>Choose duration between 1/50sec and 1sec: <input type="text" size="7" id="tm" value=""> <label for="tm">Seconds</label></p>
<p>Choose waveform: <input type="text" size="7" id="vw" value=""> <label for="tm">wave</label></p>
<br>
<button onclick="play()">play</button>
<button onclick="silence()">stop</button>
<script>
var context = new AudioContext();
var tone = context.createOscillator();
var gainNode1 = context.createGain(); // Create gain node 1
var on=0;
tone.type = 0; // sine wave
tone.frequency.value = 0;
tone.connect(gainNode1); // Connect sound source tone to gain node 1
gainNode1.connect(context.destination);
gainNode1.gain.value = 0;
tone.start(0);
function play(){
if (on==0){
on=1;
change();
}
}
function change() {
if (on==1){
// random gain between 0.2 and 1.2
var gain = 0.2+Math.random();
gainNode1.gain.value = gain;
document.getElementById("gn").value = gain;
// random frequency between 80 and 880
var freq = 80 + Math.floor(801*Math.random());
tone.frequency.value = freq;
document.getElementById("fr").value = freq;
//random wave shape
var wave = Math.floor(4*Math.random());
tone.type = wave;
if (wave==0){document.getElementById("vw").value="Sine";}
else if (wave==1){document.getElementById("vw").value="Square";}
else if (wave==2){document.getElementById("vw").value="Sawtooth";}
else if (wave==3){document.getElementById("vw").value="Triangle";}
// random duration of note - 1/50sec to 1sec
var time = 20 + Math.floor(901*Math.random());
document.getElementById("tm").value = time/1000;
setTimeout(function(){change()},time);
}
}
function silence() {
tone.frequency.value = 0;
gainNode1.gain.value = 0;
on=0;
}
</script>
</body>
</html>