Skip to content

Instantly share code, notes, and snippets.

@olivierrr
Created July 27, 2015 21:18
Show Gist options
  • Save olivierrr/a18a879ea0162e419656 to your computer and use it in GitHub Desktop.
Save olivierrr/a18a879ea0162e419656 to your computer and use it in GitHub Desktop.
requirebin sketch
var fit = require('canvas-fit');
var ctx = document.body.appendChild(document.createElement('canvas')).getContext('2d');
window.addEventListener('resize', fit(ctx.canvas, window), false);
var particles = [];
var PARTICLES_COUNT = 100;
var PARTICLE_SIZE = 5;
var PARTICLE_MAX_SPEED = 2;
function init() {
for(var i = 0; i < PARTICLES_COUNT; i++) {
particles.push({
x: ~~(Math.random() * ctx.canvas.width),
y: ~~(Math.random() * ctx.canvas.height),
vx: (Math.random() * (PARTICLE_MAX_SPEED * 2)) - PARTICLE_MAX_SPEED,
vy: (Math.random() * (PARTICLE_MAX_SPEED * 2)) - PARTICLE_MAX_SPEED
});
}
}
function update() {
for(var i = 0; i < particles.length; i++) {
var particle = particles[i];
particle.x += particle.vx;
particle.y += particle.vy;
if(particle.x > ctx.canvas.width) {
particle.vx = -Math.abs(particle.vx);
} else if(particle.x < 0) {
particle.vx = Math.abs(particle.vx);
} else if(particle.y > ctx.canvas.height) {
particle.vy = -Math.abs(particle.vy);
} else if(particle.y < 0) {
particle.vy = Math.abs(particle.vy);
}
}
}
function render() {
for(var i = 0; i < particles.length; i++) {
var particle = particles[i];
ctx.fillRect(particle.x, particle.y, PARTICLE_SIZE, PARTICLE_SIZE);
}
}
function clear() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
init();
(function tick() {
console.log('foo');
update();
clear();
render();
window.requestAnimationFrame(tick);
})();
require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=getSize;function getSize(element){if(element===window||element===document.body){return[window.innerWidth,window.innerHeight]}if(!element.parentNode){var temporary=true;document.body.appendChild(element)}var bounds=element.getBoundingClientRect();var styles=getComputedStyle(element);var height=(bounds.height|0)+parse(styles.getPropertyValue("margin-top"))+parse(styles.getPropertyValue("margin-bottom"));var width=(bounds.width|0)+parse(styles.getPropertyValue("margin-left"))+parse(styles.getPropertyValue("margin-right"));if(temporary){document.body.removeChild(element)}return[width,height]}function parse(prop){return parseFloat(prop)||0}},{}],"canvas-fit":[function(require,module,exports){var size=require("element-size");module.exports=fit;var scratch=new Float32Array(2);function fit(canvas,parent,scale){canvas.style.position=canvas.style.position||"absolute";canvas.style.top=0;canvas.style.left=0;resize.scale=parseFloat(scale||1);resize.parent=parent;return resize();function resize(){var p=resize.parent||canvas.parentNode;if(typeof p==="function"){var dims=p(scratch)||scratch;var width=dims[0];var height=dims[1]}else if(p&&p!==document.body){var psize=size(p);var width=psize[0]|0;var height=psize[1]|0}else{var width=window.innerWidth;var height=window.innerHeight}canvas.width=width*resize.scale;canvas.height=height*resize.scale;canvas.style.width=width+"px";canvas.style.height=height+"px";return resize}}},{"element-size":1}]},{},[]);var fit=require("canvas-fit");var ctx=document.body.appendChild(document.createElement("canvas")).getContext("2d");window.addEventListener("resize",fit(ctx.canvas,window),false);var particles=[];var PARTICLES_COUNT=100;var PARTICLE_SIZE=5;var PARTICLE_MAX_SPEED=2;function init(){for(var i=0;i<PARTICLES_COUNT;i++){particles.push({x:~~(Math.random()*ctx.canvas.width),y:~~(Math.random()*ctx.canvas.height),vx:Math.random()*(PARTICLE_MAX_SPEED*2)-PARTICLE_MAX_SPEED,vy:Math.random()*(PARTICLE_MAX_SPEED*2)-PARTICLE_MAX_SPEED})}}function update(){for(var i=0;i<particles.length;i++){var particle=particles[i];particle.x+=particle.vx;particle.y+=particle.vy;if(particle.x>ctx.canvas.width){particle.vx=-Math.abs(particle.vx)}else if(particle.x<0){particle.vx=Math.abs(particle.vx)}else if(particle.y>ctx.canvas.height){particle.vy=-Math.abs(particle.vy)}else if(particle.y<0){particle.vy=Math.abs(particle.vy)}}}function render(){for(var i=0;i<particles.length;i++){var particle=particles[i];ctx.fillRect(particle.x,particle.y,PARTICLE_SIZE,PARTICLE_SIZE)}}function clear(){ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)}init();(function tick(){console.log("foo");update();clear();render();window.requestAnimationFrame(tick)})();
{
"name": "requirebin-sketch",
"version": "1.0.0",
"dependencies": {
"canvas-fit": "1.4.0"
}
}
<!-- contents of this file will be placed inside the <body> -->
<!-- contents of this file will be placed inside the <head> -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment