Variante1

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

  rectMode(CENTER);

}

​

function draw() {

  background(0,0,0,10);

  //jump to the center of the sketch

  translate(width/2, height/2);

  // mapping of sin over time (-1 ... +1) to -200 ... 200

  //speed is defined by /1200

  let s = map(sin(millis()/1500), -1, 1, -200, 200);

  let sc = map(cos(millis()/500), -1, 1, -100, 100);

  // mappingf sin over time to an angle 0-PI

  let r = map(sin(millis()/5500), -1, 1, 0, PI);

  let c = map(sin(millis()/1000), -1, 1, 0, 50);

  let w = map(sin(millis()/1000), -1, 1, 100, 250);

  fill(255,255,255,10);

  stroke(255); //, c);

  translate(s, sc);

  rotate(r);

  //strokeWeight(c);

  rect(-150, -150, 50, 50);

  rect(-200, -150, 50, 50);

  rect(-150, -210, 50, 50);

  rect(-200, -210, 50, 50);

  ellipse(-150, -155, 10, 10);

  ellipse(-200, -155, 10, 10);

  ellipse(-150, -215, 10, 10);

  ellipse(-200, -215, 10, 10);

  /*

  Anwendungsbereiche:

  Position (x, y)

  Rotation (Winkel)

  Grösse / Skalierung (Breite / Höhe)

  Rundungen rect

  Farbe, Deckkraft

  Outline / strokeWeight

  -> Geschwindigkeit

  */

}