Fill a bottle

[BFreakout 2 Likes (Newbie)]

Hello Community,
I am currently working on an open source community project. It is a game (www.rxjs-fruits.com) - Here fruit is supposed to fall into a funnel and the liquid is to be poured into a bottle. I have now got the SVG graphic for a bottle from a designer. Somehow I just line up too stupid to have the bottle filled. Does anyone have any idea how I can best solve this?



Maybe also how I can drop the fruit more beautifully off the assembly line? As a non-designer, I make it really difficult here.

bottle.svg

[BFreakout 2 Likes (Newbie)]

Okay, I solved it.. I add a new white layer and add an clipPath... then I animate it with to set an attr and height value.
But an review of my app with animation are very welcome  

[OSUblake 18,533 Likes (Superhero)]

2 hours ago, BFreakout said:

But an review of my app with animation are very welcome

 

I don't know rxjs. I had to stop at level 7 because I don't understand how to do that. There needs to be some type of hinting, or a way to show the solution.

 

So what is the solution?

 

I also think having to search/replace strings isn't approachable for people trying to learn. That's going to require some googling for some people, and you don't want people to leave your app.

 

[OSUblake 18,533 Likes (Superhero)]

1 hour ago, OSUblake said:

I had to stop at level 7 because I don't understand how to do that.

 

Guess like this.

 

fruits.pipe(

    filter(v => v === "apple" || v === "dirty-banana"),
    map(v => v.replace("dirty-", "")),
    take(2)

).subscribe(fruit => toConveyorBelt(fruit));

 

Level 11 was confusing at first because I didn't see the first elements in the arrays.

 

 

 

Other than that, it's looks pretty good.

 

[BFreakout 2 Likes (Newbie)]

Thank you for testing .. and great that you enjoyed it

The game will not be a complete introduction to rxjs, you would have to put a lot more text into it ... it should support the devs that deal with it a lot more busy and have difficulty understanding it...
 

With the mouse pointer over the codes in the text, show a small note .. otherwise there are the links that explain everything in more detail ..

I also have the version with the bottle online .. can now be filled ..

I'm just waiting for more graphics from the designer .. funnel ... old fruit .. background .. etc.

[BFreakout 2 Likes (Newbie)]

Hey Community,

I got the graphic for the funnel today .. do you have an idea how to visualize a nice liquid with an animation?
So from funnel to bottle? >> https://www.rxjs-fruits.com

On GitHub >> https://github.com/GregorBiswanger/rxjs-fruits

 

[OSUblake 18,533 Likes (Superhero)]

Depends on how much complexity you want to add. I would search on CodePen for stuff like liquid, wave, and goo. 

 

Here's an example that came up.

 

See the Pen bVKXvj by elrumordelaluz (@elrumordelaluz) on CodePen

 

 

[ZachSaucier 7,162 Likes (Superhero)]

Other more simple approaches:

 

[BFreakout 2 Likes (Newbie)]

the bottle is already filled with animation.. but what looks nice from funnel to bottle ... not just a rectangle that moves to the bottle ?!
It doesn't look that great, does it ?!

[BFreakout 2 Likes (Newbie)]

Whereby the example of OSUblake looks really cool ... only that would have to flow in the middle .. definitely derp complex ..

[OSUblake 18,533 Likes (Superhero)]

Something simple would be to just draw a line for liquid pouring.

 

See the Pen 0c07f64cb0f79a29990d5debbab5e948 by osublake (@osublake) on CodePen

 

 

[BFreakout 2 Likes (Newbie)]

Oh that animation sample with wave effect is extremly nice.. is that easy to use the same with GSAP?
https://stackoverflow.com/questions/42013794/svg-water-fill-animation

[BFreakout 2 Likes (Newbie)]

@OSUblake thanks... I will use your sample

[OSUblake 18,533 Likes (Superhero)]

11 minutes ago, BFreakout said:

https://stackoverflow.com/questions/42013794/svg-water-fill-animation

 

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

 

 

[BFreakout 2 Likes (Newbie)]

Mega! Unfortunately, this does not work on my current solution ...

 

Currently I fill my bottle with:

      const bottle = this.bottle.nativeElement.contentDocument.getElementById('fill-rect');

      this.currentBottleHeight = this.currentBottleHeight - (100 / this.fruits.length);

 

      const timeline = new TimelineLite();

      timeline.to(bottle, 1, { attr: { height: this.currentBottleHeight + '%' } });

[BFreakout 2 Likes (Newbie)]

And a part of my SVG:

 

        <defs>

            <clipPath id="cp">

                <rect id="fill-rect" x="0" y="0" width="100%" height="100%" />

            </clipPath>

        </defs>

        <g class="st0">

            <path class="st1" d="M228.3,174.1c-10.5-30.5-15.8-62.5-15.8-94.6v-67H63.9v67c0,32.2-5.3,64.1-15.8,94.6L16,267.7

            C5.5,298.2,0.2,330.2,0.2,362.3C0.2,517,1.4,596.3,3.8,600c0,0,262.4,0,269.1,0c3.9-7.8,5-87,3.4-237.7c0-32.2-5.3-64.1-15.8-94.6

            L228.3,174.1z"/>

            <g id="bottle">

                <path id="full" class="st2" d="M210,179.1l32.2,93.8C252,301.3,257,330.9,257,361v217.2H22.6V361c0-30,5-59.7,14.7-88.2

                l32.2-93.7c11.2-32.7,16.9-66.8,16.9-101.3h106.5C193.1,112.2,198.8,146.3,210,179.1z"/>

                <path id="left" class="st3" d="M138.2,578.2H22.6V361c0-30,4.9-59.7,14.5-88.2l31.8-93.7C80,146.3,85.7,112.2,85.7,77.7h52.5

                V578.2z"/>

            </g>

[ZachSaucier 7,162 Likes (Superhero)]

13 hours ago, BFreakout said:

Unfortunately, this does not work on my current solution ...

Why not?

 

I'm also curious why you're using the GSAP 2 formatting.

[BFreakout 2 Likes (Newbie)]

@ZachSaucier Am I using an older version?
 

I probably put it wrong ... I can't just use the @OSUblake wave effect with my existing code ... I experimented with it a bit .. but unfortunately I don't get it really regulated ... even filling it doesn't look really great... it is an open source community project .. but I would pay someone to help me with it .. just want it to be something great .. every moment my wife can have the baby and I may not get it over time more regulated .. is anyone interested? I would also help with the orientation of the code by remote ..

[ZachSaucier 7,162 Likes (Superhero)]

See this post (and those linked in it) for more information about GSAP 3, the newer and better version  

[BFreakout 2 Likes (Newbie)]

I use gsap 3.2.5 already..

[BFreakout 2 Likes (Newbie)]

I have now tried to animate the liquid from the funnel to the bottle... of course the animation does not go beyond the graphics...

Now a question for you.. what is best practices...

Place all necessary graphics in an SVG and store the animations... or treat individual SVG graphics in a distributed manner?
My only problem is that the fruit has to be added dynamically... which makes everything in a svg a little more difficult... especially if you would prefer a path animation...

Currently I separated it:

[ZachSaucier 7,162 Likes (Superhero)]

On 5/3/2020 at 7:57 AM, BFreakout said:

I use gsap 3.2.5 already..

Yep. I'm wondering why you're using the GSAP 2 formatting. In GSAP 3 there's no Lite/Max flavors, duration is included in the vars, and other improvements like that. The old stuff is just supported for legacy reasons. Read the article I linked to to learn more  

 

23 hours ago, BFreakout said:

Place all necessary graphics in an SVG and store the animations... or treat individual SVG graphics in a distributed manner?
My only problem is that the fruit has to be added dynamically... which makes everything in a svg a little more difficult...

Either way is doable. If they are separate then at times you'll have to use JS to calculate things and resize as appropriate. If they're together you have to spend time on the frontend making sure it sizes the way that you want it to. In general it's best to keep things in the same SVG but there's no rule against separating them.

[BFreakout 2 Likes (Newbie)]

@ZachSaucier thank you for your information! Helped me a lot ...
 

I once set up a prototype and combined all SVG graphics into one SVG graphic using Adobe Illistrator.

I tried to do an animation with a path and motionpath. Unfortunately it doesn't scale at all and the animation doesn't exactly follow the path ...
 

i think i will work with separate svg graphics again. Unfortunately, positioning here is really a problem .. you have to constantly query it with javascrpt and they are not always 100% accurate .. so I don't really get the water in the middle of the funnel ..
 

I'm really frustrated

[ZachSaucier 7,162 Likes (Superhero)]

3 minutes ago, BFreakout said:

it doesn't scale

Recreate it on resize.

 

3 minutes ago, BFreakout said:

the animation doesn't exactly follow the path

I would bet it is, just maybe not what you're expecting  Create a minimal demo if you are looking to get help.

 

4 minutes ago, BFreakout said:

you have to constantly query it with javascrpt

I don't know what you mean here.

 

4 minutes ago, BFreakout said:

they are not always 100% accurate

Again, I bet it is accurate, just not what you're expecting  

 

Talking about things in abstract is not very productive.

[BFreakout 2 Likes (Newbie)]

I think I have now got the animations nice ... I also added a sound ... unfortunately when filling the bottle it does not produce such a beautiful water effect, it does not work as well as in the example of @OSUblake
 

but what is your opinion? Please feedback: https://www.rxjs-fruits.com