U4 LA 3.1 Sinus en cosinus

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 Sliders en Spiralen

In de voorbeeld code zijn 4 variabelen met een vaste waarde neergezet. Maak nu voor elk van deze variabelen een slider in de sketch.

Met deze slider ga je spelen met de waardes totdat je een spiraal hebt in plaats van een cirkel.