Technology behind leapsecond2015.com - javascript

I'm trying to find any guidance behind how http://leapsecond2015.com/ was built. Anything to get me a start would be incredibly helpful. I know it was done by droga. I'm not worried about the actual streams but more of the movement and interactivity. I want to attempt a similar project. Not sure if this is an appropriate question for Stack but thought I would ask since I cant find anything on google.

If you open the console, you can see this was done with PixiJS v3
It is an excellent rendering library using WebGL with canvas fallback; you can check it at http://www.pixijs.com/
Pixi provides Flash-like classes like Stage, MovieClip and Sprite.
In Addition, Phaser, a popular game framework is based on Pixi.

Related

What should I use to create a 2D game with JS (runner game)?

I'm a frontend developer and now I have a task to create a game.
Example is ⇾ http://redcarpetrampage.com/
The player should run via two buttons, only if event is "onkeyup" (or maybe "tap" on mobile).
The logic of all game is 95% like in example. Game hero should run, jump and collect something and in the end will get some score (and I should save it in database).
Popular game framework for 2D games in JS is Phaser, but I don't find any nice example for my type of like, like in example.
Game from example is created with Construct. I never used it before.
My experience in gameDev is - creating a few small games by tutorials without frameworks, and I have some knowledge with webGl (3d).
So I don't really know what should I do with it. Now I start a small tutorial based on Phaser, but I'm not sure is it right or not.
Hope, someone has some recommendation for me :)
Note: I'll not list game engines already mentioned, (that are very good anyway).
CraftyJS
As the game mechanism is very simple you can try out Crafty, it is opensource and very simple for prototyping.
It has built-in all the behaviors you are seeking for:
jump
movements with keyboard
collisions in order to colllect items
...many more built-in along with a lot of useful 3rd party components
PixiJS
If you need performances and also mobile compatibility you can take a look at the stunning PixiJS which is more a rendering engine than a game engine, but has by far the best performance vs other engines, take a look at the performance of your device in examples section.

Creating a virtual environment using HTML5/Canvas

I'm going to be working on a project soon where I'll need to create an explorable environment similar to a game map using HTML5/Canvas and I was wondering where I might find some resources to get started. The closest thing I've found to what I want to do is here: http://www.isogenicengine.com/ (direct link to video: http://vimeo.com/71436906) - The CasinoRPG game is generally what sort of look/feel I'm going for, except I don't need that much interaction, just the ability to move around and look at the buildings. I'm curious to find out what else is out there that can accomplish something like this. I've also looked at http://raphaeljs.com/ and http://snapsvg.io/ but these seem very barebones for what I'm trying to do and will require a lot of environment type development like movement and perspective and such. Isogenic is my current primary option, but I was wanting to find out what else is available.
I'm very novice to HTML5/Canvas development but have a lot experience with Javascript, so I'm just trying to find the best place to start working on this type of project. Thanks!

Recommended API and IDE to work with WebGL

I'm about to use WebGl in a academic project to preview some 2d and 3d models in a given format.
While I'm reading some documentation, I would like to know, from your experience, what would be the best API to speedup development and abstract some low-level calls and also the best IDE to work with it.
Cross browser compatibility is not a major problem.
I've decided about WebGl because I would like to create a web interface for my project to help sharing my progress.
Do you even recommend using WebGl for that?
At the end of the day, an IDE is only meant to help a little, you do the hard hauling, having said that, the best editor(s) I use for javascript are Sublime Text and Netbeans IDE
Then as it was already stated, Chrome DevTools is your best bet for debugging.
API
Three.js is really awesome to work with regarding developing WebGL apps. It makes creating what you want very easy (create a scene object, create some things you want to show, then add them to the scene and render. No need to mess around with GLSL and low level stuff right off the bat, although you could if you really wanted to).
IDE
Chrome's console and various tools are great for debugging in general. You can use whatever text editor / IDE for javascript that you want.
API (Framework)
If three.js is hard for you, or you are professional developer who just don't want to spend his time on simple things like setting up environment(scene, camera, renderer) you may try whitestorm.js.
WhitestormJS framework is a wrapper around three.js (you can use both at once, like jQuery wraps DOM). It has some extra features:
Built-in physics of Bullet Physics 3, even softbody physics (You can use light version without physics.
It has component structure (like ReactJS). You can share your plugins, components and use the ones from others.
*WhitestormJS is non-commercial open-source project by three.js fans.

Simple cross browser draw javascript library

We are building a web app library which need draw some polyline/polygon/circle/rectange.
Also we want these vectors can be edited.
So I wonder if there is a cross browser draw library can be imported to our codes?
I know Raphael,however I think it is too strong,I mean there are too many features we do not need.
Also we found this,it render the vector using divs pixel by pixed. But we think the effect is not good.
Any suggestion?
I totally agree with Sirko's comment, stick to Raphael. There's nothing quite like it when it comes to cross-browser compatibility. Other than that, you could take a look at John Resig's port of the procressing library (which is a pretty mature visualization language).

Create a web based GPS Skyplot

I am looking to create a web based GPS skyplot.
Currently just in the planning stages. Was wondering if anyone knew any javascript libraries or such in which this would be best to start with or have a look at, of if you have done something similar before. I know Flot is decent for plotting but unsure if it would be easy in this scenario.
TLDR: Looking for javascript libraries or other alternatives to create a web based GPS Skyplot.
Further info.
I would like to be able to maintain it all generally in javascript / HTML but am open to other alternatives. I will have a server passing me the GPS details.
Skyplot Examples: For those who don't know.
http://www.gpsoftnav.com/skyplot.html
http://www.novariant.com/resources/technologies/skyplot.cfm#
I came accross:Geographic Information Systems (Stack Exchange) yesterday, would make a good site for these kind of questions.
So if anyone is interested in this please also go make a commit :). Otherwise I am still looking for any feedback on the question.
Is it the graphical issues you are concerned with, or are you intending to also calculate which satellites are visible, and their azimuths and elevations at the given location and time?
If it's just the graphical part you are concerned with, I would use jQuery and Keith Wood's SVG plugin - see http://keith-wood.name/svg.html . This gives you a Javascript handle to Scalable Vector Graphics, for drawing circles, lines and dots on a canvas in the web page. It's simple to use, and the page I've linked to has examples that should help.

Categories

Resources