Related
I have a canvas animation which you can see here.
I've noticed that once you have watched the animation after a while (approximately 25 seconds) the animation starts to jump around. I'm struggling to figure out how to make it so that it is one constant fluid motion?
Code below:
<canvas id="canvas"></canvas>
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
canvas.width = parseInt(getComputedStyle(canvas).width);
canvas.height = parseInt(getComputedStyle(canvas).height);
var P = 4;
var A = 4;
function draw(shift) {
var w = canvas.width;
var h = canvas.height;
shift = shift >= 500*Math.PI ? shift - 100*Math.PI : shift;
ctx.clearRect(0, 0, w, h);
var grd = ctx.createLinearGradient(0, 0, w, h);
grd.addColorStop(0, "#4a8bf5");
grd.addColorStop(1, "#f16b55");
ctx.strokeStyle = grd;
ctx.lineCap = "round";
for (var i = 0; i < w; ) {
var _A = Math.abs(A*Math.cos(2*i));
ctx.beginPath();
var pos = Math.exp(-_A * i / w) * Math.sin(P * Math.PI * (i + shift) / w);
pos *= h / 2;
var lw = Math.exp(-_A * i / w) * Math.sin(3 * Math.PI * (i - shift) / w) * 2;
ctx.lineWidth = (lw)+1;
ctx.lineTo(i, h / 2 - pos);
ctx.closePath();
ctx.stroke();
i += 1;
}
window.requestAnimationFrame(function(){
draw(shift + 1);
});
}
draw(0);
The solution is to make sure that the change in shift results in the sin() argument changing by a multiple of 2π.
Given
Math.sin((i + shift) / (w / P))
this can be done using something like
if (shift > 500) shift -= 2 * Math.PI * (w / P);
There will still be a jump in the 2nd sin() argument here, the line width. To avoid this, shift has to be reduced by a number that causes both arguments to change by multiples of 2π, the LCM if you will.
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
canvas.width = parseInt(getComputedStyle(canvas).width);
canvas.height = parseInt(getComputedStyle(canvas).height);
var P = 10;
var A = 4;
var shift = 0;
function draw() {
var w = canvas.width;
var h = canvas.height;
shift += 1;
if (shift > 500) shift -= 2 * Math.PI * (w / P);
shift_el.innerHTML = shift;
ctx.clearRect(0, 0, w, h);
var grd = ctx.createLinearGradient(0, 0, w, h);
grd.addColorStop(0, "#4a8bf5");
grd.addColorStop(1, "#f16b55");
ctx.strokeStyle = grd;
ctx.lineCap = "round";
for (var i = 0; i < w;) {
var _A = Math.abs(A * Math.cos(2 * i));
ctx.beginPath();
var pos = Math.exp(-_A * i / w) * Math.sin((i + shift) / (w / P));
pos *= h / 2;
var lw = Math.exp(-_A * i / w) * Math.sin(3 * Math.PI * (i - shift) / w) * 2;
ctx.lineWidth = (lw) + 1;
ctx.lineTo(i, h / 2 - pos);
ctx.closePath();
ctx.stroke();
i += 1;
}
window.requestAnimationFrame(draw);
}
draw();
body {
background: #ffffff;
padding: 0;
margin: 0;
}
canvas {
height: 200px;
width: 100%;
}
#shift_el {
position: absolute;
top: 0
}
<canvas id="canvas"></canvas>
<div id="shift_el"></div>
I'm a canvas beginner, sorry if this is a trivial question. How can I make the fireworks in my work fade out once they've exploded?
https://jsfiddle.net/ccwhryvv/
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
mousePos = {
x: 400,
y: 300
},
// create canvas
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
particles = [],
rockets = [],
MAX_PARTICLES = 400,
colorCode = 0;
// init
$(document).ready(function() {
$('#content')[0].appendChild(canvas);
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
setInterval(launch, 800);
setInterval(loop, 1000 / 50);
});
// update mouse position
$(document).mousemove(function(e) {
e.preventDefault();
mousePos = {
x: e.clientX,
y: e.clientY
};
});
// launch more rockets!!!
$(document).mousedown(function(e) {
for (var i = 0; i < 5; i++) {
launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6);
}
});
function launch() {
launchFrom(SCREEN_WIDTH / 2);
}
function launchFrom(x) {
if (rockets.length < 10) {
var rocket = new Rocket(x);
rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
rocket.vel.y = Math.random() * -3 - 4;
rocket.vel.x = Math.random() * 6 - 3;
rocket.size = 8;
rocket.shrink = 0.999;
rocket.gravity = 0.01;
rockets.push(rocket);
}
}
function loop() {
// update screen size
if (SCREEN_WIDTH != window.innerWidth) {
canvas.width = SCREEN_WIDTH = window.innerWidth;
}
if (SCREEN_HEIGHT != window.innerHeight) {
canvas.height = SCREEN_HEIGHT = window.innerHeight;
}
// clear canvas
context.fillStyle = "rgba(0, 0, 0, 0.0)";
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
var existingRockets = [];
for (var i = 0; i < rockets.length; i++) {
// update and render
rockets[i].update();
rockets[i].render(context);
// calculate distance with Pythagoras
var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));
// random chance of 1% if rockets is above the middle
var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false;
/* Explosion rules
- 80% of screen
- going down
- close to the mouse
- 1% chance of random explosion
*/
if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) {
rockets[i].explode();
} else {
existingRockets.push(rockets[i]);
}
}
rockets = existingRockets;
var existingParticles = [];
for (var i = 0; i < particles.length; i++) {
particles[i].update();
// render and save particles that can be rendered
if (particles[i].exists()) {
particles[i].render(context);
existingParticles.push(particles[i]);
}
}
// update array with existing particles - old particles should be garbage collected
particles = existingParticles;
while (particles.length > MAX_PARTICLES) {
particles.shift();
}
}
function Particle(pos) {
this.pos = {
x: pos ? pos.x : 0,
y: pos ? pos.y : 0
};
this.vel = {
x: 0,
y: 0
};
this.shrink = .97;
this.size = 2;
this.resistance = 1;
this.gravity = 0;
this.flick = false;
this.alpha = 1;
this.fade = 0;
this.color = 0;
}
Particle.prototype.update = function() {
// apply resistance
this.vel.x *= this.resistance;
this.vel.y *= this.resistance;
// gravity down
this.vel.y += this.gravity;
// update position based on speed
this.pos.x += this.vel.x;
this.pos.y += this.vel.y;
// shrink
this.size *= this.shrink;
// fade out
this.alpha -= this.fade;
};
Particle.prototype.render = function(c) {
if (!this.exists()) {
return;
}
c.save();
c.globalCompositeOperation = 'lighter';
var x = this.pos.x,
y = this.pos.y,
r = this.size / 2;
var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");
c.fillStyle = gradient;
c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();
c.restore();
};
Particle.prototype.exists = function() {
return this.alpha >= 0.1 && this.size >= 1;
};
function Rocket(x) {
Particle.apply(this, [{
x: x,
y: SCREEN_HEIGHT}]);
this.explosionColor = 0;
}
Rocket.prototype = new Particle();
Rocket.prototype.constructor = Rocket;
Rocket.prototype.explode = function() {
var count = Math.random() * 10 + 80;
for (var i = 0; i < count; i++) {
var particle = new Particle(this.pos);
var angle = Math.random() * Math.PI * 2;
// emulate 3D effect by using cosine and put more particles in the middle
var speed = Math.cos(Math.random() * Math.PI / 2) * 15;
particle.vel.x = Math.cos(angle) * speed;
particle.vel.y = Math.sin(angle) * speed;
particle.size = 10;
particle.gravity = 0.2;
particle.resistance = 0.92;
particle.shrink = Math.random() * 0.05 + 0.93;
particle.flick = true;
particle.color = this.explosionColor;
particles.push(particle);
}
};
Rocket.prototype.render = function(c) {
if (!this.exists()) {
return;
}
c.save();
c.globalCompositeOperation = 'lighter';
var x = this.pos.x,
y = this.pos.y,
r = this.size / 2;
var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
// gradient.addColorStop(1, "rgba(255, 255, 255, " + this.alpha + ")");
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
c.fillStyle = gradient;
c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();
c.restore();
};
Thank you!
Creating gradients is expensive -- especially inside an animation loop.
It's more efficient is to pre-create a spritesheet of gradient exploding sprites before your app starts:
Create an in-memory canvas to act as a spritesheet,
Choose a dozen standard colors for you explosions.
Create gradient sprites in sequential order of exploding.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var ss=makeSpritesheet(10,15);
ctx.fillStyle='navy';
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(ss,0,0);
function makeSpritesheet(maxRadius,colorCount){
var c=document.createElement('canvas');
var ctx=c.getContext('2d');
var spacing=maxRadius*2.5;
c.width=spacing*maxRadius;
c.height=spacing*(colorCount+1);
for(var colors=0;colors<colorCount;colors++){
var y=(colors)*spacing+spacing/2;
var color = parseInt(colors/colorCount*360);
for(r=2;r<=maxRadius;r++){
var x=(r-1)*spacing;
var gradient = ctx.createRadialGradient(x, y, 0, x, y, r);
gradient.addColorStop(0.2, "white");
gradient.addColorStop(0.7, 'hsla('+color+', 100%, 50%, 1)');
gradient.addColorStop(1.0, "rgba(0,0,0,0)");
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2);
ctx.closePath();
ctx.fill();
}
}
return(c);
}
body{ background-color:white; }
#canvas{border:1px solid red; }
<canvas id="canvas" width=640 height=512></canvas>
During Animation, draw the sprites from the spritesheet to your canvas.
Fade the opacity of each sprite by setting context.globalAlpha before drawing each sprite.
I have a canvas item that has several variables determining the speed of the "particles" I am generating. I have it setup so that when you log in the canvas updates and changes color(basically I am using a php session variable to reitterate the js code for the canvas to change a few variables on it) I am using ajax to reload the page with the canvas within the main page(so the whole page does not reload). When ever it reloads the canvas page via ajax the speed of the particles increases. When I reload with the reload button it does not increase. Is there a way to reset the canvas in between the ajax(I have tried using canvas.delete("all"); and canvas.delete("speed"); but it continues to speed up the canvas particles with each ajax reload. Any ideas?
Here is the canvas fork I created and am working with.
<div id="isohold">
<canvas id="iso"></canvas>
<div id="loghold">Login</div>
</div>
<?php
session_start();
//3.1.4 if the user is logged in Greets the user with message
if (isset($_SESSION['userid'])){
$userid = $_SESSION['userid'];
echo " <script>
'use strict';
var rn = function rn(min, max) {
return Math.random() * (max - min) + min;
};
var ctx = iso.getContext('2d');
var _window = window;
var w = _window.innerWidth;
var h = _window.innerHeight;
var t = 10;
var arr = [];
var cn = 200;
var rad = 300;
var sp = rn(1, 5) / 10000;
iso.width = w;
iso.height = h;
while (~ ~ cn--) {
var angle = rn(110, 359);
arr = [].concat(arr, [{
color: 'rgba(81, 180, 200, 0.5)',
distortion: rn(15, 75),
tmod: rn(5, 10),
size: rn(15, 20),
speed: 0.0005,
angle: angle,
lastPos: {
x: w / 2,
y: h / 2
}
}]);
}
var draw = function draw() {
request = requestAnimationFrame(function () {
return draw();
});
t++;
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0, 0, 0,.1)';
ctx.fillRect(0, 0, w, h);
var crad = rad * Math.sin(300);
ctx.globalCompositeOperation = 'lighter';
arr.forEach(function (el) {
ctx.strokeStyle = el.color;
ctx.lineWidth = el.size;
ctx.beginPath();
var lastPos = el.angle - 0.0005;
var x = w / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.cos(el.angle * 180 / Math.PI);
var y = h / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.sin(el.angle * 180 / Math.PI);
ctx.moveTo(el.lastPos.x, el.lastPos.y);
ctx.lineTo(x, y);
el.lastPos = { x: x, y: y };
el.angle = (el.angle + 0.0005) % 359;
ctx.stroke();
});
};
var resize = function resize() {
iso.width = w = window.innerWidth;
iso.height = h = window.innerHeight;
};
var request = requestAnimationFrame(function () {
return draw();
});
window.addEventListener('resize', function () {
return resize();
});
</script>
<script>
$(\"#loghold\").hide();
</script>
";
}else{
echo "<script>
'use strict';
var rn = function rn(min, max) {
return Math.random() * (max - min) + min;
};
var ctx = iso.getContext('2d');
var _window = window;
var w = _window.innerWidth;
var h = _window.innerHeight;
var t = 10;
var arr = [];
var cn = 200;
var rad = 300;
iso.width = w;
iso.height = h;
while (~ ~ cn--) {
var angle = rn(110, 359);
arr = [].concat(arr, [{
color: 'rgba(255, 255, 255, 0.5)',
distortion: rn(15, 75),
tmod: rn(5, 10),
size: rn(15, 20),
speed: rn(1, 5) / 5000,
angle: angle,
lastPos: {
x: w / 2,
y: h / 2
}
}]);
}
var draw = function draw() {
request = requestAnimationFrame(function () {
return draw();
});
t++;
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0, 0, 0,.1)';
ctx.fillRect(0, 0, w, h);
var crad = rad * Math.sin(300);
ctx.globalCompositeOperation = 'lighter';
arr.forEach(function (el) {
ctx.strokeStyle = el.color;
ctx.lineWidth = el.size;
ctx.beginPath();
var lastPos = el.angle - el.speed;
var x = w / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.cos(el.angle * 180 / Math.PI);
var y = h / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.sin(el.angle * 180 / Math.PI);
ctx.moveTo(el.lastPos.x, el.lastPos.y);
ctx.lineTo(x, y);
el.lastPos = { x: x, y: y };
el.angle = (el.angle + el.speed) % 359;
ctx.stroke();
});
};
var resize = function resize() {
iso.width = w = window.innerWidth;
iso.height = h = window.innerHeight;
};
var request = requestAnimationFrame(function () {
return draw();
});
window.addEventListener('resize', function () {
return resize();
});
</script>
";
};
?>
ajax in php
echo " <script>
$(\"#isoholder\").load(\"/iso/iso.php\");
</script>";
Change the page to have the javascript for animation outside the session condition and in the session code just flag via a global var that you are logged in
... page data
<script>
// the following var must be global to the page.
var sessionLoggedIn = false; // use this to determine the colours to use
// the code to do the animation
...
function draw(){
if(sessionLoggedIn){ // if true then logged in
}else{ // not logged in
}
}
</script>
<?php
session_start();
if (isset($_SESSION['userid'])){
$userid = $_SESSION['userid'];
echo " <script> sessionLoggedIn = true;</script> ";
}else{
echo "<script> sessionLoggedIn = false;</script> ";
}
?>
How would I go about changing a defined variable in a js script that is running when a specific php session variable response is returned?
How would I change the color within this canvas js array when a specific php session variable is set. The method I am using now is leading to a problem of increasing the speed of the animation though the color does change.
<div id="isohold">
<canvas id="iso"></canvas>
<div id="loghold">Login</div>
</div>
<?php
session_start();
//3.1.4 if the user is logged in Greets the user with message
if (isset($_SESSION['userid'])){
$userid = $_SESSION['userid'];
echo " <script>
'use strict';
var rn = function rn(min, max) {
return Math.random() * (max - min) + min;
};
var ctx = iso.getContext('2d');
var _window = window;
var w = _window.innerWidth;
var h = _window.innerHeight;
var t = 10;
var arr = [];
var cn = 200;
var rad = 300;
var sp = rn(1, 5) / 10000;
iso.width = w;
iso.height = h;
while (~ ~ cn--) {
var angle = rn(110, 359);
arr = [].concat(arr, [{
color: 'rgba(81, 180, 200, 0.5)',
distortion: rn(15, 75),
tmod: rn(5, 10),
size: rn(15, 20),
speed: 0.0005,
angle: angle,
lastPos: {
x: w / 2,
y: h / 2
}
}]);
}
var draw = function draw() {
request = requestAnimationFrame(function () {
return draw();
});
t++;
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0, 0, 0,.1)';
ctx.fillRect(0, 0, w, h);
var crad = rad * Math.sin(300);
ctx.globalCompositeOperation = 'lighter';
arr.forEach(function (el) {
ctx.strokeStyle = el.color;
ctx.lineWidth = el.size;
ctx.beginPath();
var lastPos = el.angle - 0.0005;
var x = w / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.cos(el.angle * 180 / Math.PI);
var y = h / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.sin(el.angle * 180 / Math.PI);
ctx.moveTo(el.lastPos.x, el.lastPos.y);
ctx.lineTo(x, y);
el.lastPos = { x: x, y: y };
el.angle = (el.angle + 0.0005) % 359;
ctx.stroke();
});
};
var resize = function resize() {
iso.width = w = window.innerWidth;
iso.height = h = window.innerHeight;
};
var request = requestAnimationFrame(function () {
return draw();
});
window.addEventListener('resize', function () {
return resize();
});
</script>
<script>
$(\"#loghold\").hide();
</script>
";
}else{
echo "<script>
'use strict';
var rn = function rn(min, max) {
return Math.random() * (max - min) + min;
};
var ctx = iso.getContext('2d');
var _window = window;
var w = _window.innerWidth;
var h = _window.innerHeight;
var t = 10;
var arr = [];
var cn = 200;
var rad = 300;
iso.width = w;
iso.height = h;
while (~ ~ cn--) {
var angle = rn(110, 359);
arr = [].concat(arr, [{
color: 'rgba(255, 255, 255, 0.5)',
distortion: rn(15, 75),
tmod: rn(5, 10),
size: rn(15, 20),
speed: rn(1, 5) / 5000,
angle: angle,
lastPos: {
x: w / 2,
y: h / 2
}
}]);
}
var draw = function draw() {
request = requestAnimationFrame(function () {
return draw();
});
t++;
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0, 0, 0,.1)';
ctx.fillRect(0, 0, w, h);
var crad = rad * Math.sin(300);
ctx.globalCompositeOperation = 'lighter';
arr.forEach(function (el) {
ctx.strokeStyle = el.color;
ctx.lineWidth = el.size;
ctx.beginPath();
var lastPos = el.angle - el.speed;
var x = w / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.cos(el.angle * 180 / Math.PI);
var y = h / 2 + (crad + el.distortion * Math.sin(t / el.tmod)) * Math.sin(el.angle * 180 / Math.PI);
ctx.moveTo(el.lastPos.x, el.lastPos.y);
ctx.lineTo(x, y);
el.lastPos = { x: x, y: y };
el.angle = (el.angle + el.speed) % 359;
ctx.stroke();
});
};
var resize = function resize() {
iso.width = w = window.innerWidth;
iso.height = h = window.innerHeight;
};
var request = requestAnimationFrame(function () {
return draw();
});
window.addEventListener('resize', function () {
return resize();
});
</script>
";
};
?>
<?php $color="yellow"; ?> <!--define it in php-->
<div id="color" data-color= <?php echo $color; ?> ></div> <!--insert it in html-->
<script>
var color=""; //declare your variable in JS
window.onload = function(e) {
color=document.getElementById("color").dataset.color; //redefine the variable's value from the html defined by the php
};
</script>
I'm using this jsfiddle for the animation and the final value is
wheel.segments[i]
http://jsfiddle.net/bramp/94jP6/
And I would like to retrieve that value after animation has stopped so I can use it in PHP. I tried something like:
function retrivewinner() {
var winner = wheel.segments[i];
window.location.href = "index.php?tag=" + winner;
}
But it would freeze the browser or reload each time
i have edit your code, try:
// Helpers
shuffle = function(o) {
for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
String.prototype.hashCode = function() {
// See http://www.cse.yorku.ca/~oz/hash.html
var hash = 5381;
for (i = 0; i < this.length; i++) {
char = this.charCodeAt(i);
hash = ((hash << 5) + hash) + char;
hash = hash & hash; // Convert to 32bit integer
}
return hash;
}
Number.prototype.mod = function(n) {
return ((this % n) + n) % n;
}
// List of venues. These are foursquare IDs, with the idea that eventually it'll tie in
venues = {
"116208": "Jerry's Subs and Pizza",
"66271": "Starbucks",
"5518": "Ireland's Four Courts",
"392360": "Five Guys",
"2210952": "Uptown Cafe",
"207306": "Corner Bakery Courthouse",
"41457": "Delhi Dhaba",
"101161": "TNR Cafe",
"257424": "Afghan Kabob House",
"512060": "The Perfect Pita",
"66244": "California Tortilla",
"352867": "Pho 75 - Rosslyn",
"22493": "Ragtime",
"268052": "Subway",
"5665": "Summers Restaurant & Sports Bar",
"129724": "Cosi",
"42599": "Ray's Hell Burger"
};
$(function() {
var venueContainer = $('#venues ul'),
e_winner = null;
$.each(venues, function(key, item) {
venueContainer.append(
$(document.createElement("li")).append(
$(document.createElement("input")).attr({
id: 'venue-' + key,
name: item,
value: item,
type: 'checkbox',
checked: true
}).change(function() {
var cbox = $(this)[0];
var segments = wheel.segments;
var i = segments.indexOf(cbox.value);
if (cbox.checked && i == -1) {
segments.push(cbox.value);
} else if (!cbox.checked && i != -1) {
segments.splice(i, 1);
}
segments.sort();
wheel.update();
})
).append(
$(document.createElement('label')).attr({
'for': 'venue-' + key
}).text(item)))
});
$('#venues ul>li').tsort("input", {
attr: "value"
});
});
// WHEEL!
var wheel = {
timerHandle: 0,
timerDelay: 33,
angleCurrent: 0,
angleDelta: 0,
size: 290,
canvasContext: null,
colors: ['#ffff00', '#ffc700', '#ff9100', '#ff6301', '#ff0000', '#c6037e',
'#713697', '#444ea1', '#2772b2', '#0297ba', '#008e5b', '#8ac819'],
segments: [],
seg_colors: [],
// Cache of segments to colors
maxSpeed: Math.PI / 16,
upTime: 1000,
// How long to spin up for (in ms)
downTime: 17000,
// How long to slow down for (in ms)
spinStart: 0,
frames: 0,
centerX: 300,
centerY: 300,
spin: function() {
// Start the wheel only if it's not already spinning
if (wheel.timerHandle == 0) {
wheel.spinStart = new Date().getTime();
wheel.maxSpeed = Math.PI / (16 + Math.random()); // Randomly vary how hard the spin is
wheel.frames = 0;
wheel.sound.play();
wheel.timerHandle = setInterval(wheel.onTimerTick, wheel.timerDelay);
}
},
onTimerTick: function() {
wheel.frames++;
wheel.draw();
var duration = (new Date().getTime() - wheel.spinStart);
var progress = 0;
var finished = false;
if (duration < wheel.upTime) {
progress = duration / wheel.upTime;
wheel.angleDelta = wheel.maxSpeed * Math.sin(progress * Math.PI / 2);
} else {
progress = duration / wheel.downTime;
wheel.angleDelta = wheel.maxSpeed * Math.sin(progress * Math.PI / 2 + Math.PI / 2);
if (progress >= 1) finished = true;
}
wheel.angleCurrent += wheel.angleDelta;
while (wheel.angleCurrent >= Math.PI * 2)
// Keep the angle in a reasonable range
wheel.angleCurrent -= Math.PI * 2;
if (finished) {
clearInterval(wheel.timerHandle);
wheel.timerHandle = 0;
wheel.angleDelta = 0;
$("#counter").html((wheel.frames / duration * 1000) + " FPS");alert(e_winner);
// here you build a post or get request $.post('save.php',{value:e_winner});
}
/*
// Display RPM
var rpm = (wheel.angleDelta * (1000 / wheel.timerDelay) * 60) / (Math.PI * 2);
$("#counter").html( Math.round(rpm) + " RPM" );
*/
},
init: function(optionList) {
try {
wheel.initWheel();
wheel.initAudio();
wheel.initCanvas();
wheel.draw();
$.extend(wheel, optionList);
} catch (exceptionData) {
alert('Wheel is not loaded ' + exceptionData);
}
},
initAudio: function() {
var sound = document.createElement('audio');
sound.setAttribute('src', 'http://bramp.net/javascript/wheel.mp3');
wheel.sound = sound;
},
initCanvas: function() {
var canvas = $('#wheel #canvas').get(0);
if ($.browser.msie) {
canvas = document.createElement('canvas');
$(canvas).attr('width', 1000).attr('height', 600).attr('id', 'canvas').appendTo('.wheel');
canvas = G_vmlCanvasManager.initElement(canvas);
}
canvas.addEventListener("click", wheel.spin, false);
wheel.canvasContext = canvas.getContext("2d");
},
initWheel: function() {
shuffle(wheel.colors);
},
// Called when segments have changed
update: function() {
// Ensure we start mid way on a item
//var r = Math.floor(Math.random() * wheel.segments.length);
var r = 0;
wheel.angleCurrent = ((r + 0.5) / wheel.segments.length) * Math.PI * 2;
var segments = wheel.segments;
var len = segments.length;
var colors = wheel.colors;
var colorLen = colors.length;
// Generate a color cache (so we have consistant coloring)
var seg_color = new Array();
for (var i = 0; i < len; i++)
seg_color.push(colors[segments[i].hashCode().mod(colorLen)]);
wheel.seg_color = seg_color;
wheel.draw();
},
draw: function() {
wheel.clear();
wheel.drawWheel();
wheel.drawNeedle();
},
clear: function() {
var ctx = wheel.canvasContext;
ctx.clearRect(0, 0, 1000, 800);
},
drawNeedle: function() {
var ctx = wheel.canvasContext;
var centerX = wheel.centerX;
var centerY = wheel.centerY;
var size = wheel.size;
ctx.lineWidth = 1;
ctx.strokeStyle = '#000000';
ctx.fileStyle = '#ffffff';
ctx.beginPath();
ctx.moveTo(centerX + size - 40, centerY);
ctx.lineTo(centerX + size + 20, centerY - 10);
ctx.lineTo(centerX + size + 20, centerY + 10);
ctx.closePath();
ctx.stroke();
ctx.fill();
// Which segment is being pointed to?
var i = wheel.segments.length - Math.floor((wheel.angleCurrent / (Math.PI * 2)) * wheel.segments.length) - 1;
// Now draw the winning name
ctx.textAlign = "left";
ctx.textBaseline = "middle";
ctx.fillStyle = '#000000';
ctx.font = "2em Arial";
ctx.fillText(wheel.segments[i], centerX + size + 25, centerY);e_winner= wheel.segments[i];
},
drawSegment: function(key, lastAngle, angle) {
var ctx = wheel.canvasContext;
var centerX = wheel.centerX;
var centerY = wheel.centerY;
var size = wheel.size;
var segments = wheel.segments;
var len = wheel.segments.length;
var colors = wheel.seg_color;
var value = segments[key];
ctx.save();
ctx.beginPath();
// Start in the centre
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, size, lastAngle, angle, false); // Draw a arc around the edge
ctx.lineTo(centerX, centerY); // Now draw a line back to the centre
// Clip anything that follows to this area
//ctx.clip(); // It would be best to clip, but we can double performance without it
ctx.closePath();
ctx.fillStyle = colors[key];
ctx.fill();
ctx.stroke();
// Now draw the text
ctx.save(); // The save ensures this works on Android devices
ctx.translate(centerX, centerY);
ctx.rotate((lastAngle + angle) / 2);
ctx.fillStyle = '#000000';
ctx.fillText(value.substr(0, 20), size / 2 + 20, 0);
ctx.restore();
ctx.restore();
},
drawWheel: function() {
var ctx = wheel.canvasContext;
var angleCurrent = wheel.angleCurrent;
var lastAngle = angleCurrent;
var segments = wheel.segments;
var len = wheel.segments.length;
var colors = wheel.colors;
var colorsLen = wheel.colors.length;
var centerX = wheel.centerX;
var centerY = wheel.centerY;
var size = wheel.size;
var PI2 = Math.PI * 2;
ctx.lineWidth = 1;
ctx.strokeStyle = '#000000';
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.font = "1.4em Arial";
for (var i = 1; i <= len; i++) {
var angle = PI2 * (i / len) + angleCurrent;
wheel.drawSegment(i - 1, lastAngle, angle);
lastAngle = angle;
}
// Draw a center circle
ctx.beginPath();
ctx.arc(centerX, centerY, 20, 0, PI2, false);
ctx.closePath();
ctx.fillStyle = '#ffffff';
ctx.strokeStyle = '#000000';
ctx.fill();
ctx.stroke();
// Draw outer circle
ctx.beginPath();
ctx.arc(centerX, centerY, size, 0, PI2, false);
ctx.closePath();
ctx.lineWidth = 10;
ctx.strokeStyle = '#000000';
ctx.stroke();
},
}
window.onload = function() {
wheel.init();
var segments = new Array();
$.each($('#venues input:checked'), function(key, cbox) {
segments.push(cbox.value);
});
wheel.segments = segments;
wheel.update();
// Hide the address bar (for mobile devices)!
setTimeout(function() {
window.scrollTo(0, 1);
}, 0);
}