summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--js/vendor/gif-encode/client.js14
-rw-r--r--noisia.html330
2 files changed, 344 insertions, 0 deletions
diff --git a/js/vendor/gif-encode/client.js b/js/vendor/gif-encode/client.js
index c441b47..62dd260 100644
--- a/js/vendor/gif-encode/client.js
+++ b/js/vendor/gif-encode/client.js
@@ -75,6 +75,20 @@ function GifEncoder(){
height = canvas.height;
}
}
+
+ var addFrames = this.addFrames = function(canvas_array, delay){
+ for (var i = 0; i < canvas_array.length; i++) {
+ var ctx = canvas.getContext('2d');
+ canvases.push(canvas);
+ contexts.push(ctx);
+ delays.push(delay);
+ }
+
+ if (canvases.length == 1) {
+ width = canvas_array[0].width;
+ height = canvas_array[0].height;
+ }
+ }
var copyFrame = this.copyFrame = function(canvas, delay) {
var newCanvas = document.createElement("canvas");
diff --git a/noisia.html b/noisia.html
new file mode 100644
index 0000000..3e474e9
--- /dev/null
+++ b/noisia.html
@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8 />
+<title>JS Bin</title>
+
+<style id="jsbin-css">
+body, canvas{
+ margin: 0;
+ padding: 0;
+ border: 0;
+ position: fixed;
+ cursor:none;
+ background: hsla(0,9%,11%,1);
+}
+</style>
+</head>
+<body>
+ <canvas id='canvas'></canvas>
+<script>
+var Mouse, PI, animloop, canvas, cos, ctx, decay, degToRad, distance, hypotenuse, now, pegs, radToDeg, rotateTo, sin, start;
+
+Mouse = {
+ x: window.innerWidth / 2,
+ y: window.innerHeight / 2,
+ down: false,
+ events: {
+ move: function(e) {
+ e.preventDefault();
+ if ('touches' in e) {
+ e = e.touches[0];
+ }
+ Mouse.x = (Mouse.x + e.pageX) * 0.5;
+ return Mouse.y = (Mouse.y + e.pageY) * 0.5;
+ },
+ down: function(e) {
+ e.preventDefault();
+ return Mouse.down = !Mouse.down;
+ },
+ up: function() {
+ return Mouse.down = !Mouse.down;
+ }
+ }
+};
+
+window.addEventListener('mousemove', Mouse.events.move, false);
+window.addEventListener('mousedown', Mouse.events.down, false);
+window.addEventListener('mouseup', Mouse.events.up, false);
+window.addEventListener('touchmove', Mouse.events.move, false);
+window.addEventListener('touchstart', Mouse.events.move, false);
+window.addEventListener('touchstart', Mouse.events.down, false);
+window.addEventListener('touchend', Mouse.events.up, false);
+
+start = Date.now();
+
+now = 0;
+
+PI = Math.PI;
+
+sin = function(a) {
+ return Math.sin(a);
+};
+
+cos = function(a) {
+ return Math.cos(a);
+};
+
+hypotenuse = function(a, b) {
+ if (a == null) {
+ a = 0;
+ }
+ if (b == null) {
+ b = 0;
+ }
+ return Math.sqrt(a * a + b * b);
+};
+
+distance = function(x1, y1, x2, y2) {
+ return hypotenuse(x2 - x1, y2 - y1);
+};
+
+radToDeg = function(rad) {
+ return rad / (Math.PI / 180);
+};
+
+degToRad = function(deg) {
+ return deg * (Math.PI / 180);
+};
+
+rotateTo = function(rise, run) {
+ var rotation, slope, tangent;
+
+ if (rise == null) {
+ rise = 0;
+ }
+ if (run == null) {
+ run = 0;
+ }
+ if (run === 0) {
+ run = 1;
+ }
+ slope = rise / run;
+ tangent = radToDeg(Math.atan(slope));
+ if (run < 0) {
+ rotation = degToRad(tangent - 180);
+ } else {
+ rotation = degToRad(tangent);
+ }
+ return rotation;
+};
+
+canvas = document.getElementById('canvas');
+
+ctx = canvas.getContext('2d');
+
+(canvas.sizeToWindow = function() {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ return canvas.hyp = hypotenuse(canvas.width, canvas.height);
+})();
+
+window.addEventListener('resize', canvas.sizeToWindow, false);
+
+pegs = function() {
+ var clockwise, dist, endAngle, i, interval, j, radius, rot, startAngle, xo, yo, _i, _j, _ref, _ref1;
+
+ interval = hypotenuse(canvas.height, canvas.width) / 31;
+ radius = interval / 2 - 1;
+ ctx.lineWidth = 1;
+ ctx.lineCap = 'round';
+ ctx.strokeStyle = 'black';
+ ctx.fillStyle = "hsla(0,60%,60%,1)";
+ for (i = _i = -interval, _ref = canvas.width + interval; interval > 0 ? _i < _ref : _i > _ref; i = _i += interval) {
+ for (j = _j = -interval, _ref1 = canvas.height + interval; interval > 0 ? _j < _ref1 : _j > _ref1; j = _j += interval) {
+ rot = now / 111 + rotateTo(Mouse.x - i, j - Mouse.y);
+ dist = distance(i, j, Mouse.x, Mouse.y);
+ xo = sin(j / canvas.height * PI * 22 + now / 55) * radius / 4;
+ yo = cos(i / canvas.width * PI * 22 + now / 77) * radius / 4;
+ ctx.beginPath();
+ startAngle = rot + sin(dist / canvas.hyp * PI * (cos(now / 444) * 4) + now / 99 * PI);
+ endAngle = (rot + 0.1) + sin(dist / canvas.hyp * PI * (cos(now / 333) * 4) - now / 111) * PI / 6;
+ clockwise = startAngle > endAngle ? true : false;
+ ctx.arc(i + xo, j + yo, radius, startAngle, endAngle, clockwise);
+ ctx.closePath();
+ ctx.fillStyle = "hsla(" + ((endAngle - startAngle) / PI * 90 + 240 - now / 3 % 360) + ",100%,50%,1)";
+ ctx.fill();
+ }
+ }
+ return true;
+};
+
+decay = function(context, x, y, w, h, r) {
+ context.save();
+ context.translate(context.canvas.width / 2 + x - w / 2, context.canvas.height / 2 + y - h / 2);
+ context.rotate(r);
+ context.drawImage(context.canvas, -context.canvas.width / 2, -context.canvas.height / 2, context.canvas.width + w, context.canvas.height + h);
+ return context.restore();
+};
+
+(animloop = function() {
+ animloop.id = requestAnimationFrame(animloop);
+ now = (Date.now() - start) / 32;
+ ctx.fillStyle = 'hsla(0,0%,0%,0.1)';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+ return pegs();
+})();
+</script>
+<script type="text/html" id="template">
+<div id="curtain" style="opacity:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0;background:rgba(255,255,255,0.1);"></div>
+<div id="outline" style="border:1px solid white;background:rgba(0,255,255,0.5);opacity:0.5; position: absolute;pointer-events:none"></div>
+<div id="controls" style="position: absolute;top:50px;right:50px;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;width:300px; padding: 4px;">
+ frames <input type="text" id="framecount" value="30" style="width:30px;">
+ delay <input type="text" id="framedelay" value="0.06s" style="width:30px;">
+ <button id="record" disabled>record</button>
+ <button id="save" disabled>save</button>
+ <span id="status"></span>
+ <div id="preview"></div>
+</div>
+</script>
+<script type="text/javascript" src="js/vendor/gif-encode/util.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/client.js"></script>
+<script type="text/javascript">
+(function(){
+ var canvases = document.getElementsByTagName("canvas")
+ if (canvases.length == 0) { alert("no canvas found"); return; }
+
+ var source = canvases[0]
+
+ var encoder = new GifEncoder()
+ encoder.on("encoded-frame", encoded_frame)
+ encoder.on("rendered", rendered_bytes)
+ encoder.on("rendered-url", rendered_url)
+
+ var w, h, x, y;
+ var last_t, frame_t, count, delay, done;
+ var frames = []
+ var curtain, outline
+ var dragging = false
+ var lastGif
+
+ init()
+ function init(){
+ document.body.style.width = "100%"
+ document.body.style.height = "100%"
+ document.body.parentNode.style.width = "100%"
+ document.body.parentNode.style.height = "100%"
+ var template = document.getElementById("template").innerHTML
+ var el = document.createElement("div")
+ el.innerHTML = template
+ document.body.appendChild(el)
+ bind()
+ }
+ function bind(){
+ curtain = document.getElementById("curtain")
+ outline = document.getElementById("outline")
+ controls = document.getElementById("outline")
+ document.getElementById("record").addEventListener("click", record, false)
+ document.getElementById("save").addEventListener("click", save, false)
+ curtain.addEventListener("mousedown", box_start, false)
+ curtain.addEventListener("mousemove", box_size, false)
+ curtain.addEventListener("mouseup", box_end, false)
+ outline.style.display = "none"
+ controls.style.display = "none"
+ }
+ function box_start(e){
+ x = e.pageX
+ y = e.pageY
+ w = 1
+ h = 1
+ dragging = true
+ outline.style.left = px(x-1)
+ outline.style.top = px(y-1)
+ outline.style.width = px(w)
+ outline.style.height = px(h)
+ outline.style.display = "block"
+ }
+ function box_size(e){
+ if (! dragging) return
+ w = e.pageX - x
+ h = e.pageY - y
+ outline.style.width = px(w)
+ outline.style.height = px(h)
+ }
+ function box_end(e){
+ dragging = false
+ controls.style.display = "block"
+ enable("record")
+ }
+ function enable(id){ document.getElementById(id).removeAttribute("disabled") }
+ function disable(id){ document.getElementById(id).setAttribute("disabled","disabled") }
+ function px(n){ return n + "px" }
+ function record(){
+ count = parseInt(document.getElementById("framecount").value)
+ delay = parseFloat(document.getElementById("framedelay").value) * 1000
+ done = 0
+ frame_t = 0
+ build()
+ capture()
+ last_t = +new Date()
+ requestAnimationFrame(recordloop)
+ status("recording")
+ }
+ function recordloop(){
+ var canvas = document.createElement("canvas")
+ var t = +new Date()
+ frame_t += t - last_t
+ last_t = t
+ if (frame_t > delay) {
+ frame_t -= delay
+ capture()
+ }
+ if (done == count) {
+ render()
+ }
+ else {
+ requestAnimationFrame(recordloop)
+ }
+ }
+ function build(){
+ frames = new Array(count)
+ for (var i = 0; i < count; i++){
+ frames[i] = document.createElement("canvas")
+ frames[i].height = h
+ frames[i].width = w
+ }
+ }
+ function capture(){
+ var frame = frames[done++]
+ var ctx = frame.getContext('2d')
+ ctx.fillStyle = document.body.backgroundColor
+ ctx.fillRect(0,0,w,h)
+ ctx.drawImage(source, 0, 0, w, h, x, y, w, h)
+ }
+ function render(){
+ encoder.reset()
+ encoder.addFrames(frames, delay)
+ status("encoding")
+ try {
+ encoder.encode()
+ }
+ catch (e) {
+ rendering = false
+ status(e)
+ throw e
+ }
+ }
+ function status(s){
+ document.getElementById("status").innerHTML = s
+ }
+ function encoded_frame(done,count){
+ status("encoded " + done + " / " + count)
+ }
+ function rendered_bytes(bytes){
+ status(filesize(bytes.length))
+ }
+ function rendered_url(url){
+ var image = new Image ()
+ lastGif = image.src = url
+ document.getElementById("preview").innerHTML = ""
+ document.getElementById("preview").appendChild(image)
+ rendering = false
+ }
+ function save(){
+ }
+})()
+</script>
+</body>
+</html>
+
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 14:01:47 +0000