RenHe

Woah that's awesomely helpful! Didn't know the details of raf since I just abstracted as an animation oriented function that runs before next repaint. The reason I mentioned about closing the demo is sometimes when I switch the tab back or return from blur it will have weird portions of the animation. It may be on my side but I wanted to avoid that in case it wasn't. Thanks for the Foundation link as well, looking through that now.

@OSUblakeHere is another dirty demo of what I got working, it's not a proper demo so be sure to close it when you're done since it'll keep running raf. Again there are a lot of leftovers from trial and error but roughly what I have achieved so far. I have been tinkering trying to find a sweet spot for when the particle should spawn from either the a portion of the emitter's life to when a particle starts falling. The latter seems reasonable but the time variances each particle falls causes faster spawns and the spawns themselves vary since the setup is very loose. I will most likely have to figure out size/opacity over life soon as it'll give me a better idea of how to recreate the fluid motion rather than a monotonous one. I just recently saw a demo involving gravitational fields but nothing too complex, it's a good resource to have though. I checked out the Physics for JS book a few weeks back at a bookstore but it involved ventures out of my current scope but the Foundation HTML5 looks interesting. I'll check if google books has a preview of it, if not I'll check it out at the local bookstore if they have it.

@OSUblake Finally got a working formula to apply gravity and proper height last night, big step forward! Now I will be able to move on to generating the particles randomly for visual appeal. Probably going to be another difficult task but getting over the first hurdle is a huge confidence boost.

I spent a large portion of yesterday trying to implement your theory. I couldn't get an idealistic demo of it but the gist of it. Though it is an interesting approach I wasn't able to assess the size of the particles that broke off from the emitter to visually appear like a fountain, mainly just small enough pieces to get a rough idea where more work is needed. I may be able to better apply your theory should I get more of an understanding of the Tweenlite library to better implement it in my current demos. Hopefully I will have more success tonight.

Cool, I'll check it out should I get a better example. The problem with most particle examples I have come across are randomly simulated rather than having certain restrictions. Since it's designed as an audio visualizer at least one of the particles should reach the targeted height and visually so. Timing is important as well considering the next iteration starts when the current animation is fading away but still visible. The particles may have random life but it most likely has boundaries of some sort to keep it from fading too quickly and possibly dependent on it's size. I am currently attempting to calculate the gravity with respect to a particle's size and distance required to travel which is proving far more difficult than I originally anticipated. I may be looking at randomly generating the initial velocity and limit it's boundaries with a min/max comparison but I also must keep in mind the particle's size. I may have to look having dynamic gravity using timesteps to assure at least one particle reaches the peak but I haven't been able to come up with a process/formula for it. Here's what I've currently been fiddling with. There are a lot of remnants from a large amount of fiddling but it's currently the base I am working with.

@OSUblake Here's what I am currently fiddling with: It's a bit messy since I've been tested different approaches but I am able to get it to run based off the audio frequency data. I am unable to demo a working example of it using the web audio api since I don't have any sources for an audio file. Currently figuring out how to apply gravity and particle splitting. Not going ass smooth as I had hope but I'll try and update the pen should I make any progress. Edit: The current example using the audio frequency data on my end has a better fountain effect than the one on the pen. I am not sure if there are any available sources for linking mp3 files without stealing bandwidth of the owners.

May require some tweaks to get it more appropriate to microsoft's spec but this is the css I used on a light background for an acrylic effect: .acrylic { position: relative; overflow: hidden; } .acrylic::before { filter: blur(50px); content: ""; position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); z-index: -1; background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)), url("/background.png"); background-size: cover; background-position: 100% 50%; will-change: transform; opacity: 0.3; margin: 0; } .acrylic::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.35; background-image: url(data:image/png;base64,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); } Having "will-change: transform" is awfully important, otherwise there may be heavy lag when scrolling etc. The task I assumed to be moderate in difficulty has risen significantly due to the large amount of loops to generate and animate multiple particles during each requestAnimationFrame. I am looking at reducing the amount of frequency representations and hopefully method to improve performance to get a steady demo.

Most of the fluid concepts I've discovered center around liquids with high viscosity and often represented in a pool. I've tried to break down a lot of the elements but the end results aren't close to the visuals of water shooting from a source. If it will help you relay your thoughts better I'm fairly confident in my javascript skills and typical css/web animation api uses for animations. Canvas on the other hand I have recently started getting deeper into it to improve my toolset but no need to hold back in respect to my skill level. Anything I don't understand I would make it so I do understand. On the animation note it seems the velocity possibly is constant for all particles. I can shift my focus to the generation of particle count and how/when the smaller particles dissipate whereas the larger(lower) particles drop. I have attempted to contact the creator of the concept, Leo Leung, though I have not been successful due to dribbble allowing only invited members to post comments or send messages. I had hoped the creator would be kind enough to share the animation's conception though my emails may have been sent to an old address or filtered out as spam. Though I do use chrome and always latest versions of browsers I must admit attempting to showoff a project is difficult when certain features aren't usable. I have used filter before when creating microsoft's fluent acrylic but browser support and consistency makes for a lacking end-user experience, which I now stay away from filter until better adoption rates. The post you linked was a great resource and has given me some ideas on approaching the particle dissipation effect though I may have to reduce the amount of physics and use constants to keep the animation in sync with the audio. I am currently attempting to break down the following example and see what I can take away from it despite it's usage of filter. My obsession on this animation is more than I care to admit but people like you and other members providing resources and wisdom really eases my anxiety. Thanks again @OSUblake

@OSUblake It's a bitter sweet moment to hear a veteran having similar issues on approach and I do very much enjoy following up advice so I am not at a complete loss. So far I have made some, though very minor progress on the concept: Next steps will be trying to recreate fading/shrinking effect of the particles and possibly integrate some sort of gooey effect. I may have to shift away from using rect to either lines, polygons, ellipses, or quadratic rects. Another step would be figuring out the appropriate pattern of how many particles per line and size. All of these will be large hurdles for me to figure/discover but hopefully the vast web has some answers. Thanks for the examples and resources. They do give me hope and I really appreciate any feedback anytime during work. I will proceed to update my progress and hopefully the final product will be as close if not better than the original.

Originally I avoided WebGL with initial thought it would require a massive time investment but PIXI definitely looks interesting. I'll definitely try it out should canvas attempts not meet my expectations or when I free up more time.

Unfortunately I have and still am working on modifying this particle example but my endeavors fall way too short. Though getting reconfirmation that it's most likely the path I have to take does make me slightly more confidant in continuing to a point where I find acceptable.

Ahh excuse my green on this forum. I am unsure how to recreate the fountain effect of the audio frequency. I have attached a gif of the animation I am looking for specifically. I am using react and running the following to generate the frequency bars: drawVisualizer = () => { let barPadding = 1; let progress = (this.audio.currentTime / this.duration); let growth = `${(progress * this.canvasWidth)}px` this.overlay.style.width = growth; this.bar.style.width = growth; if (this.ctx) { requestAnimationFrame(this.drawVisualizer) let freqByteData = new Uint8Array(this.analyser.frequencyBinCount); this.analyser.getByteFrequencyData(freqByteData); let barWidth = (this.canvasWidth / freqByteData.length) - barPadding; this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight); for (let i = 0; i < freqByteData.length; i++) { let x = i * barWidth * 2; this.shift(x - 1, 0, barWidth + 2, this.canvasHeight, 0, freqByteData[i] / 12); this.ctx.save(); this.ctx.fillStyle = 'red'; this.ctx.fillRect(x, this.canvasHeight - freqByteData[i] / 12, barWidth, freqByteData[i] / 12); this.ctx.restore(); this.ctx.fillRect(x, this.canvasHeight - freqByteData[i] * .9, barWidth, freqByteData[i], this.canvasHeight / 100); } this.shift(0, 0, this.canvasWidth, this.canvasHeight, 0, -this.canvasHeight / 30) } }; I am having trouble recreating the shooting water effect. The bars are in multiple pieces and they have a physics effect I am unable to replicate.

I am trying to improve my CSS animation skills by recreating concepts I find on dribble but this one is giving me a hard time: https://cdn.dribbble.com/users/73241/screenshots/3543071/attachments/787158/att_split_00.gif I am unable to figure out how to recreate the sound visualizer's effect. I am able to setup a normal sound visualizer with bars for the frequencies but I am unsure how to approach the special effect or know if it's even possible. I have been using "shooting fountain" as a reference for it's animation but surely I have it's terminology/description wrong. Currently I am using canvas to setup a mock for it but the effects are far too complex for my experience so I am trying to find alternative methods to replicate the effect. I am looking at potentially using the GSAP's physics plugin to simulate the gravity and draw the particles themselves but I am unable to find any references to study from. I appreciate any suggestions or references that can better help me achieve similar results. Thank you for your time.