Skip to content
Permalink
Browse files

Added "experiments" directory and the first 4 experiments.

  • Loading branch information...
gheja committed Sep 5, 2013
1 parent a950e87 commit 0a512a83729da2166dcac7a2bb201eed8c3207d6
Showing with 573 additions and 0 deletions.
  1. +119 −0 experiments/01.html
  2. +138 −0 experiments/02.html
  3. +142 −0 experiments/03.html
  4. +168 −0 experiments/04.html
  5. +6 −0 experiments/README.md
@@ -0,0 +1,119 @@
<!DOCTYPE HTML>
<html>
<head>
<title>13312 / experiments</title>
<style>
body, html
{
background: #111;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="canvas0"></div>
<script type="text/javascript">
function _create_cv()
{
var obj = {};
obj.cv = document.createElement("canvas");
obj.cv.width = 1280;
obj.cv.height = 720;
obj.ctx = obj.cv.getContext("2d");
return obj;
}
function blend(c1, c2, c3, p1, p2)
{
c3.ctx.clearRect(0, 0, 1280, 720);
c3.ctx.globalCompositeOperation = "source-over";
c3.ctx.drawImage(c1.cv, p1[0], p1[1]);
c3.ctx.globalCompositeOperation = "lighter";
c3.ctx.drawImage(c2.cv, p1[0], p1[1]);
return;
var x, y, data1, data2;
var data1 = c1.ctx.getImageData(p1[0], p1[1], p2[0], p2[1]);
var data2 = c2.ctx.getImageData(p1[0], p1[1], p2[0], p2[1]);
for (i=0; i<data1.data.length; i +=12)
{
data1.data[i ] = Math.min(data1.data[i ] + data2.data[i ] * (data2.data[i+3]/255), 255);
data1.data[i+1] = Math.min(data1.data[i+1] + data2.data[i+1] * (data2.data[i+3]/255), 255);
data1.data[i+2] = Math.min(data1.data[i+2] + data2.data[i+2] * (data2.data[i+3]/255), 255);
data1.data[i+3] = Math.max(data1.data[i+3], data2.data[i+3]);
data1.data[i+4] = Math.min(data1.data[i+4] + data2.data[i+4] * (data2.data[i+7]/255), 255);
data1.data[i+5] = Math.min(data1.data[i+5] + data2.data[i+5] * (data2.data[i+7]/255), 255);
data1.data[i+6] = Math.min(data1.data[i+6] + data2.data[i+6] * (data2.data[i+7]/255), 255);
data1.data[i+7] = Math.max(data1.data[i+7], data2.data[i+7]);
data1.data[i+8 ] = Math.min(data1.data[i+8 ] + data2.data[i+8 ] * (data2.data[i+11]/255), 255);
data1.data[i+9 ] = Math.min(data1.data[i+9 ] + data2.data[i+9 ] * (data2.data[i+11]/255), 255);
data1.data[i+10] = Math.min(data1.data[i+10] + data2.data[i+10] * (data2.data[i+11]/255), 255);
data1.data[i+11] = Math.max(data1.data[i+11], data2.data[i+11]);
/*
data1.data[i ] = Math.min(data1.data[i ] + data2.data[i ], 255);
data1.data[i+1] = Math.min(data1.data[i+1] + data2.data[i+1], 255);
data1.data[i+2] = Math.min(data1.data[i+2] + data2.data[i+2], 255);
data1.data[i+4] = Math.min(data1.data[i+4] + data2.data[i+4], 255);
data1.data[i+5] = Math.min(data1.data[i+5] + data2.data[i+5], 255);
data1.data[i+6] = Math.min(data1.data[i+6] + data2.data[i+6], 255);
data1.data[i+8 ] = Math.min(data1.data[i+8 ] + data2.data[i+8 ], 255);
data1.data[i+9 ] = Math.min(data1.data[i+9 ] + data2.data[i+9 ], 255);
data1.data[i+10] = Math.min(data1.data[i+10] + data2.data[i+10], 255);
*/
}
c3.ctx.putImageData(data1, p1[0], p1[1]);
}
var canvas0 = _create_cv();
var canvas1 = _create_cv();
var canvas2 = _create_cv();
document.getElementById("canvas0").appendChild(canvas0.cv);
canvas1.ctx.fillStyle = "#490";
canvas1.ctx.fillRect(0, 0, 200, 200);
x = 0;
last = (new Date()).getTime();
function a()
{
x++;
if (x%100 == 0)
{
var now = (new Date()).getTime();
document.title = Math.floor(100 / (now - last) * 1000) + " fps";
last = now;
}
canvas2.ctx.clearRect(0, 0, 1280, 720);
canvas2.ctx.fillStyle = "rgba(128,0,0," + (x % 300)/300 + ")";
canvas2.ctx.fillRect(10, 90, 200, 50);
canvas2.ctx.fillStyle = "rgba(255,255,0," + (x % 200)/200 + ")";
canvas2.ctx.fillRect(50, 50, 200, 200);
canvas2.ctx.fillStyle = "rgba(255,255,255," + (x % 100)/100 + ")";
canvas2.ctx.fillRect(20, 70, 200, 100);
blend(canvas1, canvas2, canvas0, [ 0, 0 ], [ 1280, 720 ]);
}
window.setInterval(a, 1);
</script>
</body>
</html>
@@ -0,0 +1,138 @@
<!DOCTYPE HTML>
<html>
<head>
<title>13312 / experiments</title>
<style>
body, html
{
background: #111;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="canvas0"></div>
<script type="text/javascript">
function _create_cv()
{
var obj = {};
obj.cv = document.createElement("canvas");
obj.cv.width = 700;
obj.cv.height = 300;
obj.ctx = obj.cv.getContext("2d");
return obj;
}
function draw_fire(c, x, y, state)
{
var r;
r = 2;
if (state < 0.15)
{
r = (state / 0.15) * 8 + 6;
c.fillStyle = "rgba(255,255," + Math.floor(255 - state/0.15 * 255) + ",0.7)";
}
else if (state < 0.3)
{
r = ((state - 0.15) / 0.15) * 6 + 14;
c.fillStyle = "rgba(255," + Math.floor(255 - (state - 0.15)/0.15 * 255) + ",0,0.7)";
}
else if (state < 0.6)
{
r = ((state - 0.3) / 0.3) * -4 + 20;
c.fillStyle = "rgba(" + Math.floor(255 - (state - 0.3)/0.3 * 255) + ",0,0," + (0.7 - (state - 0.3)/0.3*0.6) + ")";
}
else
{
r = ((state - 0.6) / 0.4) * -10 + 16;
c.fillStyle = "rgba(0,0,0," + (0.1 - (state - 0.6)/0.4*0.1) + ")";
}
// c.globalCompositeOperation = "lighter";
c.beginPath();
c.arc(x, y, r, 0, 2 * Math.PI, false);
/*
c.moveTo(x - (Math.random() * r*0.5 + r*0.5), y - (Math.random() * r*0.5 + r*0.5));
c.lineTo(x - (Math.random() * r*0.5 + r*0.5), y + (Math.random() * r*0.5 + r*0.5));
c.lineTo(x + (Math.random() * r*0.5 + r*0.5), y + (Math.random() * r*0.5 + r*0.5));
c.lineTo(x + (Math.random() * r*0.5 + r*0.5), y - (Math.random() * r*0.5 + r*0.5));
*/
/*
c.moveTo(x + Math.random() * r - r/2, y + Math.random() * r - r/2);
c.lineTo(x + Math.random() * r - r/2, y + Math.random() * r - r/2);
c.lineTo(x + Math.random() * r - r/2, y + Math.random() * r - r/2);
c.lineTo(x + Math.random() * r - r/2, y + Math.random() * r - r/2);
*/
c.fill();
c.closePath();
c.globalCompositeOperation = "source-over";
return;
var d1 = c.getImageData();
var d2 = c.createImageData(d1);
var x,y;
for (x=0; x<200; x++)
{
for (y=0; y<200; y++)
{
}
}
}
var canvas0 = _create_cv();
var canvas1 = _create_cv();
var canvas2 = _create_cv();
document.getElementById("canvas0").appendChild(canvas0.cv);
var fires = [];
for (var i=0; i<2000; i++)
{
fires.push([ Math.random() * 4 + 100, Math.random() * 4 + 200, Math.random()*4+30, -Math.random()*8 - 2, -Math.random() * 30 - i / 10 ]);
}
x = 0;
function a()
{
x++;
canvas0.ctx.fillStyle = "#2ac";
canvas0.ctx.fillRect(0, 0, 700, 300);
for (var i=0; i<fires.length; i++)
{
if (fires[i][4] <= 0)
{
}
else if (fires[i][4] < 100)
{
draw_fire(canvas0.ctx, fires[i][0], fires[i][1], fires[i][4] / 100);
fires[i][2] *= 0.999;
fires[i][3] *= 0.999;
fires[i][0] += fires[i][2] * 0.1;
fires[i][1] += fires[i][3] * 0.1;
}
else
{
fires[i] = [ Math.random() * 4 + 100, Math.random() * 4 + 200, Math.random()*4+30, -Math.random()*8 - 2, -Math.random() * 30 ];
}
fires[i][4] += Math.random() * 0.4 + 0.6;
}
}
window.setInterval(a, 1000/30);
/*
for (i=0; i<1; i+=0.025)
{
draw_fire(canvas0.ctx, 40 + 1200*i, 40, i);
}
*/
</script>
</body>
</html>
Oops, something went wrong.

0 comments on commit 0a512a8

Please sign in to comment.
You can’t perform that action at this time.