A roulette wheel in javascript - javascript

I am trying to build a roulette wheel in javascript.
I found this example: http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas but I find the look & feel not very terrible.
Since my roulette will have a limited number of option, I was thinking of using an image and then place text above with the proper angle. When spinning the wheel, I would just make the image and the text turn.
Is it a good approach? Are there some better approaches?

You can also do that with css3 rotation but it will work only on newer browsers
You can do even better. Make hole roulette wheel in SVG, it support animation and it can be programmed in javascript

Well I think the best approach in terms of creating something quickly and easily is to use an existing Javascript library for creating spinning prize/winning wheels.
I am the creator of a Javascript library called Winwheel.js which is specifically for this purpose. See http://www.dougtesting.net
One great feature about my Winwheel.js is that you can mix a graphically rich image for the face of the wheel with code-drawn text for the segment labels, so if you want the wheel to look really nice but have the flexibility of configurable text, you can.
Here is an example of the code needed to do this using Winwheel.js...
var myWheel = new Winwheel({
'drawMode' : 'image',
'drawText' : true, // Set this to true for text to be rendered on image.
'numSegments' : 4,
'textOrientation' : 'curved', // Set text properties.
'textAlignment' : 'outer',
'textMargin' : 5,
'textFontFamily' : 'courier',
'segments' : // Set segment text
[
{'text' : 'Television'},
{'text' : 'Mobile Phone'},
{'text' : 'Old Radio'},
{'text' : 'Computer'}
]
});
var wheelImg = new Image();
wheelImg.onload = function()
{
myWheel.wheelImage = wheelImg;
myWheel.draw();
}
wheelImg.src = "wheel_image.png";
There is a full set of tutorials on my site explaining how to use Winwheel.js, but the particular one about Image wheels can be found here http://dougtesting.net/winwheel/docs/tut9_creating_with_an_image
Thanks,
DouG

jQuery is not necessary. The example was done using the HTML5 Canvas element, which is probably the only (clean) way you could do it without Flash or Silverlight. You can customize the colors using the first array in the code, or any other nuance of it with a little tinkering.

You could use an SVG (Scalable vector graphics format) image and rotate it.

I wrote http://roulette.dabase.com/ as an exercise which works on mobile browsers I've tried.

I actually implemented a similar mini-game on my site not too long ago. No canvas, no SVG, no jQuery.
I used a simple image for the board (more specifically as a background-image), then placed a <div> on it to be the ball.
<div id="board"><div></div></div>
CSS:
#board {
width:256px;
height:256px;
background-image:url('gameboard.png');
position:relative;
transform-origin:50% 50%;
}
#board>div {
position:absolute;
margin-left:-7px;
margin-top:-7px;
border:7px outset #ccc;
width:1px; height:1px;
left:248px;
top:128px;
}
Then this JavaScript is used to position the ball when spinning:
function placeBall(angle) {
var board = document.getElementById("board"), ball = board.children[0];
ball.style.left = (128+Math.cos(angle)*120)+"px";
ball.style.top = (128-Math.sin(angle)*120)+"px";
board.style.transform = "rotate(-"+angle+"rad)";
}
This will result in the ball spinning around the wheel in older browsers. In newer browsers, the ball will stay in place (but the border shading will spin) while the entire board rotates. You can of course use a combination of the two if you do something different on the transformation (for example, "rotate(-"+(angle/2)+"rad)")

Related

Using SVG with ajax to animate state of IO hardware

The company I'm working for is selling micro computers that can manage and monitor diffrent IO devices.
They are using ajax for the web IO stuff and I created a new graphic for a Voltmeter that contains 41 states from 0 Volt to 20 with 0,5 stepping.
My first question would be, if that is being called a sprite because there are so many images?
The code I wrote to load the images was already much shorter than the company's because I made a function to generate the img links via a counter.
var i = 1;
function counter()
{
var img = "http://"adress"/"+i.toString()+".png";
if (i == 40)
{
i=0;
}
i++;
document.getElementById('picture').src = img;
}
now the next step I was asked was doing that with a svg.
I could do the same thing with a svg of course, but I´ve read about being able to animate svg.
The first big question is:
Should I make a svg file that contains all 41 images as code or should I just do one image and animate the needle by creating an own pivot for it?
Note that the animation states would be hand in hand with a javascript code that "GET"s hex values via xmlHTTP which define the states of the device.
So i wanna turn the needle to 3 volts on the svg if I rotate the knob at the device.
I don't ask for a full solution but some hints if this would even be possible and what i need to read about.
Here is the img I am talking about as an example
Voltmeter
https://www.deviantart.com/blue-lovag/art/Voltmeter-759876423
An SVG with 41 groups in it might be a big file. If you create an SVG containing just one image, where the needle is a <g> group with an ID defined on it, you can refer to that group from JavaScript and have the needle rotate -- even with a smooth animation.
You might define a CSS class for each state the needle can be in, with the rotation in it:
.pos20 {
transform: rotate(45deg);
}
There are some gotchas with Internet Explorer support for this, so you may have to set an attribute on the group directly:
<g transform="rotate(45deg)">...</g>
Please refer to this article on CSS-Tricks for details on SVG transformations.

How to auto focus camera on a point in three.js?

I want to know is there any built-in feature for auto focus a camera into a point in three.js so that the rest of the environment became relatively blur like something we have in these examples ?
http://alteredqualia.com/xg/examples/animation_physics_level.html
http://alteredqualia.com/xg/examples/animation_physics_ammo.html
The code in XG library that enabled auto focus, is something like this:
renderer.dofEnabled = false;
renderer.dofAutofocus = true;
renderer.dofAutofocusPoint.set( 0.5, 0.35 );
renderer.dofFocusDistance = 10;
renderer.dofFocusMaxBlur = 0.2;
I don't know about the XG library history but It seems that XG library in above links, is based on three.js but we don't have any camera auto focus or dofEnabled in three.js.
If there is some easy way to do it in three.js, please let me know, if not, any suggestions to know how to implement it is so much appreciated.
I don't know, but It seems that XG library is something private and the code is obfuscated so I can't find out how the focus feature implemented.
I just find out that, this effect is called "depth of field" (dof) and already implemented by using MeshDepthMaterial and there is an example in threejs website:
http://threejs.org/examples/webgl_postprocessing_dof.html

Engine for HTML5 Canvas animations and effects?

I am developing a HTML5 game. The server-side code (node.js, socket.io) is mostly done and I am moving on to polishing the client-side code.
I have been directly drawing tiles/grid on the canvas and moving the player's sprite using context and clearRect etc. I am thinking of drawing simple animations and effects over the tile-map/grid such as:
Rain, with flashes of lightning, and thunder audio clip.
Animating some of the tiles. E.g. grass tile has grass blowing in the wind by cycling through frames (like an animated gif).
Pop up text boxes that are close-able with mouse clicks or keyboard button press.
I have checked out this long list of JavaScript engines and tried out CraftyJS and MelonJS but most of these are made for platform or arcade style games, and many of them are not ready for production or are poorly maintained.
Is there a simple, lightweight, production-quality HTML5 canvas engine that can accomplish what I want?
Take a look at CreateJS; it's a great engine for what you're looking for.
EaseJS can be used for the Canvas element
SoundJS for the audio clip which you want played
It's well maintained, but an 1.0 version hasn't been released (yet).
Is it just animated sprites you want to achieve? You can do this easy without the use of a game engine. As for dialog boxes - you could just use dom elements over the canvas.
Here is a sprite class I wrote in javascript - maybe it's of some help :)
var FrtlsSprite = Class.extend({
init: function(bitmap, offsetX, offsetY, frameWidth, frameHeight, frameCount, loop){
this.dtotal=0;
this.framerate=0.007;
this.loop = loop;
this.isPlaying=false;
this.bitmap = new Image();
this.bitmap.src = bitmap;
this.frames= new Array();
this.currentFrame=0;
this.endFrame=0;
for(var i=0;i<frameCount;i++){
this.frames.push(new FrtlsFrame(offsetX+i*frameWidth, offsetY+0, frameWidth, frameHeight));
}
},
update: function(dt){
if(this.isPlaying){
this.dtotal += dt //we add the time passed since the last update, probably a very small number like 0.01
if (this.dtotal >= this.framerate){
this.dtotal -= this.framerate;
this.currentFrame++;
if(this.currentFrame==this.endFrame){
if(this.loop == false){
this.stop();
}
else{
this.currentFrame=0;
}
}
}
}
},
draw: function(){
fruitless.ctx.drawImage(this.bitmap,
this.frames[this.currentFrame].pos.x,
this.frames[this.currentFrame].pos.y,
this.frames[this.currentFrame].dimensions.x,
this.frames[this.currentFrame].dimensions.y,
0,
0,
this.frames[this.currentFrame].dimensions.x*fruitless.worldScale,
this.frames[this.currentFrame].dimensions.y*fruitless.worldScale);
},
play:function(frame){
this.currentFrame=(frame==undefined)?0:frame;
this.endFrame = this.frames.length-1
this.isPlaying=true;
},
playTo:function(frame, endFrame){
this.currentFrame=frame;
this.endFrame = endFrame;
this.isPlaying=true;
},
stop:function(frame){
this.currentFrame=(frame==undefined)?this.currentFrame:frame;
this.isPlaying=false;
}
});
cgSceneGraph will do the job for you.
Look at the examples web page, there are some examples with animated Sprite. It's a native component of the framework and is really easy to use with several featres like multi animation inside the same instance of the animated sprite, use of spritesheet, ...

I would like to reposition a circle created through Raphael js, and to use it as a letter in a title

I have created a vector graphic using Raphael JS - specifically a circle.
I would now like to use this circle as the letter "O" in a title. It is also a circle that will animate upon click. I would like to know if this is at all possible.
Here is a fiddle to explain better what I'm trying to say.
The html is very simple:
<h2>N<span id="canvas_cont"></span>OTRE APPROCHE :</h2>
Here is the jsfiddle
Basically the circle will act as the second letter in "Notre", and when clicked will move to the right of the screen. Other things will happen after, but this effect is what I'm trying to get....
Placing the Raphael canvas in a span is clever, but at the end of the day I suspect you'll regret mixing native HTML with Raphael in this way. Doing so would probably require a lot of absolute positioning and z-indexes that are better handled and supported in Raphael.
I recommend you simple draw the text in Raphael:
var text = r.set();
text.push(
r.text(10,20,"N"),
r.text(70,20,"TRE APPROCHE :")
);
text.attr({
'text-anchor': 'start',
'font-size':'36px'
});
If the SVG/VML styling is inadequate, you could also just use an image. Again, I would recommend placing that image on the canvas using Raphael (paper.image());
Note that, in the updated fiddle, I made the canvas a div the width of the logo.
Updated fiddle.

arbor.js for annotated illustration

I'm hoping to use arbor.js as a way of creating annotated illustrations.
The plan:
Fixed size canvas
Draw image to canvas – as an example i've used the silhouette of head.
Then have a mixture of fixed and floating nodes.
var data = {
nodes:{
brain-position:{},
brain-text:{'color':'green','shape':'dot','label':'brain'},
mouth-position:{},
mouth-text{'color':'green','shape':'dot','label':'mouth'},
},
edges:{
brain-position:{ brain-text },
mouth-position:{mouth-text}
}
};
sys.graft(data);
The problems i'm having is that when I try to create a statically positioned nodeBox eg.
nodeBoxes[node.name] = [50,50, w,w] it breaks the link to other linked nodes.
I'm tinkering with halfvis/src/renderer.js file from the downloaded arbor file.
Many thanks
EDIT
Below is an additional image that hopefully visualises the functionality I'm attempting. Probably should have done this first :)
nodeBoxes, in the halfvis example, is an array used to work out where to start drawing edges so the arrows don't overlap with the boxes - is that what you're using it for?
Are you trying to find a way of forcing the 'brain-position' node inside an area?
Please provide a bit more detail of what you're planning and we can probably do this.

Categories