* Creative Coding Workshop #1 - Coordinate System

 *

 * Jack B. Du (github@jackbdu.com)

 */

​

// customization starts

let increment = 100;

let strokeThickness = 3;

let strokeColor = "red";

let textColor = "black";

let fontSize = 20;

let pointSize = 5;

// customization ends

​

let coordList = [];

​

function setup() {

  createCanvas(400, 400); // create a canvas of size 400 x 400 pixels

​

  fill(textColor);

  textSize(fontSize); // set text size to 20px

  textFont("monospace"); // set font family to Ubuntu (Google Font <link> added to index.html)

}

​

function draw() {

  background(220); // draw background in gray value of 220

​

  // draw the x axis

  stroke(strokeColor);

  strokeWeight(strokeThickness);

  line(0, 0, width, 0);

  line(width - strokeThickness * 2, strokeThickness * 2, width, 0);

  // draw marks and numbers on x axis

  for (let x = increment; x < width; x += increment) {

    stroke(strokeColor);

    strokeWeight(strokeThickness);

    line(x, 0, x, strokeThickness);

    noStroke();

    textAlign(CENTER);

    text(x, x, strokeThickness + fontSize);

  }

​

  // draw y axis

  stroke(strokeColor);

  strokeWeight(strokeThickness);

  line(0, 0, 0, height);

  line(strokeThickness * 2, height - strokeThickness * 2, 0, height);

  // draw marks and numbers on y axis

  for (let y = increment; y < height; y += increment) {

    stroke(strokeColor);

    strokeWeight(strokeThickness);

    line(0, y, strokeThickness, y);

    noStroke();

    textAlign(CENTER);

    text(y, strokeThickness + fontSize, y + fontSize / 2);

  }

​

  // draw saved coordinate list

  for (let i = 0; i < coordList.length; i++) {

    drawCoord(coordList[i][0], coordList[i][1]);

  }

​

  // draw mouse coordinate

  stroke(strokeColor);

  strokeWeight(strokeThickness);

  line(mouseX, 0, mouseX, height); // horizontal line through mouse coordinate

  line(0, mouseY, width, mouseY); // vertical line through mouse coordinate

  drawCoord(mouseX, mouseY);

}

​

function drawCoord(x, y) {

  stroke(strokeColor);

  strokeWeight(pointSize);

  point(x, y); // draw a point at the location of the coordiante

  noFill();

  noStroke();

  fill(textColor);

  let coordText = "(" + x + ", " + y + ")"; // compose the coordinate text to be drawn

  let coordTextX; // the x coordinate for the text to be drawn

  let coordTextY; // the y coordinate for the text to be drawn

  // adjust text to different relative position based on where the coordinate is

  if (x < width - textWidth(coordText) - fontSize / 2) {

    // adjust text to the right side of the coordinate if coordinate is near the right edge of the canvas

    textAlign(LEFT);

    coordTextX = x + fontSize / 2;

  } else {

    // adjust text to the left side of the coordinate if coordinate is not near the right edge of the canvas

    textAlign(RIGHT);

    coordTextX = x - fontSize / 2;

  }

  if (y < height - textDescent() - fontSize * 1.2) {

    // adjust text to the top side of the coordinate if coordinate is near the bottom edge of the canvas

    coordTextY = y + textDescent() + fontSize;

  } else {

    // adjust text to the top side of the coordinate if coordinate is not near the bottom edge of the canvas

    coordTextY = y + textDescent() - fontSize;

  }

  // draw coordinate text based on adjustments above

  text(coordText, coordTextX, coordTextY);

}

​

function mouseClicked() {

  coordList.push([mouseX, mouseY]); // add current mouse coordinate to coordList

}