ads

Tuesday, January 14, 2014

Online 3D dice roller

This is my pretty online 3D dice roller: http://a.teall.info/dice
I wrote it during practicing in WebGL (actually, it uses beautiful three.js and cannon.js).
It also uses random.org to produce true random numbers (from atmospheric noise).


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.


Demonstration video (sorry about low resulution):


I also added textual notation for future use. It is quite simple by now, but who knows, maybe I will implement more complex forms. See http://en.wikipedia.org/wiki/Dice_notation for more info.

So I think this is realy awesome and cute online dice roller :)
Source code are free to copy, as usual: https://sites.google.com/site/tealyatina/share/dice.zip

Multiplayer version now works. http://www.teall.info/2014/07/multiplayer-3d-dice-roller.html

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 =)

Video:


90 comments:

  1. Hi! Are you working on this project? What about to implement random.org webservice?

    ReplyDelete
    Replies
    1. 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 =)

      Delete
    2. 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.

      Delete
    3. 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 =)

      Delete
  2. Where can i download it? Do you have a github or sourceforge page?

    ReplyDelete
    Replies
    1. Here is the link https://sites.google.com/site/tealyatina/share/dice.zip
      Note 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.

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. This is super cool. Any progress on the multiplayer? What library were you going to use for that?

    ReplyDelete
    Replies
    1. 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.

      Delete
  5. Any news about multiplayer version? You will be the first to create an online 3d dice roller!
    Think on it

    ReplyDelete
    Replies
    1. Check it here: a.teall.info/mdice
      This is yet beta version, without log and async throws.

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Cool! You will continue to update this with a log/chat?
      Something like the site rolz do with the room?
      Example:
      Player 1: rolled 1d20-> 18
      Etc. etc. I tried it and works great :)

      Delete
    4. Yep, log will be look like one the rolz.org has. I will update main page (a.teall.info/mdice) as log will be done.

      Delete
    5. Ok thanks man, i really appreciate this!

      Delete
    6. If you still interested, I got free time and did added chat/log =)

      Delete
  6. Is there any way to automatically roll a set of dice, perhaps through a URL parameter? It would be great if I could distribute something like

    http://a.teall.info/dice/?set=2d6&roll

    and automatically get something.

    ReplyDelete
    Replies
    1. 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 =)

      Delete
    2. 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.

      Delete
    3. Hey, that's awesome! Thanks!

      Delete
    4. 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

      Keep up the good work!

      Delete
  7. Can I put a background image?
    Let me know how ^^

    ReplyDelete
    Replies
    1. 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/

      Delete
  8. Quick reply thank you.
    But can not I create a 2d image background is a photograph?

    ReplyDelete
    Replies
    1. Actually texture is a 2d image already =) It doesn't matter that it is, photo, drawing or painting =) If I understand you correctly.

      Delete
    2. How to change background color should be white to red?
      Too difficult ...

      Delete
    3. If you need to modify any part of your source?
      I'm not sure I want to change the background color

      Delete
  9. Are you unable to change the background color?

    ReplyDelete
    Replies
    1. It is quite easy. Open dice.js, find line 348, replace 0xf0f0f0 abmient light value to, let's say, 0x606060. Next, find line 375, replace 0xffffff with your color value. This will change color of desk. If you want to change background color of selector page additionaly, find line 560, replace 0xfbfbfb with your color value.
      Also, check three.js documentation to find out how color works.
      If you'd have some more questions, write me directly to email teal.na@gmail.com.

      Delete
  10. Any reason why it doesnt run on Firefox?

    ReplyDelete
    Replies
    1. Strange news. What version and platform do you use? I have the latest Firefox for Windows version on my PC, and it running good.

      Delete
    2. I am currently using Firefox 33.1.1 on W7, i have tried Chrome, IE11, Opera and Safari and the problem seems to be Firefox alone. I got to see "Loading libraries, please wait a bit", and then nothing.

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Ya wont run on Chrome Version 40.0.2214.91 m and FireFox 33.1

    ReplyDelete
    Replies
    1. 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'.

      Delete
  13. 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.

    ReplyDelete
  14. Cool job this is! Would you please let me know the license of it?

    ReplyDelete
    Replies
    1. Thanks. You can assume that it has the MIT license (or that else) if you wish so. I do not love any licenses at all and prefer to simply say that it is completely free =) Good luck!

      Delete
    2. Thank you so much! I'll notice you if I make something with this. ;)

      Delete
  15. Ha! I had a cute lil error: http://imgur.com/D0hu9w7

    When a die landed (perfectly?) on its edge, it counted as a -1. If, after three seconds of rolling, proper numbers haven't landed, I wonder if it could re-roll automatically?

    Still love the tool. Thank you for creating it.

    ReplyDelete
    Replies
    1. Known issue. A die stops exactly in a way the ray tracer hits its unnumbered edge. You are right, die have to be re-rolled in such case. During next iteration of update I'm going to fix this. Thanks.

      Delete
    2. You're the best! Thanks!

      Delete
  16. Is it possible to preset the dice outcome?

    ReplyDelete
    Replies
    1. 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.

      Delete
    2. 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?

      Delete
    3. 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!

      Delete
    4. If you still interested, I got free time and did added preset result =) See update section of this post.

      Delete
  17. This comment has been removed by the author.

    ReplyDelete
  18. 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

    ReplyDelete
  19. 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?

    Thanks again for your great effort.

    ReplyDelete
    Replies
    1. 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.

      Delete
  20. This is really awesome, thank you for making it!

    Could I use footage of this dice roller for my YouTube gaming account? I would use it as an intro to my videos, and I would be very happy to source you in each of the videos I would use it in.

    ReplyDelete
    Replies
    1. Thanks, Rebecca. Of course, you are welcome to use it. Good luck!

      Delete
  21. Hi.

    I dont know what's exactly what is the meaning of dice.py in source code?

    Please guide. Thanks

    ReplyDelete
    Replies
    1. 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.

      Delete
  22. 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 ^^

    http://www.twitch.tv/player2player/v/30819478

    https://zippy.gfycat.com/QuickFaroffIcelandgull.webm

    ReplyDelete
    Replies
    1. Hi! Can you do more detailed explain what do you mean by writing me at teal.na@gmail.com. I saw video but really confused how did you had produced this =) best regards! =)

      Delete
  23. 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.

    Нет, ну серьезно, может я преувеличиваю, но по моему вы создали потрясный кусок кода, мсье. Кудосы, поклоны и все прочее, спасибо!

    ReplyDelete
  24. Последний коммент мой, профиль как-то сходу не хуканулся.

    ReplyDelete
  25. Вернулся выразить еще одно почтение за человечески написанный код, аж читать приятно.

    ReplyDelete
    Replies
    1. На здоровье =) Если будут вопросы, можете спросить на teal.na@gmail.com Удачи ;)

      Delete
  26. we are triying to use it for a game but we cant join people or at least we dont know how, also sometimes dont create the room

    ReplyDelete
    Replies
    1. 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.

      Delete
  27. This comment has been removed by the author.

    ReplyDelete
  28. 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!

    ReplyDelete
    Replies
    1. 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.

      Delete
    2. Thanks for the quick response! Trying to figure out which function handles the starting coordinates ;) -- For your second option, is that defined in the throw_dices function of the dice.js file?

      Delete
  29. This looks awesome. I want to roll dice (with letters on them instead of numbers) for a logic game, and this will do a great job.

    ReplyDelete
  30. 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.jpg
    I'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...

    ReplyDelete
    Replies
    1. 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.

      Delete
  31. Excellent work and thank you for the source.
    http://a.teall.info/dice/?notation=1d4@1 - sometimes draws a wrong texture on the dice

    ReplyDelete
  32. Question: For multiplayer, is it possible to have a URL that directly joins a room? For example: http://a.teall.info/mdice/ROOMNAME/PLAYERNAME

    ReplyDelete
    Replies
    1. That's an idea, thanks. This week I'm going to add some improvements to current versions as you wrote this right in time =)

      Delete
  33. This is a fantastic piece of work!

    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

    ReplyDelete
    Replies
    1. Hi. Thanks. Images are easy to display. I have no example right now, but it was somewhere on my home comp. Write me at teal.na@gmail.com. We can make a deal if you wish =)

      Delete
  34. Is it possible to change the size of the dice ?

    ReplyDelete
    Replies
    1. It's a really good job! How to do this? Because on a phone the dice is too small.

      Delete
    2. 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.

      Delete
    3. it was that.scale ? Yes it would be nice if it's possible to ajust this params with the device. (sorry for my english)

      Delete
  35. This comment has been removed by the author.

    ReplyDelete
  36. where is the link to download the files

    ReplyDelete
  37. I am just curious why this amazing dice script doesn't work on my mobile platform. Is the code mobile friendly or should I look for the problem in my mobile device?

    ReplyDelete
    Replies
    1. 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" =)

      Delete
  38. hello sir, how can i set this to only 1d6 no selector, direct to the 1d6 die roll and if i continue the die will roll again

    ReplyDelete
    Replies
    1. 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.

      Delete
    2. http://a.teall.info/dice/?notation=1d6&roll will roll without selector. Have a good day =)

      Delete
  39. 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.

    ReplyDelete
  40. Beautiful dice roller!

    What would I need to do in order to run a rand() function instead of using the random.org API so that it can be run offline?

    Also, what direction would you point me in if I wanted my app to display this your dice roller and return the dice roll result?

    Thank you!

    ReplyDelete