So, I want to add a new JS file to my project that I would like to run instead of the sketch.js file as the “main” JS file. Not always but sometimes. This is because I would like to separate my games “core” engine from the rendering. So, I would like my code to run multiple times a minute without rendering it to train a neural net. And this isn’t possible with p5 looping over draw() at 60FPS. I can code the engine without rendering it, that seems to be not a problem, by creating a new image object (asked 3 days ago about that). But the only problem remains that I need to be able to not loop over draw() sometimes, but have my own main JS file that will calculate frames real quick without rendering them. Then after training it, I would like it to switch back to the sketch.js where I can call the function to get the next frame from my other JS file inside the draw() loop. Is this possible? :S
Okay I just thought about I can make 2 sketch.js files, one for rendering and one which will play multiple games every frame without rendering. And then switch them out depending on what I want to do. Sorry if I’m cluttering the forum. If it works I’ll delete this but I’m open to other suggestions still
No need to delete your post. Even if your problem is solved, you could potentially get input that could help your project or other forum goers.
My thoughts are that you should be able to split your computation engine from your rendering one, as you have suggested.
I have taken code from Happy Coding and use P5js in instance mode to show that you could run two separate scripts (ok, the first script is outside the instance mode, but you should be able to capture as a separate js file). One thing that could be useful in your case is to use the noLoop() and redraw() functions in your advantage. As soon as your comp engine has data to be rendered, it could pass it to the p5js instance which will render your data and call redraw() to call draw() once (this implies you called noLoop() in setup(). You will need to implement a messaging system between both engines.
Below is the simple demo (messaging system for you as exercise)
Kf
<!DOCTYPE html>
<html>
<head>
<title>Happy Coding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
<script>
//====================
var clickedFirstP = false;
function showFirstMessage(){
alert('Welcome to my webpage!');
}
function firstThingClicked(){
clickedFirstP = true;
}
function secondThingClicked(){
if(clickedFirstP){
alert("Good job!");
}
else{
alert("You forgot to click the first thing!");
}
}
//====================
var s = function( sketch ) {
var x = 100;
var y = 100;
sketch.setup = function() {
sketch.createCanvas(200, 200);
};
sketch.draw = function() {
sketch.background(0);
sketch.fill(255);
sketch.rect(x,y,50,50);
};
};
//====================
var myp5 = new p5(s);
//====================
</script>
</head>
<body onload="showFirstMessage()">
<p onclick="firstThingClicked()">Click me first!</p>
<p onclick="secondThingClicked()">Click me second!</p>
</body>
</html>
kf_keyword: p5js demo quickstart p5js.quickstart global instance mode
Thanks for the input. I tried noLoop() at setup() then redraw() at the end of draw(), so it just keeps calling itself, but for some reason, the garbage collection doesn’t work. Whenever my character dies, I set the instance of my character to null, then create a new one and start a new game. When I run the game 60FPS, it does also seem to slowly build up some memory, but much slower than noLoop and redraw(). I have 16GB ram and within ~200 games, the browser already uses up all my empty ram. What could be the problem? I only have an array that is quite large which is inside the character instance, so when it dies, it should clean the array, especially since I set it to null first no? (I mean I would think, just creating a new instance with same name would delete the old one, but that wasn’t the case so I tried setting it to null before creating it again).
Any suggestions there?
