I want to make a moving man in css/html/javascript, also detect collisions with other objects. Any idea how to do it? or any pointers to the same will do great.
The first try is look at rapahel js project it uses canvas, second it is a pretty hard thing to do as you want your own physics engine at 2 D level, but i guess with some math formulas you could do it, but everything that you need as an object should be scripted in js to be sure to get the collision effect.
Some design patterns should help you to make your code better.
Good luck.
Pretty much any basic game tutorial covers the topics you asked.
If you can't find a javascript version of that, just get anything in a language you are familiar and try to code the same thing in javascript.
to draw things somewhat in the same way these tutorials probably do, use a div with "position:relative" and its children with "position:absolute" and use "top" and "left" css style proprieties to position the boxes/sprites/whatever.
I am pretty sure you can figure out what to do if you follow these tips.
Related
I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.
What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.
I know of a roundabout way to do it with svg but where would I start for javascript/jquery?
I know of a way to do it with svg but where would I start for javascript/jquery?
Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:
There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.
I have been spending about 7 hours today, trying to:
a) Create my own carousel using intensive javascript and CSS3 features (see this pastebin)
b) Setup and integrate the Roundabout plugin from FredHQ
c) Setup and integrate the Cloud Carousel plugin from Professor Cloud
Both third party solutions were tried because i failed in accomplishing what i wanted by myself. Unfortunately, both solutions do not work the way i would require them to. Both are amazing for displaying images, but i need to show more complex content, a heavily styled DIV with multiple encapsulated DIVs inside, PNGs with transparency, and so forth.
FredHQ's version did not work as it did not scale the content inside my DIVs. Not even the text was scaled, until i removed the font-size parameter, but that is something i need for a proper layout. Cloud's version works with images only.
I have hit a wall and i cannot seem to find any other solution. It seems the word "carousel" is used for slideshows and sliders, so i find hundreds of such solutions, but not one that works like i need it to.
What i need is decreasing opacity on further objects, while the center one is at full opacity. Also further objects should be scaled down by certain scale factors. It does not have to be 3D (not desired, even), but due to the scaling it would look 3d-like.
It does not have to be jQuery, although its probably a good idea if it is.
Does anybody know or can anyone point me to a proper solution?
Have you looked at monete(git), http://www.jacklmoore.com/monte? 184 line. Not sure you'll find something easier to dig into and make it work your way. Hundreds of solutions? So I'll take it you looked at the cycle plugin as well. That's probably one of the most mature and robust ones out there. You're asking for a lot in your question and these kind of question just wear people out after a while. That's all.
You probably won't find anything that fits your needs EXACTLY and you'll have to roll it yourself or hire someone. If you get something going and come back for specific help, you'll fair much better.
I recall from Actionscript that was very easy to detect when two elements were touching, very useful for games for instance, just a method called hitArea
since I'm in rush and i cant write the code from scratch I wonder if there is anything easy to use, a plugin maybe that works in JS and can tell me when elemA and elemB are in the same spot on the screen
Thanks
actually JQuery Collision is the answer
http://www.html5canvastutorials.com/webgl/html5-canvas-webgl-plane-with-three-js/
In this example its just a rotating plane.
I'm an html 5 beginner :)
However, look at how many calculation does the JS code.
I dont have any trouble with it.
but this is how its gonna be ? ( while learning html5)
for every animation I should look for the js code ? ( and try to custom it to my needs) ??
and if so , is there any centrelized place of general scripts for html 5 animations ?
Depends.
Using canvas and JS, probably. The code is just a raw drawing board, so it is subject to the same drawing code you would using in most similar scenarios. three.js (as used in that example) is used to make things easier, and having a 3d drawing context for canvas will help, but it will be pretty much the same thing as three.js (it may be even using it, I don't know. Haven't used it before).
However, that said, for simple things like that, CSS 3 3D animations will make things possible. You can modify things like perspective and rotation and get effects like that. So it depends on what you will be using it for.
If you can get away with CSS and elements, than it can be pretty easy (keyframes and CSS styles). But if you're looking for more complicated 3d effects, than yes, it will be more complicated.
I'm trying to write a fluid dynamic simulator on the HTML5 canvas. I've found some real damn cool stuff on the internets that always look like a promising starting point, but they are all cell-based and use some crazy math.
I'd like to be able to add arbitrary obstacles (lines of any orientation, circles, etc) to make things more interesting, but I've no idea where do begin.
Does anyone know of some fairly simple equations for fluid simulation that include obstacles of any orientation? Alternatively, could anybody point me towards the math required to take one of the above examples and add obstacles?
I know that this question borders on something I should ask mathoverflow, but they seem more into the theory stuff. Apologies if I'm in the wrong area. I don't really know where to begin - if anyone's worked on fluid simulation with arbitrary obstacles before, I could use some pointers.
Accuracy takes a back seat to simplicity here.
Thanks!
Fluid dynamics isn't a simple topic. All that "theory" they like over at the other site is just the way this field works.
The simplest example of fluid flow is 2D, incompressible, irrotational, laminar flow. I'd start by looking into that.
But it's not an easy field. There's no "Teach Yourself Computational Fluid Dynamics In Ten Days" books out there.
The best book to read for introduction to graphics-oriented fluid simulation is "Fluid Simulation for Computer Graphics" by Robert Bridson (disclaimer: he was my PhD advisor).
http://www.cs.ubc.ca/~rbridson/fluidbook/
Ultimately, there is plenty of math involved, but there's also plenty of code examples to clarify things for the less math-inclined.
It covers mainly the cell-based approach you mentioned. The other main alternative is "Smoothed Particle Hydrodynamics" or SPH. Matthias Muller has some papers about this if you're looking to get started.
If you don't care about real accuracy but just want something swooshy and cool, I developed a very simple pressure-based simulation that delivers a very fast interactive interface in Javascript. You can see it here.
Here is a pretty decent list of everything You need to know about fluid dynamics and simulation:
http://www.dgp.toronto.edu/~stam/reality/Research/pub.html
Also you should check this site, where you can find the concrete source code written in Java and transported to Actionscript3. It's pretty documented, so shouldn't be a problem to transport to Javascript.
I have tried that and just to let you know there is an important part of Fluid simulation of any kind called Projection which is computationally extensive even on CPU it takes much and you might well know that Javascript is quite slow for many reasons.