Lottie - INTERACTIVE web based animation with raster IMAGES - javascript

I'm new to Lottie, have had some tutorial and tests completed, and got fascinated with the idea of mixing together After Effects animation with HTML5 animation. THANK YOU AB&B GENIES!
We're about to develop an online interactive project in which we'll cover our client's fashion collection.
The problem is, we'll have to use raster PNG images, rather than AE vector, because the client's got an exclusive waterpaint guideline for images.
Please have a look in this (closest) example of image ->Fashion woman waterpaint
We'll have different models (male and female) standing in idle position. Like, breathing, moving a little bit, like they're alive. We're planning to have their body parts and clothes in raster PNG images, animated with AE and exported with Lottie Bodymovin.
Then, we'd like to have [BUTTONS] which would help out the user to change these models clothes, like experimenting new fashion styles, colors, stamps, etc. A limited and pre-set range of PNG clothes will be used, to cover up the new collection.
How does Lottie work with changing such pre-set images, when clicking a button on runtime? Is it possible? The application will be hosted on an online server, and played on browser for an specific event, so no need to think about android or ios this time.
I'd like some references, please, I'm a bit lost around LottieAnimationView and setImageAssetDelegate, both which I can't see how to implement - if those are the proper solutions.
Thank you guys!

Related

AR.js to show png hanging on the wall

I have an e-commerce website where I sell illustrations from different independent artists.
I have an idea where the user turns on the camera and see how a poster (png file) looks in their wall, using the web browser of their mobile.
Is this achievable with AR.js or this is something achievable only with a native mobile app?
If so, could you share some guidance for me to start looking into?
Thanks you all!
Yes, you can, using a browser and webcam, and of course some JavaScript.
One way is to have the end user print out a marker with a defined pattern that you can then replace with an image. The Image Texture example at this URL on GitHub contains almost exactly the code you want, running in a browser.
With ARjs you can only do it if the user has a marker on their wall. You can have the users printing markers as part of your user journey. I think a better solution for you will be model-viewer. Model-viewer can recognize surfaces and add your models to this surface, the problem is that if you want to present a png, you can't. what you can do is convert this png to a 3D model (just a plane really) and present that.
You can also check out echoAR (full disclosure - I work there), and see if there are any solutions that work for you with ARjs/ model-viewer.
Hope it helps.

How to create an online drawing application

I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.

Progressive Loading / LOD / Streaming Mesh in Three.js

I am loading stl files into a three.js scene using the STL loader. These stl files range from 5mb to 50mb.
Is there a method I can use to progressively load/stream/increase level of detail (not sure of the correct terminology) as the model loads so that my users aren't staring at a blank screen for minutes before anything appears?
If the model is 20,000 triangles, does three.js have a method for maybe loading only 2,000 first and then progressing to the fully detailed model?
Real progressive loading / mesh streaming is not there out of the box. It would be great though and is doable.
It has been done with WebGL without three.js using POP buffers: http://x3dom.org/pop/ & https://github.com/thibauts/pop-buffer
One of the demos is: http://x3dom.org/pop/happy.html
I hope one day we'll have nice POP buffer (or similar alternative) progressive loading for three.js too -- is in my/our todo / wish list too but many things still before that here .. sure don't mind if someone writes it earlier :)
Three does include a simple LOD mechanism but it is to help with rendering load and not with loading time: http://threejs.org/docs/#Reference/Objects/LOD & http://threejs.org/examples/webgl_lod.html
For a simple solution, you could author low & high versions of your models and write custom loading logic to just first load the low one & show them, then proceed to load the high version etc.
We've done that in one project, works fine as expected. Only downside I can figure is that it increases the total time to get the high version. But the low can be very small so it's ok (in our case low poly untextured with just vert colours, then the high ones have much more polys but essentially quite big textures too).
The best solution for this is currently Nexus, which has been under intensive development in the last couple of years. It has a loader for threejs.
Nexus and popbuffer could be the right solutions for prograssive LoD loading. However if you just want to try a simple (just working) solution, suggest to have a look into this:
https://github.com/amd/rest3d
On basis of GLTF format, it transmits single mesh one by one. In a certain sense it reduces the waiting time for the first renderring. Actually if you rearrange mesh data and use streaming buffer to download data, you might achieve a result of prograsive loading/rendering.

canvas: create a game-like exploding stars effect for gamification purposes

Coming from the backbone side of web development we are trying to find a solution for a request to add visual and sound effects to our task management web application.
For starters - we are looking for a way to create an exploding stars effect like you see in games.
Can this be done with HTML5 canvas?
Should we use flash?
Any ideas how to start?
By now, just about anything Flash can do visually can be done by the HTML5 canvas on modern browsers.
For a 'star burst' visual effect, it sounds like a simple matter of creating a random array of objects that move away in random pre-set directions every time the canvas updates.
Example: http://jsfiddle.net/amDAW/ (click on the canvas to create a starburst)
As for sounds, this isn't handled in the canvas, but rather either the Audio tag or the fairly new WebAudio API. If you go with the former (more browser support), your biggest concern will be with resource preloading, but there are some helper libraries that can abstract this away (shameless advertising: https://github.com/jsweeneydev/ResourceLoader).

Animating image/3D/sprite with javascript/css3/canvas

Kind of a dilemma here. I am making a mobile version of a website, that has some interactive things more specifically I have this object in 3D that you can spin, I was using papervision in Flash but now I need to do this differently since there is no flash in mobile and I feel I am on thin ice.
I was thinking of exporting a 360 degree spin # 30 FPS using a PNG sequence with alpha channel, and then simply stiching them together into a sprite, then using this as a background in CSS and using background-position to then "simulate" an animation.
That or simply switch source image very rapidly, or somehow using "canvas" maybe, the thing is I am not sure if this will produce completely subpar performance? I mean switching the background-position or image source file # 30 FPS is that even possible? Would it be smooth, or is this simply something that is not feasible todo yet? Keep in mind it's just one single 3D object that needs to spin based on user input, not any other interactive elements.
So is sprite the way togo or canvas or something cool I havent even heard of? Thanks everyone in advance!
If I was making a mobile version of a website, I would strip it of most of the graphics and definitely of all the animated gifs, flash, etc. -- people using mobile phones for browsing the web are usually not after the multimedia experience -- they just need some information quickly and use a suboptimal device with poor bandwidth and even worse display and performance to get it. Don't make it even harder for them.
On the other hand, I found that using a background image with all the frames of animation in it, and manipulating the background-position from javascript is a fine way of making small animated sprites, for example for a simple javascript game for mobile phones :)

Categories