pixlpa

Recently created

Least recently created

Recently updated

Least recently updated

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 / 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 / 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 / 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;