I'm trying to run the following script from a code.org GameLab studio offline using .js and html files.
var blueGear = createSprite(100, 200);
blueGear.setAnimation("blue_gear");
blueGear.Scale = 1;
var greenGear = createSprite(250, 278);
greenGear.setAnimation("green_gear");
greenGear.scale = 2;
var redGear = createSprite(85, 110);
redGear.setAnimation("red_gear");
redGear.scale = 0.75;
var sameRotationRate = 3;
function draw() {
background("white");
//1) Make the gears rotate so they look like they are working as one system
blueGear.rotation = blueGear.rotation - sameRotationRate;
greenGear.rotation = greenGear.rotation + sameRotationRate;
redGear.rotation = redGear.rotation + sameRotationRate;
drawSprites();
}
The files for the individual gears and a sample of the resulting animation(ignoring scaling and position in the code) are shown below.
Now, inorder to run this animations offline, I followed some ChatGPT suggestions did the following:
Downloaded the p5.js and p5.play and library files following ChatGPT suggestions.
Created index.html and gears.js as follows:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Include p5.js from the local directory
<script src="p5.js"></script>
<script src="planck.min.js"></script>
<script src="p5.play.js"></script>
<title>Gear Animation</title>
</head>
<body>
<script src="gears.js"></script>
</body>
</html>
gears.js
// Create Gears
let blueGear, greenGear, redGear;
const sameRotationRate = 3;
function setup() {
console.log("Setup function is called.");
createCanvas(400, 400);
// Initialize Blue Gear
blueGear = createSprite(100, 200);
blueGear.addAnimation("default", "blue_gear.png"); // Replace "blue_gear.png" with the actual file name
blueGear.scale = 1;
// Initialize Green Gear
greenGear = createSprite(250, 278);
greenGear.addAnimation("default", "green_gear.png"); // Replace "green_gear.png" with the actual file name
greenGear.scale = 2;
// Initialize Red Gear
redGear = createSprite(85, 110);
redGear.addAnimation("default", "red_gear.png"); // Replace "red_gear.png" with the actual file name
redGear.scale = 0.75;
}
function draw() {
console.log("Draw function is called.");
background("white");
// Rotate Gears
blueGear.rotation -= sameRotationRate;
greenGear.rotation += sameRotationRate;
redGear.rotation += sameRotationRate;
drawSprites();
}
This leads to a bunch of errors and there was no end to it. Even if I manage to use basic javascript with inbuilt animations object, I only get an empty screen when I open the HTML file in the browser.
Am I missing something in the way i'm linking the p5 libraries? Has anyone tried this and have a cheatsheet of steps for running code.org animations offline?