tan()

So far we have looked at the sin() function, which can be used to generate smooth, round waves. The tan() works syntactically exactly the same, with the difference that it generates a different kind of wave.

Let me explain it visually: the tangent wave moves with momentum beyond the range of values -1 and 1 to infinity, thus disappearing from the sketch window, only to re-enter on the opposite side.

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 = tan(deg) * 50;
  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 = tan(deg) * 50;
  rect(wave, 0, 15, 400);
}

---

Language Comparison

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