let eyePic;

let x = 0;

let y = 0;

let ang = 90;

let col = 0;

let moveC = 1;

let manip;

var slider;

var song;

var sliderVals = [];

let timtim;

let textFadeIn = 0;

//make slider effect rotate speed - check!

​

var dragging = false; // Is the slider being dragged?

var rollover = false; // Is the mouse over the slider?

​

// Offset for dragging slider

var offsetX = 0;

​

function preload() {

  // soundFormats('mp3');

  //load my background music

  timtim = loadSound("/assets/timtim.mp3");

}

​

// function preloaded() {

// print("preload successful");

// }

​

​

​

​

function setup() {

  timtim.loop();

  sliderVals = [48.8, 48.8, 81.3, 48.8, 67.3, 53.3, 61.3, 81.3, 51.3, 60.3, 48.8];

//92.3, 83.3 is too big

  createCanvas(windowWidth, windowHeight);

  imageMode(CENTER);

​

  //way better than radians!!

  angleMode(DEGREES);

​

  //tyring HSB out

  colorMode(HSB);

​

  //slider object

  slider = {

​

    x: sliderVals[int(random(0,10))],

    y: windowHeight * (16 / 20),

    w: windowWidth / 20,

    h: windowHeight / 22,

    start: windowWidth / 20,

    end: (2 / 11) * windowWidth

  }

​

  // change this number to move the circles farther apart

  manip = 400 / 72;

  //for instance...

  // manip = 2;

​

  textSize(24);

  textAlign(LEFT);

​

​

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

​

function draw() {

​

  randomBackground();

  // image(eyePic, 10, 10);

  Sliders();

  donut();

  instructions();

}

​

function donut() {

​

  //assign variable 'b' to the rotate function in my sketch

  var b = map(slider.x, slider.start, slider.end - slider.w, 0.01, 1);

​

  push();

​

  //diff stroke values are fun with this one

  stroke(100, 100, 40);

​

  //moving the color value

  col += moveC;

  fill(col * 2, 75, 100);

​

  //if color gets greater than or equal to 100 OR color gets less than 0, 

  //change the value at which we move color to negative.  

  //this allows an oscillation.  You can use print(col); to test your values

​

  if (col >= 100 || col < 0) {

    moveC = moveC * -1;

  }

  ang += 5;

​

  //sets up the drawing to oscillate up and down around the center

  let weight = dist(mouseX, mouseY, pmouseX, pmouseY) * 10;

  let transX = windowWidth / 2 + sin(ang * 2);

  let transY = windowHeight / 2 + cos(ang / 3) * 20;

  translate(transX, (transY - 50));

​

​

  //increments the rotation so it moves - remember x = x++ down below

  rotate(x / (b * sqrt(3) / 100));

​

  // comment this out to stop the rotation

  x += 5;

​

  //this FOR loop draws set of ellipses in the shape of a circle. 

  //And 360 / 13 determines is how many I will get, 

  //final numbers found by trial and error

  for (i = 0; i < 360; i += 13) {

    //these ellipse values were found by trial and error.  the fact that cos and sin 

    //work opposite in the x / y planes is what makes the circles be drawn 

    //around the center

    // I used mouseX / mouseY to manipulate the shape of the ellipse

    //try different numbers for manip

    // let manip = PI;

    let ellipseX = windowWidth / 20 + cos(i++) * windowWidth / manip;

    let ellipseY = windowWidth / 20 + sin(i++) * windowWidth / manip;

    let ellipseSize = windowWidth / 20;

    ellipse(ellipseX, ellipseY, ellipseSize * b);

  }

​

  pop();

}

​

function instructions() {

  if (millis() > 5000) {

    textFadeIn+=0.01;

    fill(255,textFadeIn);

    text("slide me", slider.x + 5, slider.y + width/35);

    if (textFadeIn > 100) {textFadeIn = 100}

    // print(textFadeIn);

  }

}

​

function randomBackground() {

  push();

  colorMode(RGB);

  background(random(100, 120), random(200, 50), random(100, 255), sqrt(3));

  pop();

}

​

function Sliders() {

​

  for (i = 0; i < 1; i++) {

    // Is slider being dragged?

    if (dragging) {

      slider.x = mouseX + offsetX;

    }

    // Keep rectangle within limits of slider

    slider.x = constrain(slider.x, slider.start, slider.end - slider.w);

​

    // Draw a background rect for slider

    push();

    colorMode(RGB);

    noStroke();

    // fill(255, 10);

    noFill();

    rect(slider.x, slider.y + (i * windowWidth / 10), slider.w + 50, slider.h, 10);

    pop();

​

​

    // Fill according to state

    // if (dragging) {

    //   fill(50);

    // } else {

    //   fill(50, 50);

    // }

    // Draw rectangle for slider

    noStroke();

    noFill();

    rect(slider.x, slider.y, slider.w + 60, slider.h, 10, 10);

  }

}

​

function mousePressed() {

  // Did I click on slider?

  if (mouseX > slider.x && mouseX < slider.x + slider.w + 50 && mouseY > slider.y && mouseY < slider.y + slider.h) {

    dragging = true;

    // If so, keep track of relative location of click to corner of rectangle

    offsetX = slider.x - mouseX;

  }

}

​

function mouseReleased() {

  // Stop dragging

  dragging = false;

}