Skip to content

Sine ribbon

A flowing, wavy ribbon of lines

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  let t = millis() * 0.00832
  let p = 100
  let f = (a, k) => sin(a * 15) * (0.2 + 0.01 * sin(t * 4))*0.5 + sin(k/12*PI*2+a*15 + t)*0.05
  let fx = (a, k) => f(a, k) * log(1+abs(a)) * 4 + a * 0.6
  let fy = (a, k) => f(a, -k) / 2 - a * 0.9
  
  noFill()
  stroke(10)
  for (let k = 0; k < 12; k ++) {
    beginShape()
    for (let i = -6; i <= p + 6; i ++) {
      let a = (i + t % 1) / p * 2 - 1
      vertex((fx(a, k) + 1) * 200, (fy(a, k) + 1) * 200)
    }
    endShape()
  }
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/iIJfD0qTw)

Experiments tagged p5 (73/85)

Experiments on this site (73/85)