RadiatingCircles

For this combinational prompt, I will be remixing an old WCCChallenge submission: https://blog.illestpreacha.com/wccchallenge-kandinsk made in P5js for the prompts: Movable & Radial. The effects used are overlaid versions of the sketch that alter how the circles move.

Poem

Energy is spending
Sending into all arrays
All aspects
But now at the intersect
We must decide which way
Will let our mind ease & flow
Glow and gleams
As it slow-ly let outs the steam

Video

P5js Code

//Code Base started from: https://editor.p5js.org/allison.parrish/sketches/Sy7SrYv0-


soundOptions = ['sine','triangle', 'sawtooth', 'square']

class SoundBall {
  constructor() {
    this.x = random(width/1.8);
    this.y = random(height/1.8);
    var soundChoice = soundOptions[Math.floor(Math.random()*soundOptions.length)];
    this.osc = new p5.Oscillator(soundChoice);
    this.osc.freq(random(200, 550));
    this.osc.amp(random(0.15, 0.22));
    this.osc.start();
    this.osc.stop(2);
  }


  display() {
    fill(random(255), random(255), random(255), random(10, 50));
    ellipse(this.x, this.y, 120, 120);
    stroke(random(210,255), random(255), random(255), random(10, 50));
    strokeWeight(8)
    fill(random(255), random(255), random(255), random(10, 50));
    ellipse(this.x, this.y, 90, 90);
     stroke(random(210,255), random(255), random(255), random(10, 50));
    strokeWeight(6)
    fill(random(255), random(255), random(255), random(10, 50));
    ellipse(this.x, this.y, 60, 60);
     stroke(random(210,255), random(255), random(255), random(10, 50));
    strokeWeight(4)
    fill(random(255), random(255), random(255), random(10, 50));
     stroke(random(210,255), random(255), random(255), random(10, 50));
    strokeWeight(4)
    ellipse(this.x, this.y, 30, 30);
    this.x += second() % 6 + 0.2;
    this.y += second() % 6 - 0.2;
  }
}

class Line {
  constructor() {
    this.x1 = random(width);
    this.y1 = random(height);
    this.x2 = random(width);
    this.y2 = random(height);
    this.osc = new p5.Oscillator();
    this.osc.freq(random(100, 500));
    this.osc.amp(random(0.05, 0.2));
    this.osc.start();
    this.osc.stop(2)
  }
  display() {
    line(this.x1, this.y1, this.x2, this.y2);
    stroke(10);
    this.x2 += random(-2,2)
    this.y2 += random(-2,2)
    this.x1 += random(-1, 1);
    this.y1 += random(-1, 1);
  }
}


let soundballs = [];
let Lines = []

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

function draw() {

  background(30 * second() % 7 + 30);
  for (let i = 0; i < soundballs.length; i++) {
    soundballs[i].display();

  }
  for (let i = 0; i < Lines.length; i++) {
    Lines[i].display();  

  }
}
function mouseClicked() {
  soundballs.push(new SoundBall());
}


function keyTyped() {
  //lines
  if (key === "s") {
    Lines.push(new Line());
  }
}