Water Fountain Effect


(Sekar Chandrasekar) #1

I purchased Hype and I have been trying to get the water fountain effect in Hype like this one: http://demos.playfuljs.com/particles2/ I have no clue how to do this as the demo uses CANVAS which Hype does not support. Please help how to acheive this effect purely in Hype ? Thanks for your time.


#2

You won’t be able to do that in Hype unless you spend a huge amount of time animating all the individual elements which wouldn’t be worth it. Hype does support “canvas” as it’s just a HTML element that is manipulated by Javascript.

Here is a quick put together of that example inside of Hype. With just a few minor adjustments.

particles-vDBear.zip (15.5 KB)


(Sekar Chandrasekar) #3

Thank you DBear… Appreciate your response. However I am puzzled how this works, as in the FAQ it clearly says, Hype does not make use of canvas. But you proved its working, but not sure if it works on all browsers.


#4

Hype doesn’t natively use Canvas which means it has it’s own animation engine but…

what I have done is simply added a canvas element inside a Hype element with a specific ID so we can get to it inside the Javascript code which is then run inside an action (in this case on scene load). We are effectively using Hype as a wrapper for a Canvas project. The Pros of this is that you can also add static elements and Hype animated elements on top of the canvas if wanted.

It does work on all browsers as we are simply using a <canvas> element and manipulating it with Javascript.

http://caniuse.com/#search=canvas


(Sekar Chandrasekar) #5

Fantastic !! Thank you somuch DBear