P5JS eksempler, sirkler!

Dette eksempelet skal vi lage følgende animasjon.

For å begynne på konstruksjonen ønsker vi først å animere en sirkel og et punkt som følger rundt sirkelperiferien. Dette gjør vi på følgende måte

Se kode FIXME: ER I JS

let tid = 0; // Setter tid til en variabel
let l = 400; // Lengde på lerret
let b = 400; // bredde på lerret
let radius = (l / 2) * 0.8; // radius til sirkelen

function setup() { // Denne koden kjøres en gang for å lage lerretet vår
  createCanvas(l, b);
}

function draw() {
  background(0); // setter bakgrunnen sort
  noFill(); // nofill 
  strokeWeight(4); // setter tykkelse på linjer
  stroke("blue"); // setter farge på linjene
  circle(l / 2, b / 2, radius * 2); // lager en sirkel
  noStroke(); // fjerner linje langs kanter av figurer
  fill(255); // fyller figurer helt hvite
  circle(l / 2 + radius * cos(tid), b / 2 + radius * sin(tid), 10); // lager sirkel
  tid += 0.01 // økter tiden med 0.01
}

Roterende sirkel

Denne ideen kan vi nå bruke til å blabla osv osv

Rullende sirkel

Rullende sirkel med “trace”

Rullende sirkel uten støy

Omgjort til graf