2 min read

somewhere here

a green and blue 12-rotational symmetry mandala wit sketch-like texture that almost looks like water. There is brighter greens in the center and strokes of varoius colors throughout.

A coded poem and track

The Track:

Initiated on a piano, and realized on an OP-1 Field.

audio-thumbnail
somewhere here
0:00
/101.30285714285715

The Visual:

Clean coded in p5js with p5sound - enjoy in fullscreen.

Click here for the visual with music - (CW: Strobing effects).

The Coded Poem (that makes the visual):

Play with the code on here. The variable names, meaning, and comments work together.

let somewhere; //within
let t = 0; //the time of here
let exist = []; //exist
let waves = []; // in waves of sound
let playBool = false; //that play
let spectrum = []; //on the spectrum of thought

function preload() {
  somewhere = loadSound("https://assets.codepen.io/4559259/hexagonal.mp3");
  //brought into being
}

function setup() {
  userStartAudio(); //and enabled to breathe
  createCanvas(windowWidth, windowHeight); //with an emptyness
  describe(description); //accessible to all
  fft = new p5.FFT(); //that is filled
  spectrum = fft.analyze(); //with waves
  waves = fft.waveform(); //of beauty
  for (let i = 0; i < spectrum.length; i++) {
    exist.push(new ChannelsOfFlowingThought(i, (width / 25) * 10)); //realized in channels individually flowing
  }
}

function draw() {
  background(40, 50, 60, 3); //with each moment the last fades
  translate(width / 2, height / 2); //still centered
  t += 0.001; //but ephemeral
  if (playBool) {
    //if it is to be
    if (!somewhere.isPlaying()) {
      somewhere.play(); //somewhere is here
    }
  } else {
    somewhere.pause();
  }
  becoming(); //from an origin
  push();
  xS = 1 + 0.5 * cos(t); //from a horizon
  yS = 1 + 0.5 * cos(t / 4); //from a sky
  scale(xS, yS); //realized in perspective
  for (let i = 0; i < exist.length; i++) {
    exist[i].reveal(); //and revealed
  }
  pop();

  initiate(); //but only if sought
}

function becoming() {
  spectrum = fft.analyze();
  waves = fft.waveform();
  for (let i = 0; i < spectrum.length; i += 1) {
    for (let j = 0; j < 7; j++) {
      push();
      noStroke();
      rotate((j * 3120) / 7);
      exist[i].incrementInTime(12 * cos(spectrum[i] / 12 - i), waves[i] * 100);
      pop();
    }
  }
}

class ChannelsOfFlowingThought {
  constructor(theta, r) {
    this.theta = theta;
    this.r = r;
    this.r1 = r;
    this.d = 0.1;
    this.s = 1;
    this.a = 0;
    this.b = 0;
  }
  reveal() {
    let f =
      55 * abs(cos(this.d + this.r + this.a - t / 3)) + 40 * cos(this.a / 100);
    let g = 120 + 50 * cos(t);
    stroke(g / 2 + f * sin(this.a + t / 1000), g + f, 95 + f, 10);
    strokeWeight(0.2 + this.b / 10);
    for (let i = 0; i < 12; i++) {
      push();
      rotate((i * PI) / 6);
      line(
        this.s * this.r * cos(PI / 3 + t + this.theta / 12),
        this.s * this.r * sin(PI / 3 + t + this.theta / 12),
        this.s * this.r * cos(t + this.theta / 12) -
          this.s * this.r * sin(t / 4 + this.theta / 12),
        this.s * this.r * sin(t + this.theta / 12)
      );
      pop();
    }
  }
  incrementInTime(a, b) {
    this.s = cos(a / 15 + cos(b / 200));
    this.d = b;
    this.r = 20 + abs(this.r1 + 20 * cos(b * this.a));
    this.a = a;
    this.b = b;
  }
}

function mousePressed() {
  if (getAudioContext().state !== "running") {
    getAudioContext().resume();
  }
  background(50, 60, 70);
  playBool = !playBool;

  return false;
}

function touchStarted() {
  playBool = !playBool;
  background(50, 120, 70);
  return false;
}
let description =
  "lines drawn sketchely in rotational symmetry that change, pulse, rotate, and move with music once started. the aspect changes over time to almost look like a galaxy spinning - there is blur that gives an almost water effect with the lines. It's a mandala that changes with sound with 12 rotations. ";

function initiate() {
  if (!playBool) {
    push();
    fill(50, 60, 70);
    translate(0, height / 2 - 50);
    triangle(-20, -20, -20, 20, 20, 0);
    pop();
  }
}

Coded poem

Want to become a better programmer? Join the Recurse Center!

Sophia

Mathematics educator and creative coder exploring the beauty of mathematical concepts through interactive visualizations and playful learning.

Mathematics

Education

Creative Coding