fix: modernize the code in the examples

bryanbraun · bryanbraun · commit c48e55bf1ddf · 2025-02-08T20:48:40.000-05:00
- convert 'var' → 'const' (or 'let') - use arrow functions for callbacks - use more common indentations patterns - use querySelector more consistantly across examples closes #118
diff --git a/examples/animated-gif/index.html b/examples/animated-gif/index.html
@@ -1,10 +1,12 @@
-<!-- use the picture element to use a more
-     modern animated image format, if supported,
-     and fall back to .gif if not -->
+<!--
+  The picture element enables browsers to use a more modern
+  animated image format if supported, and fall back to .gif
+  if not. The formats are listed in ascending filesize order,
+  because browsers use the first one they support.
+-->
 <picture>
-  <!-- these formats are listed in ascending filesize order, because browsers use the first one they support -->
-  <source srcset="image.mp4" type="video/mp4"> <!-- Safari 11.1+ -->
-  <source srcset="image.apng" type="image/apng"> <!-- Firefox -->
-  <source srcset="image.webp" type="image/webp"> <!-- Firefox, Blink-based browsers -->
-  <img src="image.gif" alt="Bouncy ball"> <!-- everything else -->
+  <source srcset="image.mp4" type="video/mp4">
+  <source srcset="image.apng" type="image/apng">
+  <source srcset="image.webp" type="image/webp">
+  <img src="image.gif" alt="Bouncy ball">
 </picture>
diff --git a/examples/canvas/script.js b/examples/canvas/script.js
@@ -1,13 +1,13 @@
-var h = 575; // x vertex, half of total bounce duration
-var k = 160; // total bounce height
-var a = 4 * k / Math.pow(h * 2, 2); // coefficient: 0.000483932
-var ballColor = getComputedStyle(document.documentElement).getPropertyValue('--canvas');
-var ypos, start, time, timestamp;
+const h = 575; // x vertex, half of total bounce duration
+const k = 160; // total bounce height
+const a = 4 * k / Math.pow(h * 2, 2); // coefficient: 0.000483932
+const ballColor = getComputedStyle(document.documentElement).getPropertyValue('--canvas');
+let ypos, start, time, timestamp;
 
 // Canvas setup
-var canvasEl = document.querySelector('canvas');
-var offset = canvasEl.width / 2;
-var ctx = canvasEl.getContext('2d');
+const canvasEl = document.querySelector('canvas');
+const offset = canvasEl.width / 2;
+const ctx = canvasEl.getContext('2d');
 ctx.fillStyle = ballColor;
 
 // Animation Loop
diff --git a/examples/d3/script.js b/examples/d3/script.js
@@ -1,20 +1,17 @@
-var svg, ball;
-var ballColor = getComputedStyle(document.documentElement).getPropertyValue('--d3');
+const ballColor = getComputedStyle(document.documentElement).getPropertyValue('--d3');
+const svg = d3.select('body')
+  .append('svg')
+  .attr('width', 50)
+  .attr('height', 210)
+  .append('g')
+  .attr('transform', 'translate(25,25)');
 
-svg = d3.select('body')
-        .append('svg')
-        .attr('width', 50)
-        .attr('height', 210)
-        .append('g')
-        .attr('transform', 'translate(25,25)');
-
-ball = svg.append('circle')
-          .attr('r', 25)
-          .attr('fill', ballColor);
+const ball = svg.append('circle')
+  .attr('r', 25)
+  .attr('fill', ballColor);
 
 function bounce() {
-  ball
-    .transition()
+  ball.transition()
     .duration(575)
     .ease(d3.easeQuadOut)
     .attr('cy', 0)
diff --git a/examples/jquery/script.js b/examples/jquery/script.js
@@ -1,5 +1,5 @@
-var $ball = $('ball'),
-    DURATION = 575;
+const DURATION = 575;
+const $ball = $('ball');
 
 function dropBall() {
   // We animate 'top' because jquery can't
@@ -12,6 +12,6 @@ function restoreBall() {
   $ball.animate({ top: '0' }, DURATION, 'easeOutQuad', dropBall);
 }
 
-$(document).ready(function(){
+$(document).ready(() => {
   dropBall();
 });
diff --git a/examples/matter-js/script.js b/examples/matter-js/script.js
@@ -1,13 +1,10 @@
+const ballColor = getComputedStyle(document.documentElement).getPropertyValue('--matterjs');
 const Engine = Matter.Engine,
   Render = Matter.Render,
   Runner = Matter.Runner,
   Bodies = Matter.Bodies,
   World = Matter.World;
 
-const runner = Runner.create({
-  isFixed: true,
-  delta: 1000 / 120,
-});
 const engine = Engine.create();
 const render = Render.create({
   element: document.body,
@@ -19,8 +16,10 @@ const render = Render.create({
     background: '#111'
   }
 });
-const ballColor = getComputedStyle(document.documentElement).getPropertyValue('--matterjs');
-
+const runner = Runner.create({
+  isFixed: true,
+  delta: 1000 / 120,
+});
 
 // Use a many-sided polygon as a ball, to ensure 100% elasticity.
 // See https://github.com/liabru/matter-js/issues/256
diff --git a/examples/mojs/script.js b/examples/mojs/script.js
@@ -1,12 +1,12 @@
-var ball = new mojs.Shape({
-  shape:    'circle',
-  radius:   25,
-  top:      33,
-  left:     33,
-  y:        { 0 : 160 },
+const ball = new mojs.Shape({
+  shape: 'circle',
+  radius: 25,
+  top: 33,
+  left: 33,
+  y: { 0: 160 },
   duration: 575,
-  repeat:   1,
-  easing:   'quad.in',
-  isYoyo:   true,
-  onComplete: function() { ball.replay(); }
+  repeat: 1,
+  easing: 'quad.in',
+  isYoyo: true,
+  onComplete: () => ball.replay()
 }).play();
diff --git a/examples/motion-one/script.js b/examples/motion-one/script.js
@@ -1,4 +1,4 @@
-const ball = document.getElementsByTagName("ball");
+const ball = document.querySelector("ball");
 
 Motion.animate(
   ball,
diff --git a/examples/p5/script.js b/examples/p5/script.js
@@ -1,8 +1,8 @@
-var h = 575; // x vertex, half of total bounce duration
-var k = 160; // y vertex, total bounce height
-var a = -4 * k / Math.pow(h * 2, 2); // coefficient: -.000483932
-var ypos, start, time, timestamp;
-var ballColor = getComputedStyle(document.documentElement).getPropertyValue('--p5');
+const h = 575; // x vertex, half of total bounce duration
+const k = 160; // y vertex, total bounce height
+const a = -4 * k / Math.pow(h * 2, 2); // coefficient: -.000483932
+const ballColor = getComputedStyle(document.documentElement).getPropertyValue('--p5');
+let ypos, start, time, timestamp;
 
 function setup() {
   createCanvas(66, 226);
diff --git a/examples/vanilla-js/script.js b/examples/vanilla-js/script.js
@@ -1,8 +1,8 @@
-var ball = document.querySelector('ball');
-var h = 575; // x vertex, half of total bounce duration
-var k = 160; // y vertex, total bounce height
-var a = -4 * k / Math.pow(h * 2, 2); // coefficient: -.000483932
-var ypos, start, time;
+const ball = document.querySelector('ball');
+const h = 575; // x vertex, half of total bounce duration
+const k = 160; // y vertex, total bounce height
+const a = -4 * k / Math.pow(h * 2, 2); // coefficient: -.000483932
+let ypos, start, time;
 
 (function drawPosition(timestamp) {
   if (!start) { start = timestamp };
diff --git a/examples/velocity/script.js b/examples/velocity/script.js
@@ -1,4 +1,4 @@
-const ball = document.getElementsByTagName('ball');
+const ball = document.querySelector('ball');
 
 ball.velocity({
   transform: [
diff --git a/examples/web-animations-api/script.js b/examples/web-animations-api/script.js
@@ -1,14 +1,14 @@
-var ball = document.getElementsByTagName('ball')[0],
+const ball = document.querySelector('ball');
 
-  // I'm declaring multiple keyframes
-  // until single keyframes are supported.
-  // See https://github.com/web-animations/web-animations-js/issues/14
-  keyframes = { transform: ['translateY(0)', 'translateY(160px)'] };
-  timing = {
-    duration: 575,
-    iterations: Infinity,
-    direction: 'alternate',
-    easing: 'cubic-bezier(.6, 0.08, 0.8, .6)'
-  };
+// I'm declaring multiple keyframes
+// until single keyframes are supported.
+// See https://github.com/web-animations/web-animations-js/issues/14
+const keyframes = { transform: ['translateY(0)', 'translateY(160px)'] };
+const timing = {
+  duration: 575,
+  iterations: Infinity,
+  direction: 'alternate',
+  easing: 'cubic-bezier(.6, 0.08, 0.8, .6)'
+};
 
 ball.animate(keyframes, timing);
diff --git a/examples/webgl/script.js b/examples/webgl/script.js
@@ -1,9 +1,9 @@
-var canvas = document.getElementById('canvas');
-var gl = canvas.getContext('webgl');
+const canvas = document.getElementById('canvas');
+const gl = canvas.getContext('webgl');
 gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
 
 // Setting up vertex shader. It is used to compute position of the circle.
-var vertex = gl.createShader(gl.VERTEX_SHADER);
+const vertex = gl.createShader(gl.VERTEX_SHADER);
 gl.shaderSource(vertex, `
   uniform float time;
   uniform float a;
@@ -19,7 +19,7 @@ gl.shaderSource(vertex, `
 gl.compileShader(vertex);
 
 // Setting up the fragment shader. This is used to color the individual pixels of the circle.
-var fragment = gl.createShader(gl.FRAGMENT_SHADER);
+const fragment = gl.createShader(gl.FRAGMENT_SHADER);
 gl.shaderSource(fragment, `
   precision mediump float;
 
@@ -35,21 +35,21 @@ gl.shaderSource(fragment, `
 gl.compileShader(fragment);
 
 // Linking shaders to the program.
-var program = gl.createProgram();
+const program = gl.createProgram();
 gl.attachShader(program, vertex);
 gl.attachShader(program, fragment);
 gl.linkProgram(program);
 gl.useProgram(program);
 
 // Calculating variables for animation and sending them to the program.
-var h = 575;
-var k = 2 - (2*(50/canvas.clientHeight));
-var a = -4 * k / Math.pow(h * 2, 2);
+const h = 575;
+const k = 2 - (2 * (50 / canvas.clientHeight));
+const a = -4 * k / Math.pow(h * 2, 2);
 gl.uniform1f(gl.getUniformLocation(program, "h"), h);
 gl.uniform1f(gl.getUniformLocation(program, "k"), k);
 gl.uniform1f(gl.getUniformLocation(program, "a"), a);
 
-var start, time;
+let start, time;
 (function drawPosition(timestamp) {
   if (!start) { start = timestamp };
   time = timestamp - start;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-const ball = document.getElementsByTagName("ball");`
	`1`	`+const ball = document.querySelector("ball");`
`2`	`2`
`3`	`3`	`Motion.animate(`
`4`	`4`	`ball,`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-const ball = document.getElementsByTagName('ball');`
	`1`	`+const ball = document.querySelector('ball');`
`2`	`2`
`3`	`3`	`ball.velocity({`
`4`	`4`	`transform: [`