How can I code this animation in processing?

Answers

• Chrisir

  March 2018 edited March 2018 Answer ✓

  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

  March 2018 edited March 2018

  @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

  March 2018

  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