How can I code this animation in processing?

Jinbread

Hi, I am trying to draw this animation in the processing, but maybe too complicated for me. Are there any examples that I can start from? Or is it bad idea to try it on processing? Looking forward to get some answers! Thanks in advance.

Chrisir

Processing is your best bet here.

How to approach this

• Try to break the task down into single steps

• Start by describing exactly what you see: there are 2 circles and....

• How would you explain what to do to a pretty dumb friend?

• Start by doing one circle alone first.

• Read the tutorial on trigonometry and play with the examples https://www.processing.org/tutorials/trig/

• Try drawing a circle without animation

jeremydouglass

@Jinbread -- In addition to @Chrisir's very good advice:

After making one circle, try making a shape that is wobble all the way around (not just half-wobbly). How would that work?

Make it without spinning. Then try to combine half-smooth, half wobbly. Then try to make it spin. Then make two of them that spin. Break the problem into parts, and solve each part before moving on.

You are working with curves / sin waves, but you might also consider related examples like drawing regular polygons:

• https://processing.org/examples/regularpolygon.html

kfrajer

Or is it bad idea to try it on processing?

As a matter of fact, P3 would be a good tool to do this. You just need to design the algorithm... the fun part.

Can you generate your own demonstration of a sine function in Processing? Are you familiar with the concept of frequency, amplitude and phase for --this-- waveform?

This is a good start: https://processing.org/examples/sinewave.html

Few tasks you need to do:
1. Increase the number of peaks shown: What parameter do you need to adjust for this?
2. Adjust the amplitude so the center sees the maximum amplitude and the edges sees zero amplitude.
3. Can you draw a second wave on top of the first one?
4. Finally, apply a phase to the second phase

The net stage is to move from a line into a circle. This means that you need to map your X axis into an angle. The X axis' range is from 0 to width, where width is the width of your sketch. The angle ranges from 0 to TWO_PI. There is not better function for this operation than using map(). So using map, you can project a line into the perimeter of a circle. If the line is described by a sine function, then it follows that the perimeter of the circle is described by this same function.

Check the reference for (really all what you need): sin, map, vertex/curvevertex,point/strokeWeight

Kf