Skip to content

Instantly share code, notes, and snippets.

@olivierrr
Created July 29, 2015 21:31
Show Gist options
  • Save olivierrr/f25f17790ebad1ad846d to your computer and use it in GitHub Desktop.
Save olivierrr/f25f17790ebad1ad846d 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);
!function() {
function Circle (x, y) {
this.px = x;
this.py = y;
this.vx = 0;
this.vy = 0;
}
Circle.prototype.draw = function () {
this.vx += (Math.random() - 0.5) / 2;
this.vy += (Math.random() - 0.5) / 2;
this.px += this.vx;
this.py += this.vy;
var dx = this.px - ctx.canvas.width * 0.5;
var dy = this.py - ctx.canvas.height * 0.5;
var d = Math.sqrt(dx * dx + dy * dy);
var m = Math.min(ctx.canvas.width * 0.5, ctx.canvas.height * 0.5);
var radius = (-d / m + 1) * m / 10;
if (radius > 0) {
requestAnimationFrame(this.draw.bind(this));
ctx.beginPath();
ctx.arc(this.px, this.py, radius, 0, 2 * Math.PI);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.strokeStyle = "#000";
ctx.stroke();
}
}
function resize () {
ctx.canvas.width = ctx.canvas.offsetWidth;
ctx.canvas.height = ctx.canvas.offsetHeight;
}
window.addEventListener('resize', resize, false);
resize();
function click () {
for (var i = 0; i < 10; i++) {
var c = new Circle(ctx.canvas.width * 0.5, ctx.canvas.height * 0.5);
c.draw();
}
}
window.addEventListener("mousedown", click, false );
document.body.addEventListener("touchstart", click, false );
click();
click();
click();
click();
}();
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);!function(){function Circle(x,y){this.px=x;this.py=y;this.vx=0;this.vy=0}Circle.prototype.draw=function(){this.vx+=(Math.random()-.5)/2;this.vy+=(Math.random()-.5)/2;this.px+=this.vx;this.py+=this.vy;var dx=this.px-ctx.canvas.width*.5;var dy=this.py-ctx.canvas.height*.5;var d=Math.sqrt(dx*dx+dy*dy);var m=Math.min(ctx.canvas.width*.5,ctx.canvas.height*.5);var radius=(-d/m+1)*m/10;if(radius>0){requestAnimationFrame(this.draw.bind(this));ctx.beginPath();ctx.arc(this.px,this.py,radius,0,2*Math.PI);ctx.fillStyle="#fff";ctx.fill();ctx.strokeStyle="#000";ctx.stroke()}};function resize(){ctx.canvas.width=ctx.canvas.offsetWidth;ctx.canvas.height=ctx.canvas.offsetHeight}window.addEventListener("resize",resize,false);resize();function click(){for(var i=0;i<10;i++){var c=new Circle(ctx.canvas.width*.5,ctx.canvas.height*.5);c.draw()}}window.addEventListener("mousedown",click,false);document.body.addEventListener("touchstart",click,false);click();click();click();click()}();
{
"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