sin()

With the sin() function you can generate a float between -1 and 1. It takes only one parameter. I call this parameter driver in the following.

// Processing
float wave = sin(driver);

// p5.js
let wave = sin(driver);

The driver parameter controls where exactly the output value is located. In the following example I use the frameCount as parameter. I use the output value wave to control the x-position of the rectangle.

Processing

void setup() {
  size(1000, 500);
  fill(#FFFF00);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  float wave = sin(frameCount);
  rect(wave, 0, 15, 400);
}

P5.js

function setup() {
  createCanvas(1000, 500);
  fill("#FFFF00");
  rectMode(CENTER);
}

function draw() {
  background(0);
  translate(width/2, height/2);
  let wave = sin(frameCount);
  rect(wave, 0, 15, 400);
}

For the subtle tremor to become a clean, smooth wave motion, exactly two more steps are needed.

First: As I already mentioned, the output value wave moves between -1 and 1. This is a very small range of values, which is the reason why the rectangle in the center only trembles. There is a very simple solution for this: With a multiplication of the output value wavethe range of motion can be widened.

Processing

void setup() {
  size(1000, 500);
  fill(#FFFF00);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);
  float wave = sin(frameCount) * 400;
  rect(wave, 0, 15, 400);
}

P5.js

function setup() {
  createCanvas(1000, 500);
  fill("#FFFF00");
  rectMode(CENTER);
}

function draw() {
  background(0);
  translate(width/2, height/2);
  let wave = sin(frameCount) * 400;
  rect(wave, 0, 15, 400);
}

Second: Now the radius of motion is much wider. However, the rectangle moves so fast that it is difficult to recognize a wave motion here. This is because the developers of Processing have specified that the parameters of the functions sin(), cos() and tan() are given in radians values. What this means in detail is not so important here for the time being. What is important is that in our case we want to specify the value in degrees, because this way the sin() function generates a complete, clean sine wave motion in a runtime of 360 frames.

Side note: The fact that the number 360 appears here is no coincidence, because basically we are dealing with angle measures here.

In Processing there is a function that converts radians values into degree values. This is simply called radians(). I use this in the following example by defining another variable.

Processing

void setup() {
  size(1000, 500);
  fill(#FFFF00);
  rectMode(CENTER);
}

void draw() {
  background(0);
  translate(width/2, height/2);

  float deg = radians(frameCount);
  float wave = sin(deg) * 400;
  rect(wave, 0, 15, 400);
}

P5.js

function setup() {
  createCanvas(1000, 500);
  fill("#FFFF00");
  rectMode(CENTER);
}

function draw() {
  background(0);
  translate(width/2, height/2);

  let deg = radians(frameCount);
  let wave = sin(deg) * 400;
  rect(wave, 0, 15, 400);
}

And as you can see, we have a clean, fluid wave motion here. This is the foundation for many applications.

---

Related Links

• Waves

Language Comparison

Processing	p5.js
sin()	sin()
radians()	radians()
frameCount	frameCount