Skip to content

Instantly share code, notes, and snippets.

@johnstew
johnstew / dabble.js
Created February 27, 2013 21:33
Animation Dabbling Courtest of HTML5Canvas Tutorials
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
window.requestAnimFrame = function () {
return (window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
@johnstew
johnstew / index.html
Created February 28, 2013 16:57
A CodePen by John Stewart. Google Dot Bar - Just playing around with CSS3 animations.
<html>
<head><title>Beam</title></head>
<body>
<img class="google-logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Googlelogo.png/800px-Googlelogo.png">
<div class="beam">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<script language="JavaScript" type="text/javascript">
// Comcast Cable Communications, LLC Proprietary. Copyright 2012.
// Intended use is to display browser notifications for critical and time sensitive alerts.
var SYS_URL='/e8f6b078-0f35-11de-85c5-efc5ef23aa1f/aupm/notify.do';
// var image_url='http://servicealerts.comcast.net:8080/images/mt';
var image_url='http://xfinity.comcast.net/constantguard/BotAssistance/notice/images';
var headertext1='<strong>Comcast Courtesy Notice</strong>';
var textline1='You have reached 90% of your <b>monthly data usage allowance</b>.';
var textline2='Please sign in for more information and to remove this alert.';
var acknowledgebutton='<a href=\"#\" onClick="document.location.href=\''+SYS_URL+'?dispatch=redirect&redirectName=login&paramName=bmUid\'" title="Sign in to acknowledge" style="color: #FFFFFF;"><img alt="Sign in to acknowledge" src="'+image_url+'/mt_signin.png"/></a>';
@johnstew
johnstew / digitalroot.js
Created April 3, 2013 14:32
JS Digital Root
function root(num){
var total = 0;
if(num.toString().length == 1){
var iNum = parseInt(num);
return iNum;
}else{
num.toString().split("").forEach( function(value){
var iValue = parseInt(value);
return total += iValue;
});
@johnstew
johnstew / repulsion.js
Created October 21, 2013 14:39
Repulsion-Force
var part1Arr = "4 0.04 -0.02".split(" ");
var part2Arr = "4 -0.02 -0.03".split(" ");
var part1Obj = {
x : part1Arr[1],
y : part1Arr[2],
mass : part1Arr[0]
};
var part2Obj = {
@johnstew
johnstew / collides.js
Created October 22, 2013 02:04
Basic Collision Detection between two objects on canvas
function collides(a, b){
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
@johnstew
johnstew / simplestart.html
Created November 4, 2013 01:53
google maps quick start
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
@johnstew
johnstew / reqanimframe.js
Created November 4, 2013 13:36
Request Animation Frame
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
@johnstew
johnstew / CanvasQuickStart
Created November 4, 2013 13:38
Canvas Animation Quick Start
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
@johnstew
johnstew / 100particles.js
Created November 4, 2013 14:47
Draw 100 Particles, Nothing Fancy..Yet
//create particle
function Particle(x,y,r){
this.x = x;
this.y = y;
this.r = r;
}
Particle.prototype = {
constructor: Particle,
draw: function(){