Skip to content

Instantly share code, notes, and snippets.

@brysonian

brysonian/Thing.js

Created November 16, 2021 05:16
Show Gist options
  • Save brysonian/e0c6c42f23171fab027bb7c634411fa1 to your computer and use it in GitHub Desktop.
Save brysonian/e0c6c42f23171fab027bb7c634411fa1 to your computer and use it in GitHub Desktop.
Download ZIP
Ideas for loadModule in p5
Raw
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>
Raw
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();
}
*/
Raw
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));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment