Parametric Sinc/Cos Lines

// by m8tyhorst

​

/*

Inspiration: https://www.youtube.com/watch?v=LaarVR1AOvs

Basic Code: https://editor.p5js.org/mawi1005/sketches/8EKy9Zdsl

Dise Skizze ist eine adaptierte Version des Basic Codes.

Basierend auf parametrische Gleichungen. Zwei Gleichungen, eine für x und eine für y. Die Bewegung wird von Sinus und Cosinus beeinflusst.

*/

let t = 0;

let tr = 0;

let tg = 10;

let tb = 20;

let num_lines = 50; //versucht die Anzahl der Linien zu erhöhen

function setup() {

  createCanvas(windowHeight, windowWidth);

}

​

function draw() {

  background(20);

  //hier wird wieder die Farbe mit nois() generiert

  let r = map(noise(tr), 0, 1, 0, 255);

  let g = map(noise(tg), 0, 1, 0, 255);

  let b = map(noise(tb), 0, 1, 0, 255);

  stroke(r, g, b);

  strokeWeight(1);

  noFill();

  translate(width / 2, height / 2);

  let i = 0;

  while (i < num_lines) {

    //Die x und y-Koordinate bekommen wir aus den unten stehenden GLeichungen

    line(x1(t + i), y1(t + i), x2(t + i), y2(t + i));

    line(x2(t + i), y2(t + i), x1(t + i), y1(t + i));

    line(y2(t + i), x2(t + i), y1(t + i), x1(t + i));

    line(y1(t + i), x1(t + i), y2(t + i), x2(t + i));

    i++;

  }

​

  t++;

​

  tr += 0.09;

  tg += 0.09;

  tb += 0.09;

  frameRate(10);

}

/*Die Gleichungen sind eine zufällige Kombination aus sin() und cos()*/

function x1(t) {

  return sin(t / 10) * 100 + sin(t / 50) * 10;

}

/*     sin(t/10) bestimmt die Frequenz, versucht mal verschiedene Werte auch mal so was wie sin(t*4)

  während der Faktor, der hinter jedem sin oder cos Kommando steht, die Amplitude verändert

  Versucht auch mal die ganzen Teile der Gleichungen zu verändern, löscht was und fügz etwas hinzu*/

function y1(t) {

  return cos(t / 10) * 100;

}

function x2(t) {

  return sin(t / 10) * 100 + sin(t / 10) * 100 + cos(t / 40);

}

​

function y2(t) {

  return cos(t / 20) * 500 + sin(t / 10) * 100 + cos(t / 40);

}

​