We gaan nu een bal laten stuiteren, maar die beweegt niet rechtlijnig (constant). Hij beweegt volgens een sinus-functie. Als je niet weet wat dat is, kijk deze video.

Zoals je weet gaat de sinus tussen -1 en +1. Dus als je die in een sketch wilt gebruiken is de map-functie erg handig. Je krijgt dan deze animatie:

// original by
// Courtney Morgan
// https://editor.p5js.org/cmorgantywls/sketches
// edited for  speed is now reserved word

let angle = 0.0;
let offset = 60;
let scalar = 30;
let mySpeed = 0.05; // speed is reserverd word after version so much

function setup() {
  createCanvas(120, 120);
  background(204);
}

function draw() {
  let x = offset + cos(angle) * scalar;
  let y = offset + sin(angle) * scalar;
  ellipse(x, y, 40, 40);
  angle += mySpeed;
}

Cosinus en Sinus maken een cirkel

Deze eenvoudige code laat de cirkel in een cirkel rond draaien

// original by
// Courtney Morgan
// https://editor.p5js.org/cmorgantywls/sketches

let angle = 0.0;
let offset = 60;
let scalar = 30;
let speed = 0.05;

function setup() {
  createCanvas(120, 120);
  background(204);
}

function draw() {
  let x = offset + cos(angle) * scalar;
  let y = offset + sin(angle) * scalar;
  ellipse(x, y, 40, 40);
  angle += speed;
}

Opdracht Sinus en Cosinus

Als je handig speelt met de 4 variabelen, kun je een supercoole sketch maken. Probeer het uit en lever je coolste oplossing code + screenshot in.

Hieronder mijn versie, die is mooi. Maak zelf een andere mooie.