# GAUSS Muppet lab

Inspired by a watch face from @a.rebolino71:

I always loved “Beaker”, this tragic hero!

I hope you enjoy my version:

9 Likes

Speaking of “cute”…

1 Like

I’m glad i have inspirate this new version of Beaker!

1 Like

Hahaha! I love this face

When I was younger I had said I always wanted to name my first kid beaker because he’s the best! I couldn’t talk my wife into it but his nickname is definitely beaker. Check out his soft toys hand made in 2018 from a pattern from the 80s!

4 Likes

Yeah! Beaker rulez! Best one was when they had a cloning machine! Hundreds of Beakers all over.

1 Like

Very cool!

1 Like

THOSE ARE SO AWESOME!!! I love them.

2 Likes

Awe, how sweet.

1 Like

This watch doesnt get enough credit. I think its the greatest creative watch on here. I checked how it was built and Please tell me how you were able to move .png’s like that? I have been limited to just GIF files because I didnt know you can do that. Are you able to tell me how you move them?

1 Like

Thanks a lot!

For sure i can tell you a little bit of the process to create such an animated watch face with .png´s.

Well the code for the animation of the objects isn´t that difficult. It´s mainly sine based movement in x-direction and sine based rotation, sometimes combined.

Some examples

Slow movement for Dr. Honeydew in x-direction for example in the X-field: (300+sin((#DWE#/0.8))*15)

Explanation of the values: 300 is the start position in pixel on the watch face, #DWE# the time based value, /12 the speed operator and *15 the size of the movement.

Slow rotating for Dr. Honeydew in the Rotate-field: (0+(sin(#DWE#/0.3)*6))

Explanation: Same as above but the *6 is the angle of rotation.

The nose has a size changing Animation (breath)

((sin(#DWE#*2)*20)+320)

This formulae must be filled in both the width and height fields

The figure of beeker is cutted by photoshop in single operating pieces (Arms, Nose, pupils, mouth) and saved seperately.

You have to take care at this point where you place your rotation point.

And that´s all.

I hope this mini tutorial will help you and others a little bit to create nice animations.

Greetings, GAUSS.

2 Likes

Thanks a lot for the explination. I am trying it here, and just cant seem to figure that out, even copying and pasting your code just to figure see if it will move.

May be a stupid question but where does the SIN come in? Whats that code do?

I think I am stuck with amateus status designs on this one. The reason I dont do webdesign is code gets in the way

Appreicate the help though.

“sin” is a sinuse function, means a repeating waveform in a mathematical function, up and down, back and forth…

I think I better stick with the templated stuff. Appreciate the time, I will practice, and hopefully master it.

1 Like