brysonian/Thing.js

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sketch</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style type="text/css">
      html, body {
        margin: 0;
        padding: 0;
      }

      canvas {
        display: block;
      }
    </style>
  </head>

  <body>
    <script src="sketch-dynamic.js"></script>
  </body>
</html>

## sketch.js
/* How it works now using vanilla JS and a conditional */
let myThing;

function setup() {
  createCanvas(400, 400);
  fill(0);

  import('./Thing.js').then((module) => {
    myThing = new module.Thing(0, 200);
  });
}

function draw() {
  background(220);
  if (myThing) {
    myThing.update();
    myThing.render();
  }
}

/*
************ Goal ***************

let Thing;
let myThing;

function preload() {
  Thing = loadImport('./Thing.js');
  // an alternative here is just to stick it on the window obj if it isn't instance mode
}

function setup() {
  createCanvas(400, 400);
  fill(0);
  myThing = new Thing(0, 200);
}

function draw() {
  background(220);
  myThing.update();
  myThing.render();
}
*/

## Thing.js
export class Thing {
  constructor(x=0, y=0) {
    this.x = x;
    this.y = y;
  }

  render() {
    circle(this.x, this.y, 50, 50);
  }

  update() {
    this.x = ((this.x + 10) % (width + 100));
  }

}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sketch</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<style type="text/css">
	html, body {
	margin: 0;
	padding: 0;
	}

	canvas {
	display: block;
	}
	</style>
	</head>

	<body>
	<script src="sketch-dynamic.js"></script>
	</body>
	</html>
	/* How it works now using vanilla JS and a conditional */
	let myThing;

	function setup() {
	createCanvas(400, 400);
	fill(0);

	import('./Thing.js').then((module) => {
	myThing = new module.Thing(0, 200);
	});
	}

	function draw() {
	background(220);
	if (myThing) {
	myThing.update();
	myThing.render();
	}
	}

	/*
	********** Goal *************

	let Thing;
	let myThing;

	function preload() {
	Thing = loadImport('./Thing.js');
	// an alternative here is just to stick it on the window obj if it isn't instance mode
	}

	function setup() {
	createCanvas(400, 400);
	fill(0);
	myThing = new Thing(0, 200);
	}

	function draw() {
	background(220);
	myThing.update();
	myThing.render();
	}
	*/
	export class Thing {
	constructor(x=0, y=0) {
	this.x = x;
	this.y = y;
	}

	render() {
	circle(this.x, this.y, 50, 50);
	}

	update() {
	this.x = ((this.x + 10) % (width + 100));
	}

	}