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:

var angle = 0.0;

function setup() {
  createCanvas(300, 120);
  angleMode(DEGREES)
}

function draw() {
  background(0);
  var sineValue = sin(angle);
  var y = map(sineValue, -1, 1, 0, 120);
  ellipse(150, y, 40, 40);
  angle += 1;
}

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.