Skip to content

Instantly share code, notes, and snippets.

@pixlpa
pixlpa / glitchTransition
Created July 23, 2015 05:54
HTML5 Canvas animated transition overlay for slow loading images.
function glitchTransition(){
this.canvas = document.getElementById("transition");
this.c = this.canvas.getContext('2d');
this.img = document.createElement('img');
this.img.onerror = function(e){
e.src = '';
}
this.nextimg = "";
//this.feed = document.createElement('img');
this.tt = 0;
@pixlpa
pixlpa / triangle-particles.js
Last active September 7, 2018 07:05
Super basic particle drawing with canvas
var palette = ['#b8cab5','#9fc3bc','#338ab3'];
var frame = window.setInterval(framedraw,40);
var blitx = new Array();
var canvas = document.getElementById('cc');
var c = canvas.getContext('2d');
for(var i = 0;i<100;i++){
blitx[i] = new Blit(Math.random()*800,Math.random()*400,10,10);
blitx[i].vx = Math.random()*5-2.5;
blitx[i].vy = Math.random()*5-2.5;
}
@pixlpa
pixlpa / shrimpy.js
Last active August 29, 2015 13:57
Uses hierarchical canvas transforms to make an articulated form
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
var canvas = document.getElementById('bb');
var cc = canvas.getContext('2d');
var swing = 0;
var swinger = -0.008;
var armswing = 0;
@pixlpa
pixlpa / draggablecanvasshapes.js
Last active August 29, 2015 13:57 — forked from anonymous/Draggable-Shapes.markdown
For each shape drawn into a canvas, an offscreen canvas is painted with the same shape, with the red color channel storing an ID. Shape click-testing is done by querying the color of the clicked position in the offscreen canvas. For UI with a lot of shapes (data viz for example) this is much more efficient than looping through and hit testing ba…
var canvas = document.getElementById('cvs'),
c = canvas.getContext('2d'),
ocan = document.createElement("canvas"),
oc = ocan.getContext('2d');
ocan.width=canvas.width;
ocan.height=canvas.height;
var offx = canvas.offsetLeft;
var offy = canvas.offsetTop;
var lastX = 0,lastY=0;
var active = 0;