Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 23, 2015 21:26
Show Gist options
  • Save anonymous/d6de81f369c715ffea77 to your computer and use it in GitHub Desktop.
Save anonymous/d6de81f369c715ffea77 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Experiment with canvas - flying dots // source http://jsbin.com/vuyowe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Experiment with canvas - flying dots">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body onload="main()">
<canvas id="cv" style="background:#1e0239" />
<script id="jsbin-javascript">
var ctx;
var clear;
var stars = [];
var TIME = 25;
var NUM_STARS = 2500;
var W = 300; // width
var H = 0; // height
var _csin = [];
var _ccos = [];
var N = 1000;
var M = (2 * Math.PI);
var INC = M / N;
function csin(a) {
var whole = parseInt(a / M);
var norm = a - (whole * M);
return _csin[parseInt( norm/ INC)];
}
function ccos(a) {
var whole = parseInt(a / M);
var norm = a - (whole * M);
return _ccos[parseInt( norm/INC)];
}
function init_cache()
{
for (var i = 0; i < N; i++) {
_csin.push(Math.sin(INC * i));
_ccos.push(Math.cos(INC * i));
}
}
function Star() {
this.phi = Math.random() * Math.PI * 2;
this.x = Math.random() * W;
}
Star.prototype.getX = function() {
// return Math.cos(this.phi) * this.x + W/2;
return ccos(this.phi) * this.x + W/2;
};
Star.prototype.getY = function() {
// return Math.sin(this.phi) * this.x + H/2;
return csin(this.phi) * this.x + H/2;
};
Star.prototype.reset = function() {
this.phi = Math.random() * Math.PI * 2;
this.x = 0;
};
var prev_t = 0;
function draw(t) {
clear();
var dt = t - prev_t;
prev_t = t;
ctx.fillStyle="#FFe66d";
for (var i = 0; i < stars.length; i++) {
s = stars[i];
s.x += dt / TIME;
if (s.x > (W/2 * Math.random() + W/2)) {
stars[i].reset();// = new Star();
}
ctx.fillRect(s.getX(), s.getY(), 5, 5);
}
// ctx.fillRect(50 + Math.sin(t/1000) * 20, 0, 10, 10);
window.requestAnimationFrame(draw);
}
function main() {
init_cache();
var cv = document.getElementById("cv");
ctx = cv.getContext("2d");
cv.width = W = window.innerWidth;
cv.height = H = window.innerHeight;
clear = function () {
ctx.clearRect(0, 0, cv.width, cv.height);
};
for (var i = 0; i < NUM_STARS; i++) {
stars.push(new Star());
}
window.requestAnimationFrame(draw);
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var ctx;
var clear;
var stars = [];
var TIME = 25;
var NUM_STARS = 2500;
var W = 300; // width
var H = 0; // height
var _csin = [];
var _ccos = [];
var N = 1000;
var M = (2 * Math.PI);
var INC = M / N;
function csin(a) {
var whole = parseInt(a / M);
var norm = a - (whole * M);
return _csin[parseInt( norm/ INC)];
}
function ccos(a) {
var whole = parseInt(a / M);
var norm = a - (whole * M);
return _ccos[parseInt( norm/INC)];
}
function init_cache()
{
for (var i = 0; i < N; i++) {
_csin.push(Math.sin(INC * i));
_ccos.push(Math.cos(INC * i));
}
}
function Star() {
this.phi = Math.random() * Math.PI * 2;
this.x = Math.random() * W;
}
Star.prototype.getX = function() {
// return Math.cos(this.phi) * this.x + W/2;
return ccos(this.phi) * this.x + W/2;
};
Star.prototype.getY = function() {
// return Math.sin(this.phi) * this.x + H/2;
return csin(this.phi) * this.x + H/2;
};
Star.prototype.reset = function() {
this.phi = Math.random() * Math.PI * 2;
this.x = 0;
};
var prev_t = 0;
function draw(t) {
clear();
var dt = t - prev_t;
prev_t = t;
ctx.fillStyle="#FFe66d";
for (var i = 0; i < stars.length; i++) {
s = stars[i];
s.x += dt / TIME;
if (s.x > (W/2 * Math.random() + W/2)) {
stars[i].reset();// = new Star();
}
ctx.fillRect(s.getX(), s.getY(), 5, 5);
}
// ctx.fillRect(50 + Math.sin(t/1000) * 20, 0, 10, 10);
window.requestAnimationFrame(draw);
}
function main() {
init_cache();
var cv = document.getElementById("cv");
ctx = cv.getContext("2d");
cv.width = W = window.innerWidth;
cv.height = H = window.innerHeight;
clear = function () {
ctx.clearRect(0, 0, cv.width, cv.height);
};
for (var i = 0; i < NUM_STARS; i++) {
stars.push(new Star());
}
window.requestAnimationFrame(draw);
}</script></body>
</html>
Raw
jsbin.vuyowe.js
var ctx;
var clear;
var stars = [];
var TIME = 25;
var NUM_STARS = 2500;
var W = 300; // width
var H = 0; // height
var _csin = [];
var _ccos = [];
var N = 1000;
var M = (2 * Math.PI);
var INC = M / N;
function csin(a) {
var whole = parseInt(a / M);
var norm = a - (whole * M);
return _csin[parseInt( norm/ INC)];
}
function ccos(a) {
var whole = parseInt(a / M);
var norm = a - (whole * M);
return _ccos[parseInt( norm/INC)];
}
function init_cache()
{
for (var i = 0; i < N; i++) {
_csin.push(Math.sin(INC * i));
_ccos.push(Math.cos(INC * i));
}
}
function Star() {
this.phi = Math.random() * Math.PI * 2;
this.x = Math.random() * W;
}
Star.prototype.getX = function() {
// return Math.cos(this.phi) * this.x + W/2;
return ccos(this.phi) * this.x + W/2;
};
Star.prototype.getY = function() {
// return Math.sin(this.phi) * this.x + H/2;
return csin(this.phi) * this.x + H/2;
};
Star.prototype.reset = function() {
this.phi = Math.random() * Math.PI * 2;
this.x = 0;
};
var prev_t = 0;
function draw(t) {
clear();
var dt = t - prev_t;
prev_t = t;
ctx.fillStyle="#FFe66d";
for (var i = 0; i < stars.length; i++) {
s = stars[i];
s.x += dt / TIME;
if (s.x > (W/2 * Math.random() + W/2)) {
stars[i].reset();// = new Star();
}
ctx.fillRect(s.getX(), s.getY(), 5, 5);
}
// ctx.fillRect(50 + Math.sin(t/1000) * 20, 0, 10, 10);
window.requestAnimationFrame(draw);
}
function main() {
init_cache();
var cv = document.getElementById("cv");
ctx = cv.getContext("2d");
cv.width = W = window.innerWidth;
cv.height = H = window.innerHeight;
clear = function () {
ctx.clearRect(0, 0, cv.width, cv.height);
};
for (var i = 0; i < NUM_STARS; i++) {
stars.push(new Star());
}
window.requestAnimationFrame(draw);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment