We Keep Coding

Animate a flying bird in p5.js

I want to create an animation of a bird with p5 js. I have 6 pictures of the bird - when the wings are up, in the middle, and so on... When I press 'space bar' on the keyboard, the bird should fly - so all the pics should be shown as an animation (as if the bird is really flying). I want to build this code snippet without spritemap.
This is my code, but somehow it doesn't work..
let time = 0;
let frame = 0;
let img = [];
function preload() {
img.push(loadImage("assets/Bird/bird-1.png"));
img.push(loadImage("assets/Bird/bird-2.png"));
img.push(loadImage("assets/Bird/bird-3.png"));
img.push(loadImage("assets/Bird/bird-4.png"));
img.push(loadImage("assets/Bird/bird-5.png"));
}
function draw() {
function keyPressed() {
if (key == ' ') {
const speed = 1;
const numImage = img.length;
let current = frame % numImage;
let display = img[current];
image(display, width / 2, height / 2, display.width, display.length);
time += speed;
if (time > 5) {
time = 0;
frame++;
}
}
}
}
Looking forward to reading some ideas! Thank you in advance.

First things first you should not need to handle frames and such things. It is better to use keyPressed function outside of scope draw since it is a special event function and automatically called when a key is pressed.
It is better to use setup functionality instead of preload since preload is a little bit more early function then we needed. Setup is more relevant in such things like loading an array and so on.
I see that you forgot to create a canvas to draw an image on it. I added that on setup and also set the framerate of canvas regarding the img array's size.
function setup() {
createCanvas(400, 400);
background(51);
img.push(loadImage("1.png"));
img.push(loadImage("2.png"));
img.push(loadImage("3.png"));
img.push(loadImage("4.png"));
frameRate(img.length * 2); // double speed on animate sprites
}
From this point it is only a matter of checking the keyCode and looping through array.
function draw() {
if (keyIsDown(32)) {
background(51);
const numImage = img.length;
let current = frameCount % numImage;
let display = img[current];
image(display, width / 2 - display.width , height / 2 - display.height , display.width, display.length);
}
}
Here in the keyIsDown(32) check, 32 represents spacebar. You can check others from here easily : http://keycode.info/
You want to re-set the background of canvas on each sprite display. If not, they will still be showing on each render.
You can see the working version of your code in here :
https://editor.p5js.org/darcane/sketches/rVl22hkv7

Tensorflow.js Please make sure the operations that use variables are inside the function f passed to minimize()

I have started to use javascript and TensorFlow.js to work on some machine learning projects, I am working on creating a linear regression model, however, I cannot figure out what is causing this error
Can not find a connection between any variable and the result of the loss function y=f(x). Please make sure the operations that use variables are inside the function f passed to minimize()."
I have created two Tensors
globalTensorXs = tf.tensor2d(globaArrayXs); //input data
globalTensorYs = tf.tensor1d(globaArrayYs); //y output
I have created the coefficients/weights as below as an array of tf scalars.
function createWeights(_numWeights)
{
for ( var x = 0; x < _numWeights; x++)
{
globalWeightsTensorArr.push(tf.variable(tf.scalar(Math.random())));
}
}
There is A training function which I pass the x and y Tensors into, it is the call to the optimise.minimize that causes the issue. it does not detect the variable for training, which are stored in globalWeightsTensorArr
async function train(xsTensor, ysTensor, numIterations)
{
/*//////OPTIMISER.MINIMISE/////////////
Minimize takes a function that does two things:
It predicts y values for all the x values using the predict
model function.
It returns the mean squared error loss for those predictions
using the loss function. Minimize then automatically adjusts any
Variables used by thi predict/loss function in order to minimize
the return value (our loss), in this case the variables are in
"globalWeightsTensorArr" which contains the coefficient values
to be altered by the modeld during "numIterations" iterations of
SGD.
*/
for (let iter = 0; iter < numIterations; iter++)
{
optimiser.minimize(function ()
{
return loss(predict(xsTensor), ysTensor);
}, globalWeightsTensorArr);
}
}
// the predict and loss function are here...
//The following code constructs a predict function that takes inputs(X's) //and returns prediction Y: it represents our 'model'. Given an input //'xs' it will try and * predict the appropriate output 'y'.
function predict(_Xs)
{
return tf.tidy(() => {
for ( var x = 0; x < 8; x++)
globalWeightsArr[x] = globalWeightsTensorArr[x].dataSync();
const weightTensor = tf.tensor1d(globalWeightsArr);
const prediction = tf.dot(_Xs, weightTensor);
return prediction;
});
}
//The loss function takes the predictions from the predict function
//and the actual lables and adjusts the weights
//the weights are considered to be any tensor variable that impact the //function We can define a MSE loss function in TensorFlow.js as follows:
function loss(_predictedTensor, _labels)
{
const meanSquareError =_predictedTensor.sub(_labels).square().mean();
return meanSquareError ;
}
can anyone please help explain the problem?
Regards
Aideen

We resolved the issue by changing the way the weights/coefficients were created. Now minimize can detect the variables used by predict, and it adjusts them accordingly. later I will post the entire solution to codepen. still learning!
function createWeights(_numWeights) {
const randomTensor = tf.randomUniform([_numWeights, 1]);
globalWeightsTensorVar = tf.variable(randomTensor);
}
here is the predict function used b
function predictLogical(_Xs) {
return tf.dot(_Xs, globalWeightsTensorVar);
}

The issue is related to tf.variable. One needs to use tf.variable to create the weights that will be updated by the function created by optimiser.minimize().
A variable created by tf.variable is mutable contrary to tf.tensor that is immutable. As a result if one uses tf.tensor to create the weights they could not be updated during the training

Full control of many objects Javascript

I am working on a game in javascript that spawns and terminates shapes. Therefore, I need full control over these shapes that are being spawned. I want to do the following, but I am not sure on how to do it:
I want to define a constructor Shape.
Then, I want to make a function so that when it is called, it applies to ALL of the Shape in existence and being able to change each ones attribute. (For example, I call function moveAll() and all of the shapes' this.y increments by one.)
I also want to be able to terminate a specific Shape with a function, or add a Shape with a function.
My main problem is this:
var x = new Shape();
var y = new Shape();
...
I don't want to make a million variables. I need a way to make tons of shapes at once and still be able to control each one individually. And if I made an array, how would I control everything individually?
Anything helps, I just need a basis to understand the concept of constructors. Thanks in advance!

You could make an array of shapes:
let shapes = []
// this will create 6 shapes
for(let i of [0,1,2,3,4,5]) {
shapes.push(new Shape())
}
If a shape has an id you can terminate it:
// incrementing id counter
let id = 0
// x and y are optional starting positions
function Shape(x, y) {
this.id = id++
this.y = y || 0
this.x = x || 0
}
// remove the shape from the array
function terminate(id) {
shapes = shapes.filter(shape => shape.id !== id)
}
// or add a shape
function spawn() {
shapes.push(new Shape())
}
Now you have your shapes.
The simplest way to move all shapes would be something like this:
function moveAll() {
shapes.forEach(shape => shape.y++)
}
Runtime for this will increase as the number of shapes increase.
updated moveAll, per request
function moveAll() {
shapes.forEach(shape => {
if(shape.type === true) {
shape.y++
} else {
shape.y--
}
})
}

Javascript setTimeout scope referencing wrong variables

I've written a little function to loop through a sprite sheet. Within the function I have a settimeout which cycles through the frames. Upon the last frame, the timeout is cleared, the counter is set to zero - and the animation begins again.
This works fine with one animation, but when I try and call many animations - they all start but fail to loop, apart from designSprite which loops quite happily. I call the designSprite anim last....
So I'm guessing the problem is due to variables being overwritten when I call a new intance of the function - setTimeOut referencing the new variables?? I've confused myself. I've had a stab at trying to fix it, but keep failing.
Thanks,
Rob
// Arrays to hold our sprite coordinates.
var animationSprite=[{"X":"-2","Y":"-2"},........ etc etc ];
var mediaSprite=[{"X":"-2","Y":"-2"},........ etc etc ];
var filmSprite=[{"X":"-2","Y":"-2"},........ etc etc ];
var designSprite=[{"X":"-2","Y":"-2"},........ etc etc ];
// call the loopAnim function, passing in the sprite array, and id of the div
loopAnim(animationSprite ,'#animationFrame')
loopAnim(mediaSprite ,'#mediaFrame')
loopAnim(filmSprite ,'#filmFrame')
loopAnim(designSprite ,'#designFrame')
function loopAnim(sprite , frameID) {
var totalFrames = sprite.length; // count how many 'frames' are in our sprites array.
var count = 0; // set up a basic counter to count which frame we're on.
var theLoop = function(){
// Move the background position of our frame by reading the X & Y co-ordinates from the sprites array.
$(frameID).css("background-position" , sprite[count].X + "px " + sprite[count].Y + "px");
count++; // increment the frame by 1 on each loop
// if count is LESS than total number of frames, set a timeout to keep running the "theLoop" function
if (count < totalFrames){
setAnim = setTimeout(theLoop, 60);
// if count is greater than the total number of frames - clear our timeout. Reset the counter back to zero, and then run our loop function again
} else {
clearTimeout(setAnim);
count = 0;
theLoop();
}
}
theLoop();
}

setAnim looks like it wasn't declared, meaning it's a global variable. This means all your calls to loopAnim are using and overwriting the same timer ID reference.

JavaScript - Timer Initiation

I'm trying to make my enemy fire every second. Right now - it's every frame.
Within my enemy object, I have a piece of code that is initiated when the player is within range:
this.shotBullet = false;
var object = this;
object.Fire();
This is the enemy fire function:
this.Fire = function(){
console.debug("Firing | Shot: " + this.shotBullet);
if(!this.shotBullet){
if(this.weapon == "pistol")
PistolEnemy(this);
this.shotBullet = true;
}
};
And my PistolEnemy function:
PistolEnemy = function(operator){
var user = operator;
console.debug("user:" + user.tag);
var bulletDamage = 1;
var bulletSpeed = 20;
var b = new Rectangle( user.x + (user.width / 2) - 4, user.y + (user.height / 2) - 4, 8, 8);
var velocityInstance = new Vector2(0, 0);
velocityInstance.x = Math.cos(user.rotation) * bulletSpeed;
velocityInstance.y = Math.sin(user.rotation) * bulletSpeed;
var bulletInstance = new Bullet(velocityInstance, b, "Enemy", bulletDamage, "blue");
/*audioPistol.volume = 0.5;
audioPistol.currentTime = 0;
audioPistol.play();*/
user.bullets.push(bulletInstance);
user.shotBullet = true;
};
I've tried playing around with the 'setInterval', but it doesn't work well. Most of the times, it waits for a second, then sprays a load of bullets.
All I want it for a enemy bullet to initiate every second.
Thanks

var triggerID = window.setInterval(function(){firing_clock()},1000);
function firing_clock()
{
// this will execute once per second....sort of
}
Mozilla window.setInteral doc
So, one thing you should known is if your browser gets busy it will get 'late'. Mozilla used to have an extra non-standard parameter detailing "actual lateness", but it no longer does - but the point was that you are asking the browser to try to do something once per second, but if it gets busy it will get behind or skip a few rounds (how the browser handles it differs by browser).
Ideally what you would do here is register your enemy object with a list that firing_clock() would work through to dispatch firing commands to all live enemies. This cuts overhead by only using one global timer, rather than one timer per object on screen.
Try this with just one hard-coded enemy and see how it works. If it still doesn't work, then it's a bigger problem as there is no javascript "guaranteed accurate timer" that I'm aware of.
But it should work, so long as things don't get too intense on the client's CPU, and having one global timer for ship firing should allow you to have a good number of ships firing away without too much ill effect.