ads

Tuesday, January 14, 2014

Online 3D dice roller

CRITICAL UPDATE!
THE MULTIPLAYER VERSION DOES F*CKING WORK NOW!
It's now a bit slowly and laggy due of short-pulling instead of web-sockets. Amazingly Google desided to turn channel support off, so that was a problem with multiplayer. But now it works. Don't forget to donate, because you guys blow out my traffic tariffs =))

BUG-FIXES. Ok, I've took care of the old bug with preset outcome on d4 that caused to flip its face numbers. Also d10 now reads the "0" face as 10 instead of 0.

The main goal is to make a soulful place to roll dices. I did not want a simple calculator as if you clicking a button and they showing you just bald digits in a result. There are a lot of such online textual rollers on the Internet. They are completely ugly ones. No offence, just facts. Rolling dices is one of most significant and emotional part of roleplay board games, such as Dangeons and Dragons. While playing D&D you have to roll dices often, but you will never say: "Oh, this is so tedious". Otherwise, you adore this. You may even have your own set of dices, nicely colored and with sweet texture. You do not want random generator, you want an act of creation, process that extended in time, intrigue with dices stopping rolling one-by-one.

And that is more valuable after all is that you want to be a participant of random. It is great to know that good values are your merit, while bad ones are just a bad luck. This is the reason why my roller have no "Roll" button. To roll you should do a gesture by yourself. This will bring some of your personality into an random act; breathe life into mechanical action. And you will take pleasure in it.

Also note that the roller uses true random numbers from random.org as additional advantage of realy random creation. This is not an ugly computer digital counting.

UPDATE for 4 Aug 2014.
There were a lot of requests, and I added "throw" button. OK, you won. Stupid button is now on =)
In additional, I added a quick URL params as it was suggested. Now it is able to set notation via URL like this: "a.teall.info/dice/?notation=3d8". If param "roll" is present, roller will run a throw instead of showng selector page. For example: "a.teall.info/dice/?notation=3d8&roll". For those who wants to get throw result: it is located in DOM element with id "label". I will try to add more complicated forms of dice notation.

UPDATE for 21 Jan 2016.
I added support for preset result. In notation you may enter comma- or space-separated result after "@" symbol in the order of given notation. For example: "4d4 @ 1 1 1 1" will outcome all d4 dice values to be "1".

If you want to use the roller as front-end for your back-end with such preset result mechanics, let me know =)

150 comments:

Hi. Random.org is a great service. Thank you for suggestion, maybe I will use their functionality. But there are so much dice rollers of any kind of choice, that I just prefer to use my roller as example application of javascript and webgl, simple enough one to understand. Anyway, if someone interested in usage of my dice roller in their project, he is welcome =)

i really want to use it in my Mephit.it project that allows to play D&D 3.5 in your browser. I'd like to pregenerate the results and then animate the launch, can you help me to do this? Can we discuss via mail? Actually you can view my project in Italian only, but in my development server is almost completely translated in English too.

You can mail me teal.na AT gmail DOT com if you have questions. Unfortunately, the renderer is not able to roll dice with pre-created result. Random result is produced and read after all dice are stopped. But you still can get the result in your application. After all, I use random.org, so you can feel yourself safe =)

Here is the link https://sites.google.com/site/tealyatina/share/dice.zipNote that it may run as stand-alone page. Also I added GAE python script from my server side that uses as a proxy to random.org API.

Thanks!Unfortunately, I have no time for multiplayer yet now, but idea is still on. First attempt was to use the Google AppEngine, it is the simplest solution for me because I use their back-end. I.e., GAE on server-side to communicate and authorize clients with AJAX. Multiplayer is not so hard to be wrote, but, you know, it have to be tested hard.I hope, later I will find a time and a motivation to finish it.

Nope for now, but I preparing new version that will include "throw" button and such URL API as well. This is a common request, you know. Anyway, thanks for the comment =) The version will soon be updated - as I think, within a month because I going in a vacation, and there will be no programing experience, I hope =)

Check UPDATE section of this post, I added this URL params functionality during lunch break =) You can run it in embedded frame and check if element "label" is visible - this indicates that roll is over. Then get results and parse it.

Just chiming in to say I love this feature. Once it can roll two types of dice at the same time, it'll be perfect. Ooh, especially if you could add bonuses separately, like http://a.teall.info/dice/?set=1d20+5&set2=2d6+3&roll

You can. The best way to do this, is to set up texture for desk pane in dice_box function. Check the "three js" manual and examples to figure out how textures are being created and applied. This is good one: http://www.html5canvastutorials.com/three/html5-canvas-webgl-texture-with-three-js/

Thanks for info. I know about such problems. I have Chrome 40.0.2214.91 m and it works fine for me. So this is obviously not up to browser, but something else. If you have a time, could you send me error message the browser has genetated? To get it on Chrome, press Ctrl-Shift-I and check 'Console' tab after the dice roller loaded.

p.s. Note how the world has changed... Several years ago IE was a sort of crap and your work was to make your code working on 'good browsers' and damned IE =) Now everything always runs fine on IE, but not on 'good browsers'.

This is an awesome dice roller, but I have a tough question. After rolling the dice, could it be possible to re-roll just one or more of the dice by clicking on them (instead of a total reset)? The re-roll would then add to the total, like exploding dice from many popular games like Savage Worlds or Shadowrun. I also noticed on Roll20.net there is also a label that moves with their 3D dice. Is that possible here? It would be cool if when a die came up with its max number (like a 6 on a 1d6) a label would come out next to the die and say "Roll This Again!". Anyways, great job and thanks for your consideration.

Not in this version. And I think this is a case when the game isn't worth the candle. But well, it's possible by prerender rolling process without showing it to user, - and this will take some time. Then you should catch the numbers in pre-result, rotate dice to correspond position to meet your desired outcome, and then roll them again to show the process to user. This is the only way that guarantees correct rolling.

Hi Anton, thanks for the great dice roller! I have the same question as Michael. I need to generate "winning" numbers before I can show the dice roller, because the next stage of the game depends on the results of all players.

I generate the winning numbers for each player, write them into a database (SQL), and then I was hoping to throw the 3D dice roller preset with the numbers coming from the database. I've spent quite some with your program today, but unsuccessfully. Could you please help?

Ok. I have received a thousand requests for the roller next updates. It seems I have to find time and finish it at last. I will focus on log/chat in multiplayer version, and pre-generated rolls for single-player one.Do not wait for it soon, though. It will take a week as I suppose, but I have to find this week first ;)If you have concrete questions, feel free to write me e-mail.BR!

That your application is WONDERFUL for any online rpg narrator !! Wanted sugerir you that you added the fudge dice or fate dice, example: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTUnmsimOA_DUPuXLb8slak73JnnVtFePWMs-S-mXBDLXoYEEh0

Thank you for the great dice roller. I'm working on a Ludo game and for someone with minimal 3D knowledge, this is a lifesaver. When/if complete, I'll surely reference this on the site.

I am thinking of making some change to the roller so that I can generate the throw vectors on the server. My question is, will the same dice result be produced for same throw vectors on different clients running on different machines, different browser?

Yes, the thing you are asking for is already works, you can download multiplayer version to learn how this can be done. One guy told me that he had a problem on his machine during multiplayer session, but I think this was the only case.

The idea is in use of fixed-time render and fixed-size of board to get same roll result on all clients and all browsers. The algo of multiplayer mechanics is:1) When player is start rolling, client sends to server set of dice positions and velocities (the set of vectors). Animation is not performed.2) Server receives this set of vectors and sends it back to all clients in the room (including one who started roll) via long-polling.3) Clients receive the set of vectors and do animation.4) All players in the room see equal rolling and its result.

dice.py is a part of a server-side code of my GAE server. I put it as an example of how to work with random.org API. It is not necessary in general cases, but if you want to use the random.org services.

Very Cool stuff! But hey, can you Keep the Grey color when we throw the dice? Because i have a friend that do RPG D&D Streams on Twitch, and to throw the dice in Live with the Chroma key it mess up when the White color appears, also an option to remove all the text. Would be great ^^

Wow, jut wow! I had an idea how proper 3d dice roll with preset result should be done (animation precalculation and stuff) but i'm really surprised that i was able to google out an open source thingy doing just this! I mean this dicer is just simply amazing! Now i'm really curious to look at the code itself, and planning to use it as an awesome frontend display of backend calculated results.

Hi =)Yes, I know about this problem. I will try to focus on it on my next attempt when I have free time.This is all up to google app engine, not me =) Seriously, maybe we have to wait while google make correct sockets... Or, anyway, I will try to rewrite socket long-pull mechanics, let's see.

Howdy -- great stuff! I can't seem to figure out which parameters to change if I wanted a two dice to "settle" in a defined spot on the screen... For example, instead of the dice flying around the screen at random angles and settling in random locations, is there a way I could define a small square area where they will end up settling? I have a game where I'd like the dice roll to be contained to a defined area so they don't interfere with the user controls, scoreboard, etc. :) Thanks!

Hello. There are two different ways to get what you want. First one is to move rigid-body borders of box, so dice will live only within small predefined area of screen. A throw should be very accurate, with small horizontal velocity. Second way is to emulate throw before rendering, relatively shift starting coordinates and box borders, and only then render dice roll itself, and dice will stop exactly in your predefined area.

This dice is awesome. It's the best web-based dice I ever seen. Is it possible to make three different 12d dice? Like this picture of Astrology dice: http://blog.sina.com.tw/myimages/52/308/images/14262716075415.jpgI'm a Tarot diviner, I think it's cool to roll the Astrology dice online. Would you give me some suggestion to modify which function? I'm trying to read the source code but it really complecated...

Hi! This is possible, of course. You just have to replace dice face numbers (1, 2, 3 etc.) with astro-character set, see this.standart_d20_dice_face_labels in dice.js. I can make ready-to-use version for you, but it will cost you ;) -- but not so much, write me email (teal.na@gmail.com) if you are interested.

I'm trying to get use this as a base for a custom dice roller where instead of numbers we have specific images displayed on the faces, but unfortunately I'm a bit of a novice with using the canvas. I've managed to get custom text to appear on the faces but am having some issues getting images to display

It's not possible via game itself, only if you're modifying source codes. There is variable named scale. I will see if I can adjust scale to be chosen automatically for phones or whatever with small screen.

It should work. At least, it works on my phones ;) To be serious, try to check your phone's webgl support here: http://webglreport.com/, or check how it runs some of public webgl tests. The answer is somewhere there.p.s. thanks for "amazing" =)

you can use link like this: a.teall.info/dice/?notation=1d6 (but selector will be still visible). Or if you are making some project, I can prepare special version for you. Write me teal.na@gmail.com if you have questions.

Hi great program for online D&D, I dislike the click and get random number and really like to see the dice roll.. just feels better. But some days I think the server is overloaded and we can't get into a multiplayer room together. Anyway we can host it ourselves or do you have a standalone program with multiplayer.

I love the visual feedback of rolling dice, but I do have one complaint.

The way d10's are being added is sort of wrong. It's counting results of "0" as the number 0, taking the die number literally. But a d10 typically, if not always, is supposed to generate a number between 1 and 10, with 0 representing "10." This is fairly important for the d20 systems, White Wolf systems, and other popular gaming systems. Any way it could be implemented without players having to remember to add 1 to each d10 roll, or manually convert results of 0 to 10?

Hey Anton, thanks for these awesome dice and the mechanic behind them! As you said earlier, that your code is released under public domain, I forked it and released a more modular script, with which other people can easily add dice to their own threejs projects with the possibility to set the value after fall.

Hey there Anton, I'm currently doing an internship and I've been told that I need to come up with a dice roll animation and yours fits the bill perfectly. Firstly, do I have permission to use your code? and secondly can you tell me what the teal.js file is for? I've removed all dependency to that file as I don't understand it but I still don't know what to do with all instances of $t.dice...Can you please tell me what that is?

Hi. You can use it freely. Donation is appreciated. Link on original page is recommended =)teal.js is a set of my own wrapper-functions over plain js. You can cut almost half of it without any sorrow.Mail directly to teal.na@gmail.com if you meet troubles. GL

Anton, I don't know how easy this is, or if it's even possible (not familiar with all the libraries you use), but the physics just seem to be a tad sticky. More often than not, the dice seems to hit the surface and stick, causing it to heavily slow down and even stop spinning. Almost as if the dice and table are covered in a thin layer of... well, something sticky. I imagine changing something like this is out of the scope of your work, but just in case it's not, I really think if the physics of the table or the dice were tweaked to be less sticky, it would be a lot better, even if it's already fine. Then again, I don't know how much random.org has to do with the final roll. If you're getting the final roll, and the physics engine is just getting it to the number, then I guess we're out of luck.Thanks for reading!

I found a bug. If result.length == 1 and notation.constant == true, the constant is not actually added to the single die to produce a sum. For the input 'd6+1' where a '6' is rolled, this results in the unexpected output '6 +1' (expected output: '6 +1 = 7')

This can be fixed by adding "|| notation.constant)" to the if statement on line 61 of main.js. Confirmed working locally without console errors. Thanks!

I made another couple fixes, which addressed a few behaviors. On Chrome and Opera, preventDefault is ignored for the touchstart event listener. On my devices this caused a doubletap. There's a 'passive' option supported by those browsers to prevent this.

Once I implemented this, single taps stopped registering while swipes were fine. Turns out there's a function in main.js that's missing the touchend event listener. Adding the missing string gave me responsive single taps.

For my personal use, I've added code to POST roll results to my Discord channel using a webhook. I'm starting a tabletop RPG campaign and we all live pretty far from each other, which makes online play necessary. This is a much more fun and tactile way for us to resolve dicerolls, and no serverside code for me to write!

Would love to be able to roll the dice on a see-through background, but cannot figure how to make this scene have a transparent background. I have made the canvas transparent, added alpha: true to WebGLRenderer, setClearColor to alpha: 0, and set the object to near-transparent. Still the background stays opaque white. What am I missing?

I am trying to add a small animation to the dice after the roll is complete. In the after_roll function I am currently experimenting with changing the rotation variables of the dices so the numbers are completely straight. However I seem to be only able to rotate the dices around their own axis, not around the world axis. How can I do this? I'm a complete noob at three.js

Some problem with the probabilities here. In short, the dice rolls seem to provide too good results. As a proof case, try rolling 2d10 and see how long it takes you to get a result that sums to less than 10.

Is the roller on the web page using random.org results or the javascript random function? Can anyone explain how the starting random numbers are converted to the end result? The way different vectors are multiplied is a bit opaque.

The dice is first rolled with the physics enginge behind the scenes, until it has finished. Now the system nows, what side is upside and swaps the textures of all sides so that the random generated number is up. Then the same dice roll is executed again and this time shown to the fronend.

For the randomness: He stated right at the beginning: "It also uses random.org to produce true random numbers (from atmospheric noise)."

Hello Anton! I'm a great fan of your dice roller. I was a little sad thinking my team wouldn could play with this tool online, but you're back! :DI just want to suggest, or ask, to fix the multiplayer bug.. if it had a self database, wouldn't it work?I have an account for a website, a server with SQL, maybe if i could install the dice room in my server, making a db, wouldn't be better?Thanks a lot for your return! <3

There is a bug, if we choose result of throw for D4, there is sometime an graphical error on dice... It deos't show the good faces... Just add "[2, 2, 2, 2]" in callback in beforeThrow (like said in comment), change 4D6 by 4D4 and start... you will see the bug.

Hi Anton, great work on this simulator. I would like to add sound (shake and rolling of dice) to the script. Any suggestions on how I may accomplish this ? Will it be necessary for me to create a member function for dice in order to make this happen ?

Hi, best online dice type thing, well done. Would it be possible to have custom dice so that you can put an instruction or question on each side of the dice, such as 'Who was the main character?" or, "Draw the character's weapon." I would love to use it for activities in the classroom.

This particular is usually apparently essential and moreover outstanding truth along with for sure fair-minded and moreover admittedly useful My business is looking to find in advance designed for this specific useful stuffs… psychic reading

Thank you so much for sharing your talent and ideas with us!! I don't have any little ones at home anymore, but we have some friends coming over for the holidays. These will be perfect!! Thanks again! click this check out this site For dadu online

About me

I'm lead programmer and software designer, that's why I have interest in all humanitarian things =) just to avoid head explosion. From time to time I draw pictures (in vector or 3d editors), make photos and write sheet music. So it is a good place to share most of them with my friends and it helps me not to copy same things ten thousand times to different contacts. Almost all posts are in the Russian language, especially if they are practically worthless, lol. My main blog is at http://www.teall.info, and good old blog is still at http://www.liveinternet.ru/users/teal/blog/.
Home page of my web-projects (some of them are public): http://a.teall.info/.
In addition I am one of creators of goodgame.ru and hexacode.ru.