# Mathober2023_Movable&Radial

# RadiatingCircles

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

## Poem

```ocaml
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

<iframe width="560" height="315" src="https://www.youtube.com/embed/l4PFavrjjL4?si=AhFXdNfP6j3VGf90"></iframe>

## P5js Code

```javascript
//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());
  }
}

```