I'm going to program a fancy (animated) about-box for an app I'm working on. Since this is where programmers are often allowed to shine and play with code, I'm eager to find out what kind of cool algorithms the community has implemented.
The algorithms can be animated fractals, sine blobs, flames, smoke, particle systems etc.
However, a few natural constraints come to mind: It should be possible to implement the algorithm in virtually any language. Thus advanced directx code or XNA code that utilizes libraries that aren't accessible in most languages should not be posted. 3D is most welcome, but it shouldn't rely on lots of extra installs.
If you could post an image along with your code effect, it would be awesome.
Here's an example of a cool about box with an animated 3D figure and some animated sine blobs on the titlebar:
And here's an image of the about box used in Winamp, complete with 3D animations:
I tested and ran the code on this page. It produces an old-school 2D flame effect. Even when I ran it on an N270 in HD fullscreen it seemed to work fine with no lag. The code and all source is posted on the given webpage.
Metaballs is another possibly interesting approach. They define an energy field around a blob and will melt two shapes together when they are close enough. A link to an article can be found here.
Something called a Wolfram Worm seems so be an awesome project to attempt. It would be easy to calculate random smooth movement by using movement along two connected bezier curves. Loads of awesome demos can be found on this page:
http://levitated.net/daily/index.html
(source: levitated.net)
I like a lot the Julia 4D quaternion fractal.
(source: macromedia.com)
Video: Julia 4D animation in F#
Related
I'm looking to implement a simple morphing animation between two images.
Here's a simple demo of what I'm trying to create: http://i.imgur.com/7377yHr.gif
I'm pretty comfortable with Objective-C and JavaScript but since the concepts and algorithms are abstract, I'm more than willing to see examples in any language or framework.
I would like to know how hard it would be to tackle this -- it doesn't have to be exact but as long as it gives the impression of a morph I'll be satisfied.
Where would I start?
It seems like in your example is being used a combination of mesh wrap morphing and cross dissolve morphing. Mesh morphing can be tricky and as far as I know it requires a manual input (defining the mesh), so depending on what you want to do it might not be suitable for you.
If you are looking for a cheap technique (in terms of effort), probably just doing cross dissolve would work for you, since is very easy to implement. You just need to combine both images by increasing the alpha of the target image and decreasing the alpha on the origin image.
These articles give an overview of the techniques:
[PDF] http://css1a0.engr.ccny.cuny.edu/~wolberg/pub/vc98.pdf
[PDF] http://www.sorging.ro/en/member/serveFile/format/pdf/slug/image-morphing-techniques
[PDF] http://cs.haifa.ac.il/hagit/courses/ip/Lectures/Ip05_GeomOper.pdf
The last link comes from a comment in a similar question: Morphing, 3 algorithms, image processing
I'm trying to find or create a working example of inverse kinematic posing in three.js. Ideally I would like to export human models from Makehuman via their Collada exporter, load them with THREE.ColladaLoader and set them into different poses in three.js programmatically or through some dat.GUI interface. A bit like an artist doll implementation - I don't need animation, but real-time feedback when tweaking the pose would be nice, and inverse kinematic style posing would be highly preferred.
I've been studying and searching information for days. This http://www.youtube.com/watch?v=6om9xy6rnc0 is very close, but I was unable to find any example code or downloads. The closest working example I've found is this: http://mrdoob.github.com/three.js/examples/webgl_animation_skinning.html However that appears to use predefined animation frames, which in turn appears to manipulate the bones in forward kinematics manner so that was not much help either.
I couldn't even find a model for testing, as I don't know what to look for when searching something with IK rigs/skinning/bones compatible with Three.js. Makehuman does seem to have plenty of rigging export options, I don't know if any of those are usable.
Is there a usable IK system in Three.js, and if so, are there any working examples, working human models, or any hints on which exact rigging system/workflow should study to accomplish this? If direct Collada support is not possible, creating the characters in Blender and exporting them is an option too..
EDIT: found this live demo http://www.akjava.com/demo/poseeditor/ but the code is totally unreadable.
I don’t feel competent enough to answer your question, but I’ll post three links which may put you on the right track.
wylieconlon/kinematics
– a great demo of 2D inverse kinematics animation. The code is totally readable.
https://www.khanacademy.org/computer-programming/inverse-kinematics/1191743453
– another demo, this time less flexible but more terse.
How to calculate inverse kinematics
– a rabbit hole of links. Just in case you’d want to dive right into the thing.
This seems promising.
Fullik : javascript fast iterative solver for Inverse Kinematics on three.js
is a conversion from java to Caliko 3D libs
Caliko library is an implementation of the FABRIK inverse kinematics (IK) algorithm
https://github.com/lo-th/fullik
I'm planning on writing a game, which will use a lot of sprites and images. At first I tried EaselJS but playing some other canvas-based games I realized it's not that fast. And when I saw BananaBread by Mozilla I thought "if WebGL can do 3D so fast, then it can do 2D even faster". So I moved to three.js (using planes and transparent textures, texture offset for sprites).
The question is: is it better? Faster? Most of the WebGL games are 3D so should I use canvas 2D context for 2D and WebGL for 3D? I've also noticed that there are no libraries for WebGL in 2D (except WebGL-2d, but it's quite low level).
Please note that compatibility is not my greatest concern as I'm not planning on releasing anything anytime soon :) .
The short answer is yes. WebGL can be quite a bit more efficient if you use it well. A naive implementation will either yield no benefit or perform worse, so if you're not already familiar with the OpenGL API you may want to stick to canvas for the time being.
A few more detailed notes: WebGL can draw textured quads (sprites) very very fast, but if you need more advanced 2D drawing features such as path tracing you'll want to stick to a 2D canvas as implementing those types of algorithms in WebGL is non-trivial. The nature of your game also makes a difference in your choice. If you only have a few moving items on screen at a time Canvas will be fairly fast and reasonably simple. If you're redrawing the entire scene every frame, however, WebGL is better suited to that type of render loop.
My recommendation? If you're just learning both, start with Canvas2D and make your game work with that. Abstract your drawing in a simple manner, such as having a DrawPlayer function rather than ctx.drawImage(playerSprite, ....), and when you reach a point where the game is either functioning and you want it to run faster or the game design dictates that you MUST use a faster drawing method, create an alterate rendering backend for all those abstract functions with WebGL. This gives you the advantages of not getting hung up on rendering tech earlier on (which is ALWAYS a mistake!), let's you focus on gameplay, and if you end up implementing both methods you have a great fallback for non-WebGL browsers like Internet Explorer. Chances are you won't really need the increased speed for a while anyway.
WebGL can be much faster than canvas 2D. See http://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.html as one example.
That said, I think you're mostly on your own right now. I don't know of any 2d libraries for WebGL except for maybe PlayN http://code.google.com/p/playn/ though that's in Java and uses the Google Web Toolkit to get converted to JavaScript. I'm also pretty sure it doesn't use the techniques mentioned in that blog post above, although if your game does not use tiles maybe that technique is not useful for you.
three.js is arguably not the library you want if you're planning on 2d.
I'm a newbie to 3D on WP7. All I want to do is nice simple 3D
A. Add/Draw a number of coloured primitives, cube and spheres etc. to a 3D world
B. Rotate the World x, y and/or z
That's it, nothing else. I don't need any collision detection, I don't need any clever physics I don't need any textures or backgrounds or anything else, just that nice and simple.
I've been through about a gazillion examples on various websites and they all obscure the basics with bloated code and objects that I just don't want. I don't want any marble or spaceship examples, just some nice clean, clear code.
I have Blender to create the 3D models and these will be simple models with no textures. just solid basic 3D objects.
Please don't point me to anything that's based on a game which every example I have already found is.
Oh and please only examples that actually work.
Well the best way to do 3D on Windows Phone 7 is to use XNA which is generally associated with games which isn't the whole truth. You can still build traditional applications using XNA, although it might take you longer to construct your ui as opposed to silverlight.
You should probably check out App Hub from Microsoft as there are a ton of samples, in fact they have a category specifically for 3D. Keep in mind since your just starting you should make an attempt to understand the examples there giving you. Even though code you see for the first time might seem like bloated or extra code, there actually necessary components to consider when developing 3D applications.
At any rate, this example goes over the basics of 3D using XNA on Windows Phone 7.
EDIT: If you don't want to use XNA, there's this question that was asked previously. There's a couple of solutions for using 3D in silverlight.
I am curious if there are libraries already developed for creating these noises in javascript?
I have searched the web for about two hours looking for libraries in javascripts. I have seen this implementation for the simplex noise:
https://gist.github.com/304522
but I have not seen any libraries made up specifically for javascript.
If no one knows of any libraries then link suggestions on how to develop these functions would be great as well. I am currently doing Google searches for everything I have asked here I just figured better to have multiple web crawlers helping me out concurrently :) Also if someone on stack overflow has already found a quality site then even better.
Thanks guys!
Here you can find a thoroughly explanation of the algorithm, also the original code from Worley (explained in Texturing and modelling. A procedural approach) ported to Processing.
At the moment I'm working deploying to Javascript.
For the tiling part of your question: if you have a Perlin or Simplex noise function you don't really need a library to create tiling images because the math is really not that difficult. What is difficult is understanding how it works. For instance: a spherical noise map is way easier than simple 2D tiling image because you need to work with four dimensions for the latter.
I once wrote a blog post explaining in detail how to create tiling noise (including Javascript code examples).
It shows you how to tile in linear, cylindrical, planar and spherically (including cubical panorama).
I've made a javascript app that renders perlin/simplex noise to an html5 canvas, you can find it here: http://lencinhaus.github.com/canvas-noise
Well it's not a proper library, but the javascript code contains implementations of value noise, perlin noise (both in classic and improved versions) and simplex noise, all derived from the original Perlin's C implementations (or a more optimized java version for simplex noise, see the references in the code). You can tweak the noise parameters visually and immediately see the results in the browser, so maybe it can be useful for you.
hope that helps!