// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––
// Audiovisual Study
// Andreas Pirchner, 2018
// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––


// This p5.js sketch generates an animated graphical representation of dots that move in circles around a central point.

// The following variables are used to customize the appearance and behavior of the animation:

// mainRadius: The size of the main circle that the dots will move around.
// population: The number of dots that will be displayed on the canvas.
// lineWidth: The width of the lines connecting the dots.
// circleColor: The color of the circle.
// Dots: An array that stores all of the Dot objects that will be displayed on the canvas.
// centerPoint: A vector that sets the position of the center of the main circle.
// centerShift: A vector that sets the position of the center of the bezier curves.
// soundOn: A variable that determines whether the sound is on or off.

// The setup() function initializes the canvas and sets its size, frame rate, and color mode. It also creates the Dot objects and adds them to the Dots array. The buttonFunction() function is called when a button is pressed and allows the user to turn the sound on or off.

// The draw() function is called continuously by the p5.js framework and updates the position of the dots and the lines connecting them. It uses the update() and paint() methods of the Dot objects to change their positions and color. When a dot's lifespan reaches 10, it is killed and a new dot is added to the Dots array. The bezier curve connecting each dot to its match is drawn using the bezier() function. The stroke color of the bezier curve is set based on the color of the dot.

*/
// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––

var mainRadius = 250; // The mainRadius variable sets the size of the main circle that the dots will move around.
var population =10; // The population variable sets the number of dots that will be displayed on the canvas.
var lineWidth = 2; // The lineWidth variable sets the width of the lines connecting the dots.
var circleColor; // The circleColor variable sets the color of the circle.
var Dots = []; // The Dots array will store all of the Dot objects that will be displayed on the canvas.
var centerPoint = new p5.Vector(mainRadius+5, mainRadius +5); // The centerPoint vector sets the position of the center of the main circle.
var centerShift = new p5.Vector(centerPoint.x-50, centerPoint.y-50); // The centerShift vector sets the position of the center of the bezier curves.
var soundOn = true; // The soundOn variable determines whether the sound is on or off.

function setup() {
    var canvas = createCanvas(mainRadius2+10, mainRadius2+10);    // This sets the size of the canvas to be mainRadius*2+10 pixels wide and tall.
    canvas.parent('sketchone'); // This sets the canvas to be a child of the element with id "sketchone".
    frameRate(14);    // This sets the frame rate of the animation to be 14 frames per second.
    colorMode(HSB); // This sets the color mode to HSB (Hue, Saturation, Brightness)
    // Create the dot objects and add them to the Dots array
    for (var i = 0; i < population; i++) {
    Dots[i] = new Dot(random(TWO_PI), random(-0.005,0.005), mainRadius, random(10, 50));
    }
    // Set the match for each dot
    for (var i = 0; i < Dots.length; i++){
    Dots[i].setMatch();
    }
    
    strokeCap(SQUARE); // Set the stroke cap to be square
    rectMode(CENTER); // Set the rectangle mode to be centered
    circleColor = color(0, 10, 70, 0); // Set the initial color of the circle
    button = createButton('turn sound off'); // Create the button to turn the sound on and off
    button.position(width-400, height - 200);
    button.mousePressed(buttonFunction);
}

// The function is called when the button is pressed
 function buttonFunction(){
    if(soundOn == true){
       button.html("turn sound on");
       soundOn = false; 
       for (var i = 0; i < Dots.length; i++){
          Dots[i].whiteNoise.stop();        
        }
    }else{
       button.html("turn sound off");
       soundOn = true;
       for (var i = 0; i < Dots.length; i++){
          Dots[i].whiteNoise.start();     
        }
    }
  }

function draw() {
  background(255);
  //fill(circleColor);
  //stroke(0,0.3);
  //strokeWeight(1);
  //ellipse(205,205,mainRadius*2, mainRadius*2);
  fill(0);
  for (var i = Dots.length-1; i >= 0; i--) {
  	Dots[i].update();
  	Dots[i].paint();
  	if (Dots[i].getLifespan() <= 10){
  		Dots[i].kill();
  		Dots.splice(i,1);
  		Dots.push(new Dot(random(TWO_PI), random(-0.005,0.005), mainRadius, random(10, 50)));
  		Dots[Dots.length-1].setMatch();
  	}
  	stroke(0, 60);
  	strokeWeight(lineWidth);
  	noFill();
  	xStart = Dots[i].x;
  	yStart = Dots[i].y;
  	xGoal = Dots[Dots[i].getMatch()].x;
  	yGoal = Dots[Dots[i].getMatch()].y;
  	if (Dots[i].getColor() != undefined){
  		stroke(Dots[i].getColor());
  	}

  	for (var j = 0; j < 10; j++) {
  		var difference = Dots[i].differences[j];
        var diff = 100;
  		bezier(xStart, yStart , centerShift.x+difference,centerShift.y+difference,centerShift.x+difference,centerShift.y+difference,xGoal, yGoal);
  	}
  }
}