Jump to content
Search Community

Cannot figure out how to approach recreating a concept

RenHe test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

Hi @RenHe,

 

Welcome to the forums!

 

The link you have in the GIF url is pointing back to this post, I had to copy and paste it to be able to see what you are referring to.

 

I am a bit lost here on what help you are looking for. What do you mean when you say 'unsure how to approach the special effect'. Have you got a mock of what you are trying to achieve? We will be more than happy to help as much as possible.

 

 

  • Like 2
Link to comment
Share on other sites

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.

audioVis.gif

Link to comment
Share on other sites

Thanks for the clarification. Yeah, that's definitely a challenge. Not something I can whip up quickly for sure. 

Might be worthwhile to study a single particle-emitter and then see if its something that can be replicated and control by your sound wave input

 

As always, @OSUblake has something worth looking at

 

See the Pen oLGBXy?editors=0010 by osublake (@osublake) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Oh yes, that's one tall order. And I'd second @Carl's suggestion - particles and probably some blending.

 

If/When @OSUblake shows up, he'll:

  • show something he's made just after brushing his teeth before going to bed that fits your needs using PIXI or just RAW mental power,
  • blow us away, melt a couple brains,
  • Feel slightly surprised that one/few of us are shocked he didn't even break a sweat.

 

So, start sinking your teeth into PIXI so that when the above happens you've already mastered the basics. :)

  • Like 1
Link to comment
Share on other sites

On 10/18/2017 at 7:53 PM, Carl said:

Thanks for the clarification. Yeah, that's definitely a challenge. Not something I can whip up quickly for sure. 

Might be worthwhile to study a single particle-emitter and then see if its something that can be replicated and control by your sound wave input

 

As always, @OSUblake has something worth looking at

 

 

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.

Link to comment
Share on other sites

On 10/19/2017 at 2:37 AM, Dipscom said:

Oh yes, that's one tall order. And I'd second @Carl's suggestion - particles and probably some blending.

 

If/When @OSUblake shows up, he'll:

  • show something he's made just after brushing his teeth before going to bed that fits your needs using PIXI or just RAW mental power,
  • blow us away, melt a couple brains,
  • Feel slightly surprised that one/few of us are shocked he didn't even break a sweat.

 

So, start sinking your teeth into PIXI so that when the above happens you've already mastered the basics. :)

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.

Link to comment
Share on other sites

Hi @RenHe

 

The animation you're trying to recreate is incredibly difficult. I have lots experience working with canvas/WebGL, and I'm not even sure how I would begin to go about creating that.

 

Maybe based on something like this...

 

See the Pen 907f29eeb4372d0d83c5b6a292d1727b by osublake (@osublake) on CodePen

 

 

For animating regular canvas, here is a thread you should check out. I have a bunch of examples there.

 

However, animating PixiJS is probably going to be easier than regular canvas. It also uses canvas if WebGL isn't available. There's also a PixiPlugin for GSAP.

 

Check out this filter playground for PixiJS. Lots of good stuff!

http://pixijs.github.io/pixi-filters/examples/

 

  • Like 2
Link to comment
Share on other sites

@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:

See the Pen xPKWjz by Renshenhe (@Renshenhe) on CodePen

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.

 

  • Like 1
Link to comment
Share on other sites

I have some ideas on how to do it, maybe using fluids, but I don't know what your skill level is. It might be hard to understand.

 

Speaking of gooey, I just posted some stuff about particles in this thread.

 

Check out the demo I posted using Chrome. Turn off the contrast filter and then set the blur radius low, like around 5-10. It looks like that could probably be used to mimic the look of that animation. The only downside is that filters are only supported in Chrome and Firefox at moment, so no IE/Edge support, and performance in Firefox isn't that great. However, if you were to use PixiJS, that wouldn't be a problem.

 

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

 

 

 

 

  • Like 4
Link to comment
Share on other sites

14 hours ago, OSUblake said:

I have some ideas on how to do it, maybe using fluids, but I don't know what your skill level is. It might be hard to understand.

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.

See the Pen rmNebZ?editors=0010 by hendrysadrak (@hendrysadrak) on CodePen

 

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

 

 

 

 

  • Like 3
Link to comment
Share on other sites

On 10/23/2017 at 8:25 PM, RenHe said:

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.  

 

Good. It's much easier for me to make stuff when I don't have to worry about other people being able to understand everything. 

 

On 10/23/2017 at 8:25 PM, RenHe said:

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.  

 

Can you make a demo of the equalizer like that, with all the bars? I want to see how it moves in its most basic form. I have a couple ideas I want to try. Basically using the normal movement of the equalizer as a particle attractor.

 

On 10/23/2017 at 8:25 PM, RenHe said:

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.

 

Ohhhhh, you wouldn't happen to have a demo of that, would you? I was trying to figure out how to make an acrylic filter, but couldn't find any examples to go by. At the time, all the stuff Microsoft had up on their site was either pre-rendered or for XAML.

 

Link to comment
Share on other sites

On 10/25/2017 at 4:42 AM, OSUblake said:

Ohhhhh, you wouldn't happen to have a demo of that, would you? I was trying to figure out how to make an acrylic filter, but couldn't find any examples to go by. At the time, all the stuff Microsoft had up on their site was either pre-rendered or for XAML.

 

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.

 

On 10/25/2017 at 4:42 AM, OSUblake said:

Can you make a demo of the equalizer like that, with all the bars? I want to see how it moves in its most basic form. I have a couple ideas I want to try. Basically using the normal movement of the equalizer as a particle attractor.

 

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.

  • Like 1
Link to comment
Share on other sites

@OSUblake

Here's what I am currently fiddling with:

See the Pen xPKWJz by Renshenhe (@Renshenhe) on CodePen

 

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.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

 

On 10/27/2017 at 2:04 AM, RenHe said:

I am not sure if there are any available sources for linking mp3 files without stealing bandwidth of the owners.

 

You can find music on wikimedia, like this.

https://upload.wikimedia.org/wikipedia/en/d/d8/You_Spin_Me_Round_by_Dead_or_Alive.ogg

 

I was looking at using metaballs to create a fluid. If you click on the demo, you'll see they are just circles.

https://gamemechanicexplorer.com/#fluid-3

 

Those demos use Phaser, which is a game engine running on top of PixiJS. They have a pretty cool particle system, but it's not free.

http://phaser.io/examples/v2/particlestorm/magic-swirls

 

And here's a pretty cool Pixi demo I came across. How's that look for fluid?

 

See the Pen baf4050f39f9fe67dae51877cbfb835b by osublake (@osublake) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

On 11/7/2017 at 9:07 PM, OSUblake said:

 

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.

See the Pen zPNrbQ by Renshenhe (@Renshenhe) on CodePen

 

  • Like 1
Link to comment
Share on other sites

8 hours ago, RenHe said:

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.

 

What you have looks good, but I think there is a better way to approach this. Think of a meteor burning up in the atmosphere. That's kind of like what water will do if you shoot it up. It starts out as a large blob, and will lose particles as it travels up. So instead of trying to move your particles to a certain point, move a particle emitter to that point, leaving behind a trail of particles. 

 

To give you an idea of what this might look like, I made some quick changes to one of my demos. Move your mouse up and down to mimic water shooting up. What do you think? 

 

See the Pen 890141c7a22aabd57d69ef372be824bd by osublake (@osublake) on CodePen

 

  • Like 1
Link to comment
Share on other sites

On 11/9/2017 at 8:12 AM, OSUblake said:

 

What you have looks good, but I think there is a better way to approach this. Think of a meteor burning up in the atmosphere. That's kind of like what water will do if you shoot it up. It starts out as a large blob, and will lose particles as it travels up. So instead of trying to move your particles to a certain point, move a particle emitter to that point, leaving behind a trail of particles. 

 

To give you an idea of what this might look like, I made some quick changes to one of my demos. Move your mouse up and down to mimic water shooting up. What do you think? 

 

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.

Link to comment
Share on other sites

@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.  

  • Like 1
Link to comment
Share on other sites

Nice! Feel free to post what you have. 

 

Are you moving the particle emitter? That demo I posted was just a quick way to demonstrate the concept. I'll try to make a demo for you in the next day or so to you show you how I've been imagining this could work. 

 

Gravity isn't just a downward force. Particles and emitters can have their own gravitational fields, repelling and attracting other objects. I was thinking about doing some of that. Here's a demo showing how some of those systems work.

 

http://jarrodoverson.com/static/demos/particleSystem/

 

And if you want to expand your knowledge on physics and animation, these are two books I refer back to constantly.

http://a.co/5zhEEYL

http://a.co/hU9qWLl

 

 

Link to comment
Share on other sites

@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.

See the Pen Ebmegw?editors=0011 by Renshenhe (@Renshenhe) on CodePen

 

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.

  • Like 2
Link to comment
Share on other sites

It's looking pretty good.

 

You can check out all the demos and source code for the Foundation HTML5 here.

http://lamberta.github.io/html5-animation/

 

1 hour ago, RenHe said:

it's not a proper demo so be sure to close it when you're done since it'll keep running raf.

 

rAF will actually cutout if you switch windows/tabs. But that brings something I just quickly noticed in your code. You don't have to keep calling Date.now(). rAF passes in the time to the function it calls, so you can pass that value into your objects. 

 

If you want, here's part of a ticker I use. 

 

See the Pen 4fd5fa8676200a13ec86235cc5e122b4 by osublake (@osublake) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

 

16 hours ago, OSUblake said:

rAF will actually cutout if you switch windows/tabs. But that brings something I just quickly noticed in your code. You don't have to keep calling Date.now(). rAF passes in the time to the function it calls, so you can pass that value into your objects. 

 

If you want, here's part of a ticker I use. 

 

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...