​

function setup() {

  createCanvas(SIZE, SIZE);

  angleMode(DEGREES);

  noLoop();

}

​

function draw() {

  background(240);

  translate(width / 2, height / 2);

  rotate(-90)

  drawRadarChart(

    400,

    [

      ["small", "medium", "large"],

      ["cold", "warm", "hot"],

      ["sweet", "salty", "tangy", "spicy"],

    ],

    [

      [1, 1, 2],

      [0, 2, 3],

    ]

  );

}

​

function drawRadarChart(size, axes, data) {

  var AXIS_PADDING = size / 6;

  var markers = []

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

    var angle = - i * (360 / axes.length);

    var axisLabels = axes[i];

​

    var positions = []

    for (var j = 0; j < axisLabels.length; j++) {

      var radius =

        j * ((size / 2 - AXIS_PADDING) / (axisLabels.length - 1)) + AXIS_PADDING;

      positions.push([radius * cos(angle), radius * sin(angle)])

    }

    markers.push(positions)

  }

​

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

    var markerPositions = markers[i]

    var lastMarkerPositions = markerPositions[markerPositions.length - 1]

    // Draw axis lines

    line(0, 0, lastMarkerPositions[0], lastMarkerPositions[1])

    // Draw axis markers

    fill(0)

    for (var j = 0; j < markerPositions.length; j++) {

      var markerPosition = markerPositions[j]

      circle(markerPosition[0], markerPosition[1], 4)

    }

  }

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

    var datum = data[i]

    noFill()

    for (var j = 0; j < datum.length; j++) {

      var currentPosition = markers[j][datum[j]]

      var nextPositionIndex = (j + 1) % (data.length + 1)

      var nextPosition = markers[nextPositionIndex][datum[nextPositionIndex]]

      dashedLine(currentPosition[0], currentPosition[1], nextPosition[0], nextPosition[1])

    }

  }

}

​

function dashedLine(x1, y1, x2, y2) {

  drawingContext.setLineDash([5, 10, 30, 10])

  line(x1, y1, x2, y2)

  drawingContext.setLineDash([])

}

​

function keyTyped() {

  if (key === 's') {

    saveCanvas();

  }

}