https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ee0820d1-d293-4d72-a927-5dc7f95b2896/Untitled.png

const N = 20
let step

function setup() {
  createCanvas(400, 400)
  step = width/N
  frameRate(1)
}

function draw() {
  background(220)
  randomSeed(frameCount)
  for(let i=0;i<N;i++){
    for(let j=0;j<N;j++) {
      let reverse = random([0,1])
      // rect((i+1*reverse)*step, j*step, (i+1-1*reverse)*step, (j+1)*step)
      line((i+1*reverse)*step, j*step, (i+1-1*reverse)*step, (j+1)*step)
    }
  }
}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bcaff73c-9248-4918-aae6-e26e93c004e7/Untitled.png

const N = 100
let step

function setup() {
  createCanvas(300, 300)
  step = width / N
}

function draw() {
  randomSeed(0)

  background(220)
  for (let j = 0; j < N; j++) {
    for (let i = 0; i < N; i++) {
      let reverse = random([0, 1])
      line(i * step + step * reverse,
        j * step,
        i * step + step * (1 - reverse),
        j * step + step)
      // text(`x1=${i * step} y1=${j * step}`, i*step, j*step + 10)
    }
  }
}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d437e015-4656-4498-9d5d-194bf07b5fc1/Untitled.png

const N = 10
let step

function setup() {
  createCanvas(300, 300)
  step = width / N
  // console.log(random([0, 1]))
}

function draw() {
  // randomSeed(0)

  background(220)
  for (let j = 0; j < N; j++) {
    for (let i = 0; i < N; i++) {
      push()
      translate(i*step + step/2, j*step + step/2)
      circle(0, 0, step*.9)
      fill(0)
      translate(0.5 * step * (noise(i, j+999, 
                                    frameCount / 50)*2-1),
                0.5 * step * (noise(i, j    , 
                                    frameCount / 50)*2-1))
      circle(0, 0, step*.25)
      pop()
    }
  }
}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c7a6c64d-86d9-43e9-8f37-b43de7f154e7/Untitled.png

const N = 10
const speed = .005
let step

function setup() {
  createCanvas(300, 300)
  step = width / N
  // console.log(random([0, 1]))
  noFill()
  strokeWeight(5)
}

function draw() {
  randomSeed(0)

  background(220)
  for (let j = 0; j < N; j++) {
    for (let i = 0; i < N; i++) {
      push()
      translate(i * step, j * step)
      if (noise(i, j, frameCount*speed) < .5) {
        arc(0, 0, step, step, 0, PI/2, OPEN)
        arc(step, step, step, step, PI, PI+PI/2, OPEN)
      } else {
        arc(step, 0, step, step, PI/2, PI, OPEN)
        arc(0, step, step, step, PI+PI/2, 0, OPEN)
      }
      pop()
    }
  }
}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/703239fb-3b46-4a84-ae3a-6f0fbd05dffe/Untitled.png

let step, x2, N = 40

function setup() {
  createCanvas(400, 400)
  step = width / N
}

function draw() {

  background(220);
  for (let i = 0; i < N; i += .5) {
    line(
      step * floor(i+.5),
      0,
      step * floor(i) + step / 2,
      height)
    // line(step * 0, 0, step * 0 + step / 2, height)
    // line(step * 1, 0, step * 0 + step / 2, height)
    // line(step * 1, 0, step * 1 + step / 2, height)
    // line(step * 2, 0, step * 1 + step / 2, height)
    // line(step * 2, 0, step * 2 + step / 2, height)
    // line(step * 3, 0, step * 2 + step / 2, height)
    // line(step * 3, 0, step * 3 + step / 2, height)
    // line(step * 4, 0, step * 3 + step / 2, height)
  }
}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d5bbfd2c-db5b-43bd-8a7b-ff7dc8d4a5ba/Untitled.png

let step, x2, N = 4

function setup() {
  createCanvas(400, 400)
  step = width / N
  noFill()
}

function draw() {
  background(220)
  beginShape()
  for (let i = 0; i < N; i += 1) {
    vertex(i*step + 0,0)
    vertex(i*step + step/2, height)
    vertex(i*step + step,0)
  }
  endShape()
}

Через синусоиду

let step, x2, N = 4

function setup() {
  createCanvas(400, 400)
  noFill()
  s = N * 2*PI / width
}

function draw() {
  background(220)
  beginShape()
  for (let x = 0; x < width*2; x += PI/s) {
    let y = height/2 - cos(x*s)*height/2
    // circle(x,y,2)
    vertex(x,y)
  }
  endShape()
}