/    Sign up×
Community /Pin to ProfileBookmark

Random generator – Dice Roll with HTML5 canvas

Copy linkTweet thisAlerts:
Nov 07.2013

Hello

What better than a dice to generate random numbers ?

However, it is not very easy to roll a dice even with HTML5 canvas !
Here is an [URL=”http://mamisab.chez-alice.fr/cube/dice.htm”]essay which roll[/URL] with drag and drop or touch and move…

But before trying to roll it like a real Dice, I’d like to solve the problem of its shape which appears with a coloured background ([URL=”http://mamisab.chez-alice.fr/cube/dice_clr.htm”]see this page[/URL]).

Thank you for any comments or proposals.

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@007JulienauthorNov 10.2013 — Without perspective effect, It's possible to draw something that roll and look like a dice !

Next step, with perspective no more ellipses but many points...

[canned-message]attachments-removed-during-migration[/canned-message]
Copy linkTweet thisAlerts:
@bionoidNov 10.2013 — If you wrote that code, then I am very impressed.

Unfortunately I am no good at 3D mathematics, or more advanced graphics in that case, to be of any help.

I will eagerly watch your progress though.

Good luck.
Copy linkTweet thisAlerts:
@007JulienauthorNov 10.2013 — Thanks ! I wrote effectively that code...

Its' not very complicated to rotate a cube in space (see the source of 2x2x2 cube).

This Fascinating page give me the idea of this mini Rubik's cube. I intended to propose to solve each position (It's possible with 2x2x2 - See this page ) but it's to heavy with the canvas rolling cube.

My project is now simply to roll a dice... I discover now that Dices are not only cubes, but at first spheres...

EDIT : Opera and safari do not appreciate my last script.
Copy linkTweet thisAlerts:
@kamrul000Aug 08.2015 — What about this new version ?[/QUOTE]

That looks really great. I am creating a Ludo game where I need a dice. Haven't done much 2D/3D coding myself. I will take your's as an example.

Cheers
Copy linkTweet thisAlerts:
@amanwasApr 18.2016 — Can anyone please tell me how to know which numbers are facing up?
Copy linkTweet thisAlerts:
@amanwasApr 18.2016 — How can I know which numbers are facing up after rolling is ended?
Copy linkTweet thisAlerts:
@daveyerwinApr 19.2016 — How can I know which numbers are facing up after rolling is ended?[/QUOTE]
1. determine the results of the roll

2. display the animated roll

3. display the die with

the pre determined

results.
Copy linkTweet thisAlerts:
@LagwertMay 23.2017 — That looks great but is too difficult to upgrade by me. Who know and upgrade this code that first program set random number from 1 to 6 show this number in F12 console and next the dice animate roll and stop on this number.
×

Success!

Help @007Julien spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...