References: 

slider help: https://p5js.org/examples/dom-slider.html

more slider help: https://p5js.org/reference/#/p5/createSlider

button help: https://p5js.org/reference/#/p5/createButton

​

​

Goals:

- create a space where users can interact with my different designs and change different aspects about them

- inspiration from Olivia Jack project - hydra

*/

​

let Userchoice, resetButton;

​

//variables for design 1

let angle = 0.9;

let angleSlider;

​

//variables for design 2

let seed = 100;

let rad;

let colorArray = [

  "lime",

  "red",

  "orange",

  "cyan",

  "yellow",

  "purple",

  "magenta",

];

​

// variables for design 3

let gridSlider, colorSlider;

​

//variables for design 4

let a = 0.3;

let b = 0.5;

let t = 0.2;

let colorSliderFour, xValue;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(RGB);

  strokeWeight(1);

  background(0);

​

  //set up for design 1

  angleSlider = createSlider(0.01, 0.5, 0.01, 0.01); //starting value, ending value, initial value to start on, incrimental steps

  angleSlider.size(200);

  angleSlider.position(width / 20, height / 20);

  // text('Angle', angleSlider.x * 2 + angleSlider.width, 40)

  angleSlider.hide();

​

  //set up for design 2

  randomSeed(seed);

  rad = createSlider(20, 300, 100, 5);

  rad.size(200);

  rad.position(width / 20, height / 20);

  rad.hide();

​

  //set up for design 3

  gridSlider = createSlider(5, 30, 10, 2);

  gridSlider.size(200);

  gridSlider.position(width / 20, height / 20);

  gridSlider.hide();

  colorSlider = createSlider(0, 5, 2, 0.5);

  colorSlider.size(200);

  colorSlider.position(width / 20, height / 20 + 30);

  colorSlider.hide();

  //set up for design 4

  colorSliderFour = createSlider(0, 360, 20, 0.5);

  colorSliderFour.size(200);

  colorSliderFour.position(width / 20, height / 20);

  colorSliderFour.hide();

  xValue = createSlider(1,4,1);

  xValue.size(200);

  xValue.position(width/20, height/20 + 30);

  xValue.hide();

  userChoice = prompt("WELCOME TO MY RECODE GALLERY.\n\nPick a number (1-4) to view that project and use the sliders to interact with the piece.");

  resetButton = createButton('Reset');

  resetButton.position(width-70, height/20);

  resetButton.mousePressed(setup);

}

​

function draw() {

  // background(0);

  // console.log(slider.value());

  // console.log(userChoice);

  // designTwo();

​

  if (userChoice == "1") {

    designOne();

  } else if (userChoice == "2") {

    designTwo();

  } else if (userChoice == "3") {

    designThree();

  } else if (userChoice == '4') {

    designFour();

  } else {

    alert("Sorry I don't understand. Please try again.");

    setup();

  }

}

​

function designOne() {

  // console.log('design 1 running');

  // alert("Use the sliders to change different aspects of the design");

  background(0, 5);

​

  angleSlider.show();

  let minDimension = min(width, height);

  strokeWeight(minDimension * 0.015);

​

  let ball = new Ball(

    width * 0.25,

    width * 0.75,

    map(sin(angle), -1, 1, width * 0.25, width * 0.75),

    height / 2,

    minDimension * 0.2

  );

​

  ball.display();

​

  //   let xStart = width * 0.25;

  //   let xEnd = width * 0.75;

​

  //   let x = map(sin(angle), -1, 1, xStart, xEnd);

  //   let y = height / 2;

​

  //   let size = minDimension * 0.2;

​

  angle += angleSlider.value();

  // console.log(desOneSlider.value());

}

​

class Ball {

  constructor(xStart, xEnd, x, y, size) {

    this.xStart = xStart;

    this.xEnd = xEnd;

    this.x = x;

    this.y = y;

    this.size = size;

  }

​

  display() {

    fill("turquoise");

    stroke("turquoise");

    circle(this.x, this.y, this.size);

  }

}

​

function designTwo() {

  // console.log('design 2 running');

  // alert("Use the sliders to change different aspects of the design.\n\nTrigger Warning - multiple flashing onjects on the screen. \n\nClick on the screen to give your eyes a break");

​

  let spacing, x, y;

  // colorMode(HSB);

  background(0, 5);

  noStroke();

  rad.show();

​

  randomNum = int(random(4));

  let r = rad.value();

  x = random(width);

  y = random(height);

  // console.log(randomNum);

  let randColor = floor(random(colorArray.length));

​

  fill(colorArray[randColor]);

​

  if (randomNum) {

    circle(x, y, r);

  } else if (randomNum == 1) {

    circle(x * 0.01, y, r);

  } else if (randomNum == 2) {

    circle(x, y * 0.1, r);

  } else {

    circle(x, y, r * 0.01);

  }

  x += spacing;

  y += spacing;

​

  if (mouseIsPressed) {

    seed = random(2000);

    background(0);

    x = 0;

    y = 0;

  }

}

​

function designThree() {

  // console.log('design 3 running');

  // alert("Use the sliders to change different aspects of the design");

  smooth();

  rectMode(CENTER);

  noStroke();

  gridSlider.show();

  colorSlider.show();

​

  let randomNum = random(1);

  let size = min(width / gridSlider.value(), height / gridSlider.value());

​

  background(0, 20);

​

  for (let y = size; y < height - size; y += size) {

    for (let x = size; x < width - size * 0.8; x += size) {

      //width-size*2 keeps the grid solely in the middle of the screen and adds padding to the right side of the screen

      let rad = dist(x + 5, y + 5, mouseX, mouseY);

​

      if (mouseIsPressed) {

        fill(rad, x / colorSlider.value(), y / colorSlider.value());

      } else {

        fill(rad, x / 2, y / 2);

      }

      square(x, y, size, rad);

    }

  }

}

​

function designFour() {

  background(360,100,0,0.03);

  strokeWeight(5);

  colorSliderFour.show();

  xValue.show();

  colorMode(HSB);

  fill(colorSliderFour.value(), 100, 100);

  stroke(colorSliderFour.value(), 100, 100);

  let xAmp = width * 0.5;

  let yAmp = height * 0.5;

  let xShift = width/4;

  // let xShift = width/10;

  let yShift = height/2;

  // let x = xAmp * sin(a*t) + xShift;

  // let x = xAmp * sin(a*t) * xShift;

  let x;

  if (xValue.value() == 1) {

    x = xAmp * sin(a*t) + xShift;

  } else if (xValue.value() == 2) {

    x = xAmp * sin(a*t) - xShift;

  } else if (xValue.value() == 3) {

    x = xAmp * sin(a*t) * xShift;

  } else {

    x = xAmp * sin(a*t) / xShift;

  }

  let y = yAmp * cos(b*t) + yShift;

  point(x,y);

  line(x,y,width/2, height/2);

  line(x,y,mouseX,mouseY);

  // circle(x,y,50);

  // square(x+60,y+60,50);

  // triangle(width/2, height/2, x, y, x, y);

  // triangle(width/2, height/2, x, y, 0, height);

  t += 0.1;

}

​