let xS, yS = 50;

​

//Size of the sliders

let szS = 20;

​

//mouse overs

let mOverS = false;

​

let x = 0;

let y = 0;

let rad = 50;

let angle = 0;

let xR = 0;

let yR = 0;

let col = 0;

let mOver = false;

let sz = 10;

let d;

let i = 0;

let maxLegs = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  //generate random seed

  seed = random(max(width, height));

  xS = width / 2;

}

​

// randomize every click redrawing the canvas

function mousePressed(){

  seed = random(max(width,height));

  redraw();

}

​

function draw() {

  background(255);

  //test mouse over for the TOP slider

  if (mouseX >= 50 && mouseX <= width - 50 && mouseY >= 0 && mouseY <= 100) {

    mOverS = true;

  } else {

    mOverS = false;

  }

​

  //click and drag TOP slider

  if (mOverS == true && mouseIsPressed == true) {

    xS = constrain(mouseX, 50, width - 50);

  } else {

    xS = xS;

  }

  //line

  push();

  blendMode(BLEND);

  stroke(0);

  strokeWeight(1);

  line(0,height/2+35,width,height/2+35);

  line(0,120,width,120);

  pop();

​

  // OPTIONAL : grow as the mouse leave the center, goes in conflict with increaseing and decreasing radius size

  // d = dist(width/2,height/2,mouseX,mouseY);

  // rad = map(d,0,width,0,width);

​

  // increase and decrease radius of the circle based on mouse pressed

  if (mouseIsPressed == true) {

    rad = min(rad + 1, max(width, height));

  } else if (mouseIsPressed == false) {

    rad = max(rad - 30, 50);

  }

​

  //mapped attributes to sliders

   maxLegs = floor(map(xS, 50, width - 50, 1, 8))

  //generate random seed based on what happens is setup and mousePressed;

  randomSeed(seed, true);

​

  //test mouse over

  d = dist(xR, yR, mouseX, mouseY);

  if (d < sz / 2) {

    mOver = true;

  } else {

    mOver = false;

  }

​

  //first cycle generate the number of istances (i) and random points in the canvas

  //nested cycle generate lines starting from random point to a point in the circumference of radius = rad

  for (

    i = 0;

    i < maxLegs;

    i++, xR = random(width), yR = random(height), col = random(122)

  ) {

    //circles

    stroke(0);

    fill(0);

    ellipse(xR, yR, sz);

    for (angle = 0; angle < PI * 2; angle += PI / 36) {

​

      x = cos(angle) * rad;

      y = sin(angle) * rad;

      stroke(col);

      strokeWeight(3);

      line(mouseX + x, mouseY + y, xR, yR);

    }

  }

​

  //ellipse in the center

  push();

  blendMode(EXCLUSION);

  fill(255);

  strokeWeight(1);

  stroke(0);

  ellipse(mouseX, mouseY, rad * 2);

​

  //text

  textAlign(CENTER, CENTER);

  textSize(64);

  fill(255);

  text("The Spider", width / 2, height / 2 -20);

  textSize(20);

  text("click to randomize legs",width / 2, height / 2+60);

  text("number of legs",width / 2, 80);

  pop();

  //interface

  push();

  //lines

  blendMode(EXCLUSION);

  stroke(225);

  strokeWeight(2);

  line(50, 50, width - 50, 50);

​

  //TOP slider

  noStroke();

  fill(255);

  ellipse(xS, yS, szS);

  pop();

​

}

​

//makes the canvas responsive

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  xS = width/2;

}