Skip to content

Instantly share code, notes, and snippets.

@olivierrr
Created February 16, 2015 21:10
Show Gist options
  • Save olivierrr/7b557aa6cb4fb36a96a2 to your computer and use it in GitHub Desktop.
Save olivierrr/7b557aa6cb4fb36a96a2 to your computer and use it in GitHub Desktop.
requirebin sketch
var canvas = document.body.appendChild(document.createElement('canvas'));
var ctx = canvas.getContext('2d');
var fit = require('canvas-fit');
window.addEventListener('resize', fit(canvas));
var MAX_ENTITIES = 10;
var entities = [];
init();
loop();
function init() {
for(var i = 0; i < MAX_ENTITIES; i++) {
entities.push({
angleX: Math.random() * Math.PI * 2,
angleY: Math.random() * Math.PI * 2,
speedX: Math.random() * .1 - .05,
speedY: Math.random() * .1 - .05,
radius: 100 + Math.random() * 100
});
}
}
function update() {
ctx.fillStyle = 'rgba(255, 255, 255, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
entities.forEach(function(e) {
var x = Math.cos(e.angleX) * e.radius;
var y = Math.sin(e.angleY) * e.radius;
e.angleX += e.speedX;
e.angleY += e.speedY;
ctx.fillRect(canvas.width/2+x, canvas.height/2+y, 5, 5)
})
}
function loop() {
window.requestAnimationFrame(loop);
update();
}
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;function fit(canvas,parent,scale){canvas.style.position=canvas.style.position||"absolute";canvas.style.top=0;canvas.style.left=0;scale=parseFloat(scale||1);return resize();function resize(){var p=parent||canvas.parentNode;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*scale;canvas.height=height*scale;canvas.style.width=width+"px";canvas.style.height=height+"px";return resize}}},{"element-size":1}]},{},[]);var canvas=document.body.appendChild(document.createElement("canvas"));var ctx=canvas.getContext("2d");var fit=require("canvas-fit");window.addEventListener("resize",fit(canvas));var MAX_ENTITIES=10;var entities=[];init();loop();function init(){for(var i=0;i<MAX_ENTITIES;i++){entities.push({angleX:Math.random()*Math.PI*2,angleY:Math.random()*Math.PI*2,speedX:Math.random()*.1-.05,speedY:Math.random()*.1-.05,radius:100+Math.random()*100})}}function update(){ctx.fillStyle="rgba(255, 255, 255, 0.05)";ctx.fillRect(0,0,canvas.width,canvas.height);ctx.fillStyle="black";entities.forEach(function(e){var x=Math.cos(e.angleX)*e.radius;var y=Math.sin(e.angleY)*e.radius;e.angleX+=e.speedX;e.angleY+=e.speedY;ctx.fillRect(canvas.width/2+x,canvas.height/2+y,5,5)})}function loop(){window.requestAnimationFrame(loop);update()}
{
"name": "requirebin-sketch",
"version": "1.0.0",
"dependencies": {
"canvas-fit": "1.2.0"
}
}
<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment