Search the Community

Showing results for tags 'math'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 28 results

  1. Hi Again, Let me explain what I'm trying to do first: I want a panel of 3D objects which line up along the left-hand side of the canvas/viewport. I'm trying to create an object factory of sorts. The user will click and drag objects from the object factory into the scene proper, the code will clone the selected object when this occurs. I'm using two scenes for this, one is the main scene, with a ground and control-enabled camera receiving the clones and accumulating state; and another scene, for the factory, that is essentially static but has a camera and lights and meshes (the factory prototypes). As I've said, I want this factory to be arrayed down the left-hand side of the screen. If I choose just any position for the factory objects, they will go into and out of scope when the canvas aspect ratio changes. So I want to be able to calculate a ray which vertically cuts the camera's left-hand viewing-frustum plane, say somewhere in the middle, parallel to the near and far edges. I think this should be a vertical slice, abutting the left edge of the viewport. Here's how I tried to do it: First, I tried using getFrustumPlanes. But the planes it gave me were oddly skewed. When I generated geometric planes for each of the six, for instance, they did not form a convex solid. And even when I mentally tried to figure out which plane was which part of the frustum, I just couldn't make sense of the numbers. I would have expected 2 along each camera-centric axis (e.g. + & - along X, + & - along Y, + and - along Z--I setup a straight-on camera to help in understanding the numbers to no avail). Next, I tried a few of the unproject methods. I think these methods should have converted a 2D point on the screen to a 3D point (or ray) in the world. I read through many posts on this site to use what I thought were the best values for the camera's projection matrix, world matrix (identity), etc.... Never got anything even close to good numbers. Mostly they were NaN until I saw one post which accessed maxima from the engine. But when I positioned my mesh (using a sphere) at the returned 3D vector, it always seemed to go to the same, incorrect place (irrespective of my choice for 2D starting point). Next, I successfully wrote an iterative algorithm which used many of the same transformation matrices along with project. This way, I would choose a 3D point, test where it was in 2D, and knowing the fixed orientation of the camera, choose another 3D point which projected closer to the 2D point for which I was aiming, etc.... Sort of like a newton's method for iteratively approaching the correct value that unproject should give me in fixed time. OK, I can do it, but I want to do it correctly. So my last attempt, for which I have a playground, uses: createPickingRayInCameraSpace. I think this should give me a ray which looks like a point, but really rides the intersection of the left and top viewing-frustum planes (because I choose 0,0). However it does not. Playground demo: Please help. I don't care if I use any of these methods. Is there a better way? Should I be using the aspect ratio directly? Should I just do my own matrix math? Thanks, Ken
  2. This is my current setup: .Player presses the Mouse button .A Ray is fired using Babylon and the players camera The intersection point (vector3) is sent to the server The server uses Cannon to do it's own intersection testing (Using the player's head hitbox(Same location as the camera client-side) as the origin point, and the vector3 from the client as the target point. Now, if I wanted the server to be a bit more authoritative when it comes to hit detection, I shouldn't send the point from Babylon, but rather a 'fire' command, and, somehow, calculate a point that Cannon can use for it's own testing. The server is aware of the position of the origin vector, and has the rotation of the player's physics body. Now, my math is worse than bad, so: Would it be possible to calculate a point, a fixed distance away, using only the origin vector and the direction in which the point should be placed? I've seen various posts and discussions about it, but I really don't quite get it. Oh. And I know aimbotting isn't impossible to prevent, but I feel like the above method, that I already use, makes a bit too easy to achieve.
  3. I need some help with color math. I am trying to create height maps in code... i can read raw terrain data and get the float raw height value for each pixel (x,y) as a value from 0 to 1 0 being black and 1 being white. I need to convert that 0 to 1 float to a black and white pixel based on the level of 0 to 1. Here is an example code block.. I need to basically create a Color.FromFloat type function as listed below: Texture2D duplicateHeightMap = new Texture2D(terrain.terrainData.heightmapWidth, terrain.terrainData.heightmapHeight, TextureFormat.ARGB32, false); float[,] rawHeights = terrain.terrainData.GetHeights(0, 0, terrain.terrainData.heightmapWidth, terrain.terrainData.heightmapHeight); /// run through the array row by row for (int y=0; y < duplicateHeightMap.height; y++) { for (int x=0; x < duplicateHeightMap.width; x++) { // height map color (0 to 1) float rawHeight = rawHeights[x, y]; // NOTE: HERE IS WHERE I NEED HELP (MAYBE GRAYSCALE ???) Color color = Color.FromFloat(rawHeight); duplicateHeightMap.SetPixel(x, y, color); } } // Apply all SetPixel calls duplicateHeightMap.Apply();
  4. We just released our latest game: Number Tumbler! (We're really betting on people liking to tumble things, I guess) It's a mathematical game about adding numbers! A number crunch in a time crunch is what we're calling it. Our unnofficial slogan for the game is "It's more fun than it sounds! Really, we swear!" ... at least one of us on the team really needs to get better at copy writing. If you're interested in trying it out, you can play it on our website (on your computer, phone, or smart refrigerator) Or download it in app form on your favorite mobile device (provided that your favorite mobile device isn't a Windows Phone) On a side note, I was just reading the Phaser newsletter yesterday and saw that Emanuele Feronato is releasing their DrawSum game on the app store. Man, we hadn't seen DrawSum before yesterday, but I guess it's just poor timing on our part we happened to just finish such a similar game at the same time. If you take the time to play it, we'd love to get your feedback! Any comments, criticisms, and (most importantly!) praise will be graciously received. Thanks!
  5. Hi all, I know it isn't really babylon related, but there are a lot of smart guys around so i believe it to be worth a try and ask I have been working on & testing some area calculations, mainly for finding meshes within a certain select area, think "area of effect" game abilities. Examples; For a square area, I simply use two vector3's, one containing minX, minZ and the other one containing maxX and maxZ, thus creating a virtual square which you can use to check if any meshes are found within it. Resulting in a very lightweight & simple solution. For a circular area, I use a starting middel point of the circle (x & z position), and a pre-set radius/distance value and then i calculate & check distance to meshes and select all meshes which are valid and in-range, But now to the issue at hand, Finding a cone area; Basicly, a small select part of a circle area, calculated depending on a player's rotation.y, a pre-set radius/distance value and a pre-set "width" value. Visualization; So in the above visualization, if a mesh was found within the cone area shown in the "width" illustration, it should be a hit, but if it was outside the defined area, it should be ignored, even if the mesh is within the circles radius.. How would you go about doing this? I have setup a PG containing the basic circular calculations, (open browser console for code feeback). I appreciate any help & ideas.. Cheers.
  6. So, circles are confounding me today... About twenty years ago I did GCSE maths and remember wondering when or why I would ever need to know any of this stuff about circles and angles and the like. Now. Now is when I need to know all that stuff. So I've been all over the interwebz and have learned lots about circles, but while there are myriad explainations of how to work out the length of an arc, the angle and area of a sector... and use both radians and degrees to calculate same; I can find nothing that will tell me which sector a given value (theta, radian, degree, whatever) is in. If I've divided my circle into 12 segments, can I pass a value and know that it belongs in sector 3, for instance?
  7. I found myself making a class called MatrixComp, which is the rotation, translation, & scaling components of a BABYLON.Matrix broken out. When trying to scale the matrices of a pose from a library, more than just scaling the translation is required to account for skeletons which might have different postures / builds (rotation at rest). Otherwise, the skeleton assumes the posture of the skeleton used to make the library, which can look weird. I added methods to compute the ratios of each component's rest value (called basis) to the rest value that of the library. Often, the translation of a dimension is zero, so using the divide function results in a NaN. I wrote my own, shown below. Is there any interest in changing the division behavior to this? a NaN is really not useful. this.translationBasisRatio = BABYLON.Vector3.Zero(); if (libraryBasis.translation.x !== 0) this.translationBasisRatio.x = this.translation.x / libraryBasis.translation.x; if (libraryBasis.translation.y !== 0) this.translationBasisRatio.y = this.translation.y / libraryBasis.translation.y; if (libraryBasis.translation.z !== 0) this.translationBasisRatio.z = this.translation.z / libraryBasis.translation.z; Also, there is no divide for a Quaternion, but this equivalent. Maybe, a wrapper? this.rotationBasisRatio = this.rotation.multiply(BABYLON.Quaternion.Inverse(libraryBasis.rotation)); I also ended up with my own versions of Vector3.LerpToRef & SlerpToRef. I am fine keeping all of this in my code, but some could be moved if wanted.
  8. This is a math question, or maybe a question for someone who understands how billboard modes work under the hood. Given a long thin mesh with a texture of a chain, how can I position it so it looks like a chain stretches between two arbitrary positions? Here is a playground that shows sort of what I'm shooting for (until you rotate the camera, anyway). Just imagine the mesh in the middle has a texture on it like a chain or a rope. The main point is to have the "chain" mesh appear to stretch from one position to the other, while keeping its planar surface facing the camera (so that it doesn't get thin and disappear depending on the viewing angle). My instinct was this might be possible with some combination of rotation and billboard modes. If not, I guess it will be necessary to take the camera's position into account? Or if there's a simpler way to achieve what I want, that'd be great. Thanks!
  9. var game = new Phaser.Game(1024, 600,, 'phaser-example', { preload: preload, create: create, update: update, render: render }); var result = 'Press a key'; function preload() { //load assets game.load.image("single_turret","./img/single_turret_64x64.png"); game.load.image("mouse","./img/mouse.png"); } function create() { //start physics game.physics.startSystem(Phaser.Physics.P2JS); single_turret = game.add.sprite(400,300,'single_turret'); mousep = game.add.sprite(50,50,'mouse'); //enable psysics on all items and enable debugged game.physics.p2.enable([single_turret,mousep], true); mousep.body.setCircle(4); mousep.body.kinematic = true; single_turret.body.setCircle(4); single_turret.body.kinematic = true; } function update() { } function render(){ game.debug.text(result, 32, 32); mousep.body.x = game.input.x; mousep.body.y = game.input.y; lookAtObject(single_turret, mousep, 0.005); } function lookAtObject(obj, target, rotspeed){ var angle = Math.atan2(target.body.y - obj.body.y, target.body.x - obj.body.x); result = obj.body.rotation + '**'+ (angle + game.math.degToRad(90))+ '**'+obj.body.angle; obj.body.rotation = angle + game.math.degToRad(90); } The code above rotates the "turret" to always be pointed towards the mouse so that it can fire at the mouse position. The code works, but I want to add a rotation speed to it, however I can't figure out how to code that in. The lookAtObject() function is where I have the problem. function lookAtObject(obj, target, rotspeed){ var angle = Math.atan2(target.body.y - obj.body.y, target.body.x - obj.body.x); result = obj.body.rotation + '**'+ (angle + game.math.degToRad(90))+ '**'+obj.body.angle; if (obj.body.rotation <= angle + game.math.degToRad(90)){ obj.body.rotation += rotspeed; }else{ obj.body.rotation -= rotspeed; } } This statement does not work as intended because of how p2js works, so when It gets at ( -x , 0) the radians go from -1.5 to 4.7 and the rotation will reverse. I am really stumped atm, so any ideas on how to approach this?
  10. Forgive me, because this isn't a game. I'm a high school computer science teacher and I was looking for an online 4-function binary calculator to explore bit math with my students. I was disappointed with what I found online, so I made one here, using Phaser: The calculator does everything in actual bitmath, meaning the addition and subtraction functions process the two numbers bit-by-bit with regrouping, and the multiplication and division functions are iterations of the first two. Might be of interest to somebody. Source:
  11. I trying to create a "perfect" hexagon... that is in a fact a perfect hexagon for games, and I'm failing at it. This is what I got so far var game = new Phaser.Game(1024, 600, Phaser.AUTO, 'Phaser', {create: create, render: render}); var arr = []; var graphics; var cx = 300; var cy = 200; var size = 64; var result; function create() { graphics =, 0); for(var c = 0; c < 6; c++){ arr[c] = hex_corner(cx, cy, size, c); } //draw vertices for(var c = 0; c < 6; c++){ graphics.lineStyle(1, 0xffd900, 1); if (c != 5){ graphics.moveTo(arr[c].x, arr[c].y); graphics.lineTo(arr[c+1].x, arr[c+1].y); }else{ graphics.moveTo(arr[c].x, arr[c].y); graphics.lineTo(arr[0].x, arr[0].y); } } //draw points for(var c = 0; c < 6; c++){ graphics.beginFill(0xFF0000, 1); graphics.drawCircle(arr[c].x, arr[c].y, 10); } result = 'height:' + (arr[1].y - arr[4].y) + ', width:' + (arr[0].x - arr[2].x) ; } function render(){ game.debug.text(result, 32, 32); } function hex_corner(center_x, center_y, size, i){ var coord = {}; var angle_deg = 60 * i + 30 ; var angle_rad = Math.PI/ 180 * angle_deg; coord.x = center_x + size * Math.cos(angle_rad); coord.y = center_y + size * Math.sin(angle_rad); return coord; } The "edges" are not the same size, the width is not same and if I rotate it in the middle of a hex grid for instance it will be out of bounds. So how do I make a perfect hexagon for any fixed size with equally sized edges, equal height and width? This is what I would like to achieve. A hexagon with the corners outside of the circle.
  12. Hello guys! Probably more a math problem than a phaser one, but still I'm breaking my head finding a solution. Maybe you can help me! Imagine I have a sprite pointing towards the direction of the red arrow. I want to make the sprite rotate slowly towards the pointer (in this image the green arrow), and to have it rotate clockwise/counter-clockwise depending on which way is faster (in this case counter-clockwise). How can I calculate if the faster way is clock/counter-clockwise, providing the sprite can be pointing wherever and the pointer could be anywhere? If I was not clear I can try to clarify better Thanks in advance!
  13. Hi Everyone, This is my fist post on the Babylon.js subforum, and I must say that I am really loving the framework! Recently, I have been following this article by Andy Gainey: His original code is in Three.js, however I do not need all of his code, I just adopted the portion of the code that generates a subdivided Icosahedron. I am running into some difficulties generating and rendering the compound polyhedron of this icosahedron (such that each new vertices of the mesh are the centroid of each face of the Icosahedron). I have it so that I render the compound polyhedron, however it has the following issues: The triangles that compromise each face are blatantly obvious I need to render the face both ways (duplicate the indices in reverse), because some faces don't render if I don't do that I becomes slow compared to the icosahedron generation. There are excessively more vertices generated than required (however I want to be able to color each face individually) Here is the github repo with the code: Lines of interest are: 335-353 : They order the face centroids of the Icosahedron to generate the hexagons/pentagons 355: Inserting the face indices for rendering into the indices buffer I look forward to your opinions/suggestions, thanks everyone!
  14. The link Description Matchsticks: Endless Digit Hunter is an HTML5 one-button matchstick (aka toothpick) puzzle/logic game in which your goal is to rearrange all given math equations and make them true by moving just one match. The game can be played on 4 different levels of difficulty: Normal - the equations contain numbers from 0 to 9. Medium - the equations contain numbers from 0 to 19. Hard - the equations contain numbers from 0 to 49. Insane - the equations contain numbers from 0 to 99. On each level there are 5 faulty math equations which must be corrected as fast as possible! All equations are procedurally generated so the levels are always different. To make the given equation true, tap on a match and move it to the right place. For each bad move you get a penatly of 10 seconds! The game can help you to improve your math skills. You can run it on your desktop or mobile browser. Screenshots
  15. Hi guys, How I can find the third point? It is simple, but can not find the solution. Regards, Nicholls
  16. Hello, I started out building a "number pattern hunt" game, ended up building a math puzzle game that involves modular arithmetic and prime numbers. It's deceptively simple, and plays like Minesweeper meets 2048. URL:
  17. Hello! For my project I want to re-arrange an interesting feature: the rotation of the object by clicking in the right direction (and of its movement) on the principle of moving the spacecraft to point and rotation to the desired degree. How can I make such a function? Example attached.
  18. We have just released a new game! ULTIMATE SUDOKU Take a look High quality Graphics Optimized for mobile and desktop Code sources included Highly customizable Take a look also at our entire games portfolio If you want to keep being up to date about new games releases please like us on Facebook Or follow us on Twitter
  19. Hello everyone! First post! I have been playing around with bablyon (you can guess, I am not a pro graphics programmer) and the first issue I bumped into is: is there a simple way to get the normal of a surface? If not, I was thinking on using the following to calculate the normal of a plane. P---Q| |R---TTake (P-T) × (Q-R). Basically have the cross product of the plane's diagonals. Is it at all a good solution? Is there a better or simpler way to do this? Thanks
  20. This is rather programming logic question . But if I get answer to this, I will be able to know more about what information babylon.js provides for mesh and how I can use to do dynamic mesh generation. Assuming there's one plane mesh (can be positioned anywhere, facing any direction) , how do I draw another plane mesh exactly parallel to it ? As shown image below, the mesh which is in back will be there in the model. It will be accessible to me by name. While the 6 smaller meshes in the front will the one I will be creating and positioning dynamically which will be parallel to the mesh in the back. The important thing is the dynamic meshes should be perfectly aligned with the mesh in the back . ie. top left corner of 1st mesh in the front (going by top left to right bottom) should match top left corner of mesh in the back.
  21. Hi! I want to import an object layer from Tiled map editor into a physics engine ( p2.js ). My problem is that p2.js uses 0.5,0.5 as anchor points, but tiled uses 0,0 (top-left). How can i recalculate it's position so i can give it the proper coordinated for a different anchor point? Any help is very much appreciated! Edit : This is easy with rectangles, but my problem is with rotated polygons.
  22. Hi there, this is my first android game it's like math puzzle you must put the correct number in the box to correct to question it's 2x2 3x3 and 4x4 dimension and easy - very hard level you can download here Your suggestion are welcome Hope you like it Thank you
  23. Hi everyone, I'm from Belgium and making games in my free time(with a full time job and 2 kids). This is one of the first official game I made. It's available on android/PC/Mac(links below). It's totally free and will be updated with new "servers". In short, you work for The Agency and they provided you with a hacking device, you must learn to use it (user manual included) and connect to servers to discover the truth behind the disappearance of scientists from a powerful organization. The game is easy to pick up but decoding all messages will take time. There are achievements and leaderboards on Google play games services. This game has been made mainly with construct 2 and cocoonjs. If you have any question about the development, I'm available. Please enjoy and send me your feedback. Fabrice from Studio Nonante. Welcome to the Agency, You have been chosen to be a part of one of our most important investigation. Several scientists at Venntech disappeared these past few weeks, they were working on top-secret experiments and we don't know what happened to them or what they were working on. For this purpose, we've sent you a brand new hacking device: the SD90. Use it to decode messages they were exchanging before they vanished. As this task is crucial for the Agency, you and other agents will be competiting for the position of worldwide best agent. Good luck! - Innovative MATH PUZZLE, very ADDICTIVE with a lot of replay value. - DECODE the messages and discover the MYSTERIES around the Venntech company and its borderline scientific experiments. - The SD90 is a brand new DEVICE in your hands, complete with his user's manual. Learn to use it and to master it! - Decode messages by using operators on DECIMAL and HEXADECIMAL numbers. Hexadecimal numbers is an exclusivity in the world of mathematical games on mobile, this game will allow you to think differently and to learn how to do calculations more easily in that numeric system. - Worldwide LEADERBOARDS and ACHIEVEMENTS with the Google Play Games service. - MORE servers will be available soon. The perfect game for brainiacs, easy to play but still a great challenge. Here are the links: Android: Linux 32:!79lwWJpI!xUut80suJ ... HHH_65GP-4 Linux 64:!Tply0QZK!_MDZlCOYh ... MbAqDWWBoQ MacOSX:!7s8yRYqb!4owiYHyUs ... eMrzY7jR0w Windows:!XodlHbaa!GtqFkQbKa ... Zatbn5fdE4
  24. Number Garden Arithmetic bugs from the forest of Lost algebra have taken over the park. Are you smart enough to help Lime and Minet the cat to stand against the neverending wave of maths bugs? Challenge yourself, learn maths and have fun. add them up in your head, no calculators, GO! Download the game from hereMore information about the game here Hi everybody!This is our first post here on the forum even if we have been lurking from a few months ago.We have just released our first game and we want to share it with you.Working with Phaser was a great pleasure: the documentation, the examples and the community support are just amazing! We created a game to help children (elementary - middle school) exercising their math skill while having fun. Nonetheless, we've heard that many adults are getting hooked up too. This is our first game ever so any feedback or comment is welcome. Thank your for your time
  25. Hi there! This week we want to share with you an educational HTML5 games, Sagemath! Sagemath is a math-arcade games where user must use correct wand (math operator) to combine Hero and Monster number, to defeat the enemies. We try to take a different route when coming up with the idea of new games, and try to make a quick & simple defense games using math mechanism. Play it on mobile browser for fun parallax effect Link: Alternate Link: Hope you enjoy this little brain teaser! Do let me know if you have any problem or feedback