* p5.js sketch

 * By UnaLuz

 */

​

const windowPercent = 1

const canvasPercent = 0.9

const canvasWidth = window.innerWidth * windowPercent

const canvasHeight = window.innerHeight * windowPercent

const maxWidth = canvasWidth * canvasPercent

const maxHeight = canvasHeight * canvasPercent

​

function setup() {

  createCanvas(canvasWidth, canvasHeight)

  colorMode(HSB)

}

​

function draw() {

  background(220, 100, 50)

  translate(width/2, height/2)

  fill(220, 100, 100)

  strokeWeight(5)

  const triPoints = generateRandomTriangle(maxWidth/2, maxHeight/2)

  // Draw the border of the area and the triangle

  push()

  strokeWeight(1)

  ellipse(0, 0, maxWidth, maxHeight)

  triangle(triPoints.a.x, triPoints.a.y,

           triPoints.b.x, triPoints.b.y,

           triPoints.c.x, triPoints.c.y)

  pop()

  // Draw the points of the triangle

  push()

  point(triPoints.a)

  point(triPoints.b)

  point(triPoints.c)

  pop()

  // Draw the point in the middle

  push()

  stroke(255)

  point(0, 0)

  pop()

//   console.log(width, height)

//   console.log(maxWidth, maxHeight)

//   console.log(triangle.a, triangle.b, triangle.c)

  noLoop()

}

​

/**

 * 

 */

function generateRandomTriangle(maxX, maxY) {

  let trianglePoints = {

    a: generateRandomPoint(maxX, maxY),

    b: generateRandomPoint(maxX, maxY),

    c: generateRandomPoint(maxX, maxY)

  }

  return trianglePoints

}

​

/**

 * Generates a random point inside the area

 */

function generateRandomPoint(maxX, maxY) {

  const p = p5.Vector.random2D()

                .mult([random(maxX), random(maxY)])

  return p

}