// Calculates a new point that at a specified distance 

// and angle relative to a starting 'origin' point.

// The new location is returned as an object with two 

// attributes: 'x' and 'y' which can be accessed by name

// using dot-notation on the return value (see below)

//

// ARGUMENTS

// cx: the x coordinate of the origin point

// cy: the y coordinate of the origin point

// angle: direction of the step we'll be taking away 

//        from the origin point. 0° means 'to the right'

//        and the angles run clockwise from there

// dist: number of pixels our calculated point will be 

//       away from the origin (in the direction specified

//       by the `angle` argument)

function pointAt(cx, cy, angle, dist){

  var theta = angle/360 * TWO_PI

  return {x:cx+cos(theta) * dist, 

          y:cy+sin(theta) * dist}

}

​

​

function setup() {

  createCanvas(400, 200);

  background(20)

  noStroke()

  var redAngle = 0

  var orangeAngle = 135

  var yellowAngle = -90

  // draw a white circle in the center; this marks

  // the spot (200, 100) we'll be calculating

  // other points on the basis of

  circle(200, 100, 5)

  // find a new point thats at 0° (i.e., to the right) 

  // of the original (starting from x=200 y=100)

  // and is 120 pixels away it

  var redPt = pointAt(200, 100, redAngle, 120)

​

  // find a point that's clockwise by 135° (i.e., down and left) 

  // from the original (again, starting at x=200 y=100)

  // but is closer this time (only 60 pixels away)

  var orangePt = pointAt(200, 100, orangeAngle, 60)

  // by passing a negative number for the angle we can

  // find a point that's 90° counter-clockwise

  var yellowPt = pointAt(200, 100, yellowAngle, 60)

  // draw a red circle at the first calculated point

  fill('red')

  circle(redPt.x, redPt.y, 10)

  // draw an orange circle at the second point

  fill('orange')

  circle(orangePt.x, orangePt.y, 10)

  // draw a yellow circle at the counterclockwise point

  fill('yellow')

  circle(yellowPt.x, yellowPt.y, 10)

  // draw a line from the origin to each dot

  stroke(255, 50)

  line(200,100, redPt.x, redPt.y)

  line(200,100, orangePt.x, orangePt.y)

  line(200,100, yellowPt.x, yellowPt.y)

}

​

​

​