How to use constants as Object keys

[GypsyDangerous]

At 22:24 in the video Dan tries to use his constants as the keys in the object but it doesn't work for him. This is because he did it wrong.

when he did it you ended up with an object that had the strings "UP", "DOWN", etc as the keys but you wanted it to be the numbers that those constants represented. The way that you do that is to put the variables in square brackets. For example.

const UP = 0;
const DOWN = 1;
const LEFT = 2;
const RIGHT = 3;

const object1 = {
  UP: [],
  DOWN: [],
  LEFT: [],
  RIGHT: []
}
  
const object2 = {
  [UP]: [],
  [DOWN]: [],
  [LEFT]: [],
  [RIGHT]: []
}
  
  console.log(object1) => // {UP: Array(0), DOWN: Array(0), LEFT: Array(0), RIGHT: Array(0)}
  console.log(object2) => // {0: Array(0), 1: Array(0), 2: Array(0), 3: Array(0)}
}

and here's an interactive example https://editor.p5js.org/D_Snyder/sketches/r7rHl0QuA

The term for this is Computed Property Names and more details can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names

[dipamsen]

Here is a rough list of steps for implementing this to the site:

• [ ] Create .pdez compressed files for all code examples in https://github.com/CodingTrain/Coding-Challenges
• [ ] Add functionality to the website to link to pde:// urls of the .pdez files (if user has required version of Processing installed (?))
• [ ] Update content json files to link to .pdez files on GitHub

[SableRaf]

Quick update to share my reference implementation for the Open in Processing button:

https://sableraf.github.io/testURIscheme/

Notice the tooltip that serves as a fallback in case Processing is not installed.

We could also consider having a separate button for downloading the sketch.

Note: support for pde:// on Linux is still pending but this Pull Request should solve the issue: https://github.com/processing/processing4/pull/696