var ballvvelocity;

var ballx;

var bally;

var score = 0;

var drawLineLx = [];

var drawLineLy = [];

var drawLineVL = [];

var drawLineLL = [];

var drawLineWith1DArray = false;

var drawLineWith2DArray = false;

var drawLineWithVector = true;

​

var x1;

var y1;

​

var x2;

var y2;

​

var stitchX = [];

var stitchY = [];

​

var drawCalligraphic = true;

var calliL = [];

​

var ripples = [];

​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES);

  noLoop();

  ballhvelocity = 5;

  ballvvelocity = 5;

  ballx = width / 2;

  bally = height / 2;

​

​

  x1 = random(100, 300);

  y1 = 250;

​

  x2 = random(100, 300);

  y2 = 350;

}

​

function draw() {

  background(220);

  //drawPrimitives();

  //drawQuads();

  //drawSpiral();  

  //drawRects();

  //drawIterFunc();

  //drawSplat();

  //drawStochastic();

  //drawSchotter();

  //drawBillarBall(); // also pong

  //drawLine();

  //drawEyes();

  //drawAngle();

  //drawStitch();

  //drawIsland();

  //drawCalligraphicLine();

  //drawLongestline();

  //drawRipples();

  //drawButt();

  drawAngleCirc();

}

​

function drawAngleCirc() {

  push();

  background('pink');

  strokeWeight(5);

  stroke('beige');

  fill('yellow');

  var x1 = width * random(0.2, 0.8);

  var x2 = width * random(0.2, 0.8);

  var x3 = width * random(0.2, 0.8);

  var y1 = height * random(0.2, 0.8);

  var y2 = height * random(0.2, 0.8);

  var y3 = height * random(0.2, 0.8);

​

  var r = 15;

  ellipse(x1, y1, r);

  ellipse(x2, y2, r);

  ellipse(x3, y3, r);

  var ma = (y2-y1)/(x2-x1);

  var mb = (y3-y2)/(x3-x2);

  var cx= (ma*mb*(y1-y3) + mb*(x1+x2) - ma*(x2+x3))/(2*(mb-ma));

  var cy = -1*(cx-(x1+x2)/2)/ma + (y1+y2)/2;

  var dx =x1-cx;

  var dy = y1-cy;

  var radius= sqrt((dx*dx)+(dy*dy));

  noFill();

  ellipse(cx, cy, radius*2, radius*2);

  pop();

}

​

​

function drawButt() {

  push();

  background('pink');

​

​

  push();

  fill('#8fbaff');

  noStroke();

  //ellipse(width/2, height/2, 500);

  pop();

​

​

​

  beginShape();

  //fill('yellow');

  noFill();

  stroke('brown');

  strokeWeight(10);

  let y = height / 2;

  line(width / 5, 0, width / 5, y);

​

  line(width - (width / 5), 0, width - (width / 5), y);

​

  var cx1 = random(width / 5, width / 3);

  var cy1 = random(y + 100, height - 200);

​

  //ellipse(cx1, cy1, 20);

​

  var cx2 = cx1;

​

  bezier(width / 5, y, cx1, cy1, cx2, cy1, (width / 5) + ((width - (width / 5)) - (width / 5)) / 2, y);

  var offset = ((width - (width / 5)) - (width / 5)) / 2;

  bezier(width / 5 + offset, y, cx1 + offset * 1.3, cy1, cx2 + offset * 1.3, cy1, width - (width / 5), y);

  endShape(CLOSE);

​

​

  pop();

​

}

​

function mousePressed() {

  for (let i = 0; i < 6; i++) {

    ripples.push(new Ripple(6 + i * random(25, 30)));

  }

  console.log('hey');

}

​

function drawRipples() {

  push();

  background('#8fbaff');

  for (var i = 0; i < ripples.length; i++) {

    ripples[i].display();

    ripples[i].expand();

  }

  pop();

}

​

class Ripple {

  constructor(radian) {

    this.x = mouseX;

    this.y = mouseY;

    this.radian = radian;

    this.birthday = millis();

  }

​

  display() {

    push();

    let now = millis();

    let hasBeen = now - this.birthday;

    let hasBeenPer = hasBeen / 3000;

​

    if ((hasBeenPer > 0) && (hasBeenPer < 1)) {

      var alpha = map(hasBeenPer, 0, 1, 255, 0);

​

      stroke(255, alpha);

      noFill();

      strokeWeight(4);

      ellipseMode(CENTER);

​

      ellipse(this.x, this.y, this.radian, this.radian);

    }

    pop();

  }

​

  expand() {

    this.radian += 3;

  }

​

}

​

function drawLongestline() {

  push();

  var numLine = random(3, 6);

  var lines = [];

  var maxDistance = 0;

  var maxX1;

  var maxY1;

  var maxX2;

  var maxY2;

  for (var i = 0; i < numLine; i++) {

    var x1 = random(50, width - 50);

    var y1 = random(50, height - 50);

    var x2 = random(50, width - 50);

    var y2 = random(50, height - 50);

    var v1 = createVector(x1, y1);

    var v2 = createVector(x2, y2);

    lines.push([v1, v2]);

    var d = dist(x1, y1, x2, y2);

    if (d > maxDistance) {

      maxDistance = d;

      maxX1 = x1;

      maxY1 = y1;

      maxX2 = x2;

      maxY2 = y2;

    }

  }

​

  strokeWeight(5);

​

  for (var j = 0; j < numLine; j++) {

    line(lines[j][0].x, lines[j][0].y, lines[j][1].x, lines[j][1].y);

  }

​

  push();

  stroke('red');

  line(maxX1, maxY1, maxX2, maxY2);

  pop();

  pop();

}

​

function drawCalligraphicLine() {

​

  noFill();

  if (calliL.length != 0) {

    for (var i = 0; i < calliL.length - 1; i++) {

      push();

      var d = dist(calliL[i].x, calliL[i].y, calliL[i + 1].x, calliL[i + 1].y);

      strokeWeight(d / 12);

      line(calliL[i].x, calliL[i].y, calliL[i + 1].x, calliL[i + 1].y);

      pop();

    }

  }

​

}

​

function drawIsland() {

  push();

  var zoom = 80.0;

  var spacing = 1;

  noStroke();

​

  for (var row = 0; row < height; row += spacing) {

    for (var col = 0; col < width; col += spacing) {

      var gray = 255 * noise((millis() / 10 + row) / zoom, col / zoom);

      if (gray < 127) {

        gray = '#8fbaff';

      } else {

        gray = '#d3ffc9';

      }

      fill(gray);

      rect(row, col, spacing, spacing);

    }

  }

  pop();

}

​

function drawStitch() {

  push();

  background('pink');

  stroke('orange');

  strokeWeight(8);

  translate(25, 25);

  var nAcross = 11;

  var tf = [0, 1]

  for (var i = 0; i < nAcross; i++) {

    stitchX.push(random(tf));

    stitchY.push(random(tf));

  }

  var spacing = width / 12;

​

  push();

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

    var px = i * spacing;

    var xc = map(i, 0, nAcross, 0, 255);

    stroke(xc, 150, 150);

    for (var j = 0; j < nAcross; j++) {

      if ((j + 1) % 2 == stitchX[i]) {

        var j0 = j * spacing;

        var j1 = (j + 1) * spacing;

        line(px, j0, px, j1);

      }

    }

  }

  pop();

​

  push();

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

    var py = i * spacing;

    for (var j = 0; j < nAcross; j++) {

      var yc = map(j, 0, nAcross, 0, 255);

      stroke(250, 150, yc);

      if ((j + 1) % 2 == stitchY[i]) {

        var j0 = j * spacing;

        var j1 = (j + 1) * spacing;

        line(j0, py, j1, py);

      }

    }

  }

  pop();

​

  pop();

}

​

​

function tweakAngle(angle) {

  if (angle < 0) {

    angle += 2 * PI;

  }

  return angle;

}

​

​

function drawEyes() {

  ellipse(width / 2, height / 2, width - 100);

  push();

  fill('black');

  var blackX = constrain(mouseX, 140, 250)

  var blackY = constrain(mouseY, 150, 250);

  ellipse(blackX, blackY, 150);

  pop();

​

  push();

  fill('white');

  var whiteX = constrain(mouseX, blackX - 25, blackX + 25);

  var whiteY = constrain(mouseY, blackY - 25, blackY + 25);

  ellipse(whiteX, whiteY, 50);

  pop();

}

​

​

function drawLine() {

  noFill();

  strokeWeight(5);

  stroke('pink');

​

  if (drawLineWith1DArray) {

    if (drawLineLx.length != 0 && drawLineLy.length != 0) {

      beginShape();

      for (var i = 0; i < drawLineLx.length; i++) {

        vertex(drawLineLx[i], drawLineLy[i]);

      }

      endShape();

    }

  }

​

  if (drawLineWithVector) {

    if (drawLineVL.length != 0) {

      beginShape();

      for (var i = 0; i < drawLineVL.length; i++) {

        vertex(drawLineVL[i].x, drawLineVL[i].y);

      }

      endShape();

    }

  }

​

  if (drawLineWith2DArray) {

    if (drawLineLL.length != 0) {

      beginShape();

      for (var i = 0; i < drawLineLL.length; i++) {

        vertex(drawLineVL[i][0], drawLineVL[i][1]);

      }

      endShape();

    }

  }

}

​

function mouseDragged() {

  if (drawLineWith1DArray) {

    if (drawLineLx.length > 100 && drawLineLy.length > 100) {

      drawLineLx.reverse();

      drawLineLx.pop();

      drawLineLy.reverse();

      drawLineLy.pop();

​

      drawLineLx.reverse();

      drawLineLy.reverse();

    }

    drawLineLx.push(mouseX);

    drawLineLy.push(mouseY);

  }

​

  if (drawLineWithVector) {

    if (drawLineVL.length > 100) {

      drawLineVL.reverse();

      drawLineVL.pop();

      drawLineVL.reverse();

    }

    drawLineVL.push(createVector(mouseX, mouseY));

  }

​

  if (drawLineWith2DArray) {

    if (drawLineLL.length > 100) {

      drawLineLL.reverse();

      drawLineLL.pop();

      drawLineLL.reverse();

    }

    drawLineLL.push([mouseX, mouseY]);

  }

​

  if (drawCalligraphic) {

    if (calliL.length > 100) {

      calliL.reverse();

      calliL.pop();

      calliL.reverse();

    }

    calliL.push(createVector(mouseX, mouseY));

  }

}

​

function drawBillarBall() {

  //one-person pong

  push();

  fill('grey');

  rect(mouseX, mouseY, 20, 80);

  pop();

​

  if (int(dist(ballx, bally, mouseX, mouseY)) < 50) {

    let curhv = ballhvelocity;

    ballhvelocity = -(curhv);

    var curVy = ballvvelocity;

    ballvvelocity = -(curVy);

    score++;

​

    if (mouseX <= ballx) {

      ballx += 10;

    } else {

      ballx -= 10;

    }

  }

​

  ///////////////////

​

  push();

  fill("pink");

  noStroke();

  var bound = 25;

  ellipse(ballx, bally, 40, 40);

  if (ballx > (width - bound) || ballx < bound) {

    let curVx = ballhvelocity;

    ballhvelocity = -curVx;

  } else if (bally > (height - bound) || bally < bound) {

    let curVy = ballvvelocity;

    ballvvelocity = -curVy;

  }

​

  ballx += ballhvelocity;

  bally += ballvvelocity;

​

  push();

  fill('black');

  //text(score, 50, 50);

  pop();

​

  pop();

}

​

function drawSchotter() {

  push();

  noFill();

  translate(50, 20);

  var w = 15;

  var rN = 0;

​

  for (var i = 0; i < 22; i++) {

    for (var j = 0; j < 12; j++) {

      var rlow = -(j * 2);

      var rup = -rlow;

      var r = random(-rN * i, rN * i);

      var x = random(-rN, rN);

      var y = random(-rN, rN);

​

​

      push();

      rectMode(CENTER);

      rotate(r);

      rect(x, y, w);

      pop();

      translate(w, 0);

    }

    translate(-(w * 12), w);

    rN += 0.5;

  }

  pop();

}

​

function drawStochastic() {

  background("#AEC6CF");

​

  push();

  fill('brown')

  noStroke();

  rect(300, height - 50, 30, 50);

  pop();

​

  noStroke();

  var numCirc = random(10, 15);

  for (var i = 0; i <= numCirc; i++) {

    var x = random(width / 7, width - (width / 7));

    var y = random(height / 7, height - (height / 7));

    var w = random(20, 50);

    push();

    fill('#3399ff');

    ellipse(x + 10, y + 10, w);

    pop();

    ellipse(x, y, w);

  }

}

​

​

function drawSplat() {

  fill('black');

  var cx = width / 2;

  var cy = height / 2;

  beginShape();

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

    var radius = random(50, 55);

    var curX = cx + radius * sin(i);

    var curY = cy + radius * cos(i);

    vertex(curX, curY);

  }

  endShape();

}

​

function drawIterFunc() {

  for (var i = width / 6; i <= width; i += width / 6) {

    for (var j = height / 6; j <= height; j += height / 6) {

      IterFuncHelper(i, j);

    }

  }

}

​

function IterFuncHelper(x, y) {

  ellipse(x, y, 50);

  ellipse(x - 10, y - 10, 10);

  ellipse(x + 10, y - 10, 10);

  line(x - 10, y + 10, x + 10, y + 10);

}

​

function drawRects() {

  var numRect = 10;

  var w = width / numRect;

  for (var i = 0; i <= numRect; i++) {

    var r = map(i, 0, numRect, 0, 255);

    fill(r, 0, 0);

    var x = i * w;

    var y = map(i, 0, numRect, height / 2, height);

    rect(x, y, w, height / 2 + (height - y));

  }

}

​

function drawSpiral() {

  var scalar = 3.5;

  var cx = width / 2 + 10;

  var cy = height / 2;

  //var b = 5;

  beginShape();

  var radius = 0;

  for (var angle = 2; angle <= 2000; angle += 0.1) {

    //var curX = cx + radius * cos(i) * Math.exp(b * i);

    //var curY = cy + radius * sin(i) * Math.exp(b * i);

    var curX = cx + cos(angle) * scalar;

    var curY = cy + sin(angle) * scalar;

    vertex(curX, curY);

    scalar += 0.01;

  }

  endShape();

}

​

function drawQuads() {

  //square, rectangle, parallelogram, rhombus, trapezoid, dart, and kite.

  quad(61, 86, 81, 86, 81, 106, 61, 106);

​

  let xOffset = 50;

  quad(61 + xOffset, 86, 101 + xOffset, 86, 101 + xOffset, 106, 61 + xOffset, 106);

​

  xOffset = 120;

  quad(61 + xOffset + 20, 86, 101 + xOffset + 20, 86, 101 + xOffset, 106, 61 + xOffset, 106);

​

  xOffset = 200;

  quad(61 + xOffset + 10, 86, 101 + xOffset + 10 - 20, 86, 101 + xOffset - 20, 106, 61 + xOffset, 106);

​

  quad(62, 155, 82, 155, 100, 175, 44, 175);

​

  quad(171, 155, 151, 175, 171, 165, 191, 175);

​

  quad(245, 157, 285, 157, 350, 180, 250, 180);

}

​

​

​

function drawPrimitives() {

  arc(width / 5, height / 5, 50, 50, 30, 180, CHORD);

​

  push();

  translate(width / 5 + 50, height / 5);

  rotate(30);

  rect(0, 0, 30, 40);

  pop();

​

  push();

  noStroke();

  fill("violet");

  triangle(190, 92, 200, 70, 250, 92);

  pop();

​

  push();

  fill('beige');

  triangle(0, height, width, height, width, 0);

  pop();

​

  push();

  stroke('gray');

  line(width - 10, 0, 0, height);

  strokeWeight(10);

  stroke('white');

  line(width, 0, 0, height);

  stroke('gray');

  line(width - 10, 0, 0, height);

  pop();

​

  ellipse(284, 279, 30, 80);

  ellipse(284, 350, 30);

​

  rect(52, 145, 50, 50);

​

  push();

  strokeWeight(15);

  stroke('green');

  beginShape();

  line(155, 307, 185, 307);

  line(185, 307, 200, 330);

  line(200, 330, 220, 300);

  endShape();

  pop();

​

  ellipse(199, 292, 15);

  ellipse(175, 332, 15);

​

}

​

function drawAngle() {

  push();

  //noStroke();

  background('grey');

  stroke('white');

  fill('violet');

  angleMode(RADIANS);

  ellipse(x1, y1, 20);

  text("point 1", x1 - 5, y1 + 20)

  ellipse(x2, y2, 20);

  text("point 2", x2 - 5, y2 + 20)

  ellipse(mouseX, mouseY, 20);

  line(x1, y1, mouseX, mouseY);

  line(x2, y2, mouseX, mouseY);

  let a1 = x1;

  let a2 = y1;

  let b1 = mouseX;

  let b2 = mouseY;

  let c1 = x2;

  let c2 = y2;

  let dist1 = dist(a1, a2, b1, b2);

  let dist2 = dist(a1, a2, c1, c2);

  let dist3 = dist(b1, b2, c1, c2);

  var angle1 = degrees(acos((dist1 * dist1 + dist2 * dist2 - dist3 * dist3) / (2 * dist1 * dist2)));

  let dist11 = dist(b1, b2, a1, a2);

  let dist21 = dist(b1, b2, c1, c2);

  let dist31 = dist(a1, a2, c1, c2);

  var angle2 = degrees(acos((dist11 * dist11 + dist21 * dist21 - dist31 * dist31) / (2 * dist11 * dist21)));

  textSize(14);

  textAlign(LEFT);

  text(nf(angle2, 1, 3), b1 + 10, b2 + 20);

  pop();

}