Learn creative coding writing simple programs

43. Animate using sin(). Less math thanks to map()

This time we use the sin() function to animate a circle. In our example it will move smoothly from left to right and then back, repeating this motion again and again.
The sin() function returns a number between -1 and 1. The noise() function returns a number between 0 and 1. All these numbers are too small for measuring pixels and drawing things on the screen. That's why we have to multiply those numbers to make them larger.
Since the sin() function returns negative and positive numbers, it can be a bit tricky to convert them into interesting numbers we can use to draw things on the screen.
That's why we learn to use the map() function, which converts one number from a given range to another number in a new range. For example, it allows us to convert numbers coming out from the sin() function, which are in the -1 to 1 range, into a number which is in the 0 to 400 range, much better for drawing things on the screen.

Tags:

Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
  Do `float` and `int` smell similar?
To highlight code blocks, use ```processing and ``` like this:
  ```processing
  void setup() {
    size(600, 600);
  }
  ```