Marbles on Tracks

Showcase
1

Here’s my contribution: Marbles on Tracks . If you’re into trains or roller coasters this might be for you. If you look at the implementation you can easily deduce the platform API I’ve built, but be warned that it may still change in the near future. I’m happy to take recommendations for new layouts. Thanks for your consideration - Chris

6 Likes
2

Very cool. Its like electrons flowing through a circuit.

Marble textures

Perhaps gates to

  • slow or speed up movement
  • change shape
  • allow a specific shape through

Are collisions allowed? When specific things collide, they either destroy or make something new (think particle accelerator.

Maybe the lines could be tubes with different materials or moving shaders

Might be interesting to add a floor and some walls with openings to obscure the whole track.

This would look cool in VR watching the marbles move around. Shoot to destroy or change gates

Ability for player to change the gate type

Two puzzles that weave in between each other.

3

It is a nice project.

It appears animation is frame-based, not time based. As a result, when I run it on a fast computer, the balls are just dashing so fast, that it is impossible to see individual balls. My suggestion is to make animation time-based, so that the visual speed of balls is consistent across different machines.

4

Thanks, @anidivr!

The “marbles” are indeed independently moving objects (although they have to stay on the tracks) and have properties like speed, color, safe “driving distance” behind the marbles in front. So collisions are not allowed, even if that causes something of a traffic jam behind. The tracks have behaviors, too, and I like your suggestions. I’ll try adding some, but the hard part is to think of interesting track layouts that showcase track behavior.

I’m also looking into whether three.js supports selection of objects in a rendered view. I’d love to be able to click on a moving marble or section of track and perform some action or change of state. That would lead to some interesting games.

Thanks again for the feedback

  • Chris
5

Thanks, Pavel,

I was wondering about the speed of animations, but never ran into that problem myself. The app design requires that I calculate the behavior of tracks and marbles every “clock tick”, but also allows for arbitrarily many clock ticks in a given second. As such, the documentation hasn’t given me much help in addressing your problem. I think my best bet is to try to slow down the animation loop (with javascript sleep()?) since each iteration represents a clock tick. I’ll work on that.

I appreciate the feedback, and am sorry the experience wasn’t a good one.

  • Chris
6

@PavelBoytchev , I have made the change to make frames time-based and a bit slower. Take a look if you have time. Thanks again for the feedback. I think it makes for a smoother look. - Chris

7

Here’s example of very simple form of interaction webgl_interactive_cubes
There’s also InteractiveGroup which supports mouse and VR controllers

8

On a fast computer there is no significant visual change. Here is a video (beware, the screen capture did not manage to capture the speed, so the balls move faster than they appear in the video):

Using sleep() to slow down speed is something that I would definitely recommend to avoid. By time-dependent animation I mean this:

  • consider moving a ball horizontally
  • doing x ← x + v each frame will the move the ball v units per frame, and the final speed will depend on the frame rate
  • doing x ← x + Δt.v will move the ball with speed v units per second, independent on the frame rate; so for a fast computer the animation will make more steps, but they will be smaller; for a slow computer the steps will be fewer, but larger

BTW when I look the demos on an old (and slow) computer the animation looks well and I was finally able to see a lot of details – like semaphores that control flow; color convertors that change balls; or path switchers to split flow. It appears it is much more complex (and interesting) than I initially thought. It reminds me of some simulation software for traffic control.

It would be fun if the users can easily design their own tracks!
(although I assume it will not be so easy to design a track that shows interesting flow pattern)

9

@PavelBoytchev , could I get you to verify that the index page has a release notes section? If it doesn’t, you’ll need to clear your cached web content. Cached web content has been my bane for the past few weeks.

As for designing your own tracks, the layout is defined by a JSON file that reads like a recipe for a model train layout. For example, this segment is from transforms:

		{"type":"left", "radius":0.1, "angle":90} ,
		{"type":"right", "radius":0.1, "angle":90} ,
		{"type":"painter", "color":"green"} ,
		{"type":"straight", "length":0.6} ,
		{"type":"right", "radius":0.1, "angle":90} ,
		{"type":"left"," radius":0.1, "angle":90} ,

I’m hoping you’re still running an old version of the app, but will keep playing with it to see I can find why it works on my machines and not yours.

  • Chris
10

All cached files cleared. The release notes are visible, but the motion is still too fast. I also tried another browser (that has never accessed these pages before). The same result.

I took a video with a smartphone, as it shows what is actually seen. The yellow balls are very fast, but still I can follow a ball for a few seconds. The blue and the red balls are just impossible to see. Maybe my eyes are too slow?!?

11

@PavelBoytchev and @anidivr , I haven’t forgotten you. I’ve taken your input and am going back to work on version 2. RayCaster didn’t work out for me (not it’s fault, I just needed a lot more function) so that slowed me down. Stay tuned.

Thanks

Chris