Rotating Barber Poles

I wanted to create the illusion of a rotating barber pole.
The trick is to move the pole along a segment's width and repeat.

I used anime.js for this but it can all be done in CSS.

To work out the translation values, measure the displacement H & V of two adjacent repeats (red-white, red-white-blue-white).
I used 32px H, 32px V and (27.8, 16) (H,V), which is 32px at 30deg.
If you change the segment width or the angle, you have to recalculate.

Attachment 133377

I assumed the USofA uses RWB for their poles.

Acorn

Not quite a barbers pole:

Another version:

CROSS-POSTED
Two things Egg.

For barbers-pole.xar:
You needed to made the covers PNG.
The displacement needs to be 42.2px and not 31px; it jumps too much otherwise.

I might change the easing to 'steps(2)'.

Acorn

Egg, for -2.xar, I like the left-most one.
I'd certainly move over for that one.

Acorn

Cheers Acorn. I liked the jump in the first one so I left it in. Yes, the left police cars lights are the best.

Anyway, having fun with this. Here's a demo of an archimedes screw:

DEMO

Quote:

---

Originally Posted by Egg Bramhill

Cheers Acorn. I liked the jump in the first one so I left it in. Yes, the left police cars lights are the best.
Anyway, having fun with this. Here's a demo of an archimedes screw:
DEMO

---

Really good Egg. The static design is a winner on its own.

Add in the ball rotating as it goes along.

Acorn

I don't know if I see it as it should be in ver 19 but what I see is clever egg :)

Thanks HD & Acorn, it was fun doing it.

Quote:

---

Add in the ball rotating as it goes along.

---

I was trying to achieve the same effect Acorn as well as perhaps a little jump vertically but I haven't been able to achieve that yet.

Egg, this might help:

anime({
targets: '.ball',
translateX: 1030,
keyframes: [
{translateY: 5},
{translateY: -2},
{translateY: 3},
{translateY: -3},
{translateY: 7},
{translateY: 2},
{translateY: -2},
{translateY: 6},
{translateY: -3},
{translateY: -4}
],
rotate: '5turn',
easing: 'linear',
duration: 20000,
direction: 'normal',
loop: true,
});


I also had fun making the ball instead as a rolling, rotating eyeball.
Something Gary might appreciate.

Acorn

Thanks Acorn. I worked out the ball rotation on my own thanks and I've updated the demo.

I'll give the keyframes a go next ;)

Update: Okay, I've added the keyframes and they work well cheers. I've only applied small amounts of Y axis movement, max 3 to -3.

What I like about this is that the whole thing is nearly all svg and the only two things that are bitmaps (tiny at that) are a feathered rectangle that gives the illusion of rotation and another white rectangle with a linear transparency.



UPDATED DEMO

:cool:

I'm going to be cheeky now and say, as archimedes screws were historically used to move things from one elevation to another [eg water], perhaps that could be done; the ball could even go down a chute and back up again... :D

@handrawn, you've got to recall Egg's nautical interests. He's going to build an AC-driven boat any minute now.

Acorn

Not cheeky at all HD. Making a screw bringing up water was my original plan but I thought I'd do it the easy way first........

No A/C boats at the moment but just messing with inclines and live copies.

DEMO

it's all uphill from now on ;))

Just for you HD:

LINK

:-bd
love it :D

Wonderful, Egg!

Thank you ;)

Here's the final version. I was unhappy with the water discharge animation (and the part empty screws had a slight jump) so I deleted them and added a different discharge. Added a hand to the handle and beefed up the anemic heron clip-art.

FINAL VERSION

HELP Acorn.....

I can't get this motion path working in anime. What am I missing please?

Egg, change to targets: '.dory2',

Acorn

Acorn, thanks that works fine but the Y value is dictated by the ending y value, not the starting y value. Any idea?

Quote:

---

Originally Posted by Egg Bramhill

Acorn, thanks that works fine but the Y value is dictated by the ending y value, not the starting y value. Any idea?

---

Egg, it is complicated.

My cheat way is to place a small marker on the line start and move the shape and line horizontally or vertically until you get a snap on the end point.
I then bring the line back to it original position if it is a feature part of the design.
It is the difference in height from start to end or width across that you need and this 'calculates' it for you.

To make the shape run along the line the start point should coincide with the centre of the shape.

Another method is to use a Timeline and a short Translate to move the shape to its "offset" and the second part to run the main animation.
As the path() values return units in px, you could code these out, add in the offset and return the sum in px.
The last method should use transformOrigin but I have, as yet failed to get this aligned.

Acorn

Cheers for that Acorn, I see that it's a 'bug' that a few Anime users have come across. I did a similar exercise as you and I've got it to work perfectly now. If you refresh my last demo you can see the fish jump out the top of the screw.

Egg, I like it so much that I added a Slow and Fast (and Stop) to your design.
The concept is simple.

A Link can take javascript: anime.speed=0.1; for Slow - the value 1 is normal speed, 0 is Stop and I even tried 10 for your screw!
Anyone can put these statements directly into the browser address without needing access to the design.

Acorn

What, like this ?:

https://parkeston.com/tg/archimedes-screw/index.htm?javascript:20anime.speed=10;

This doesn't work for me Acorn. It would be great if it did as syncronising the timings can be very boring at normal speed.

I've done a final amendment removing the gearbox which was a cheat in the first place ;)

https://parkeston.com/tg/archimedes-screw/

Egg, just the javascript part in the browser address bar or as the Link in your design.

Attachment 133396

Acorn

Acorn, it must be a senior moment but I just don't follow???

Quote:

---

Originally Posted by Egg Bramhill

Acorn, it must be a senior moment but I just don't follow???

---

Egg, two approaches.

For a casual viewer, they type in javascript: anime.speed=0.1; directly into their browser as shown in the picture.speed=0 is Stop, speed=1 is normal...

For you, the designer, add the same as a Link to any object visible on your design page.

Acorn

Cheers Acorn. I can see the designers option with no option.

However the casual viewers option typing javascript: anime.speed=0.1; into the browser address bar does nothing & hitting return/enter only brings up a google search page???

Egg, probably Firefox again. Put the word void after the colon and try that.

UPDATE: FF removes javascript: automatically, preventing scripts to run from the address bar.
No way round it AFAICS.

Acorn