Forums » Help » How to "show prediction" of where something my travel?

Ok. I've taken a stab at how to do this but I'm not at all happy with it. The end goal is that the user can aim the cannon and the game will draw an arc showing how it will fly when fired. I have figured out how to draw the line, but only in game time by spawning an entity with that velocity and then recording its position on every tick. Then drawing those positions as red dots on the screen. What I want to happen is to show where it will fly in real time, vs having to wait for the game to step() 30 or so times to show it.

If you try the demo below you can aim the cannon, and then keep your mouse steady and it will show you how the projectile will fly via red-dots. Any help?

Demo:
http://coreysnyder.me/ZombieHolidayGame/

My code:

.............
update: function(){

            if(this.positionLog.length < 60){
                this.positionLog.push({x: this.pos.x, y: this.pos.y});
            }
}, 
draw: function(){
           var prevPos = this.positionLog[0];
            var currPos = {};
            ig.system.context.strokeStyle = "red";
            ig.system.context.lineWidth = 4;
            ig.system.context.beginPath();

            for(i = 0; i< this.positionLog.length; i++){
                currPos = this.positionLog[i];
                ig.system.context.beginPath();
                ig.system.context.moveTo(currPos.x, currPos.y);
                ig.system.context.lineTo(currPos.x+1, currPos.y+1);
                ig.system.context.stroke();
                ig.system.context.closePath();
                prevPos = currPos;
            }
            ig.system.context.closePath();
}

Updated with better details & some demo code. I could really use some help on this if anyone's done something similar.

Does your cannon always shoot with the same force and only take changes in angle?

If so, you could run a series of test shots in a for loop for each degree, and record where it lands, and also on each update (or every 0.1 seconds) take a sample of where the cannon ball is.

Then at the end store all your values as a lookup-array using degrees as your index.

Then it should be simple to lookup the "prediction" in a table as soon as you know the angle of the cannon.

Joncom - I didn't even think of creating a lookup-array! Unfortunately the cannon takes:
- X Velocity
- Y Velocity
- Starting X (because the cannon moves up/down as it rotates)
- Starting Y

So It's not as simple as just a single dimensional look-up-array. Do you think I could skip on record the starting X/Y because the likelihood that the different shots @ different angles share the same X/Y Velocities is slim?

To slim up the array I could get away with sampling the shot, and recording only every X # of steps. I might have to tweak that to get it right though.

Another way I could slim up the array is to only take shots at whole numbers and then do round up/down when I am retrieving the values.

Is an array a better option than using an object which could then have key/value pairs for the different velocities and their data? Like:

var shotLookup = {
    XVelocity: {
        YVelocity1: ShotData,
        YVelocity2: ShotData
    },
    10: {
        10: [{x: 1, y: 1}, {x:11, y: 11}, ...],
        11: [{x: 1, y: 1}, {x:11, y: 12},....]
    }
    .....
    
}

Thanks for the feedback. Anyone else have any ideas how to solve this programming puzzle?

This is not going so well. After a couple days of messing with it, I've got close, but no cigar.

Here's what I did. I wrote a script which would shoot snowballs at numerous angles & velocities. Then I modified my weapon.js entity to record its location to a global variable like so.

update: function(){ 
    .....
    if(posCounter === 3 && posTotal <= 7){
                console.log(this.pos.x, this.pos.y);
                this.posmap.push({x: this.pos.x, y: this.pos.y});
                posCounter = 0;
                posTotal++;
     }
     posCounter++;
    .....

Then On Kill() It saves this.posMap to a a global object with that angle & velocity as keys. So I get a record of the first 7 points of the arch at every angle and velocity that I need. And then I let this go, and every 1.2 seconds it fired a shot and tracked its position until all points were tracked. What I ended up with was some really screwy data.

Here's an example of one of the set of points:

[Object, Object, Object, Object, Object, Object, Object, Object]
0: Object
x: 101.60858301891956
y: 275.2500225540469
__proto__
1: Object
x: 128.95526337528764
y: 261.3438615890414
__proto__
2: Object
x: 156.3019437316557
y: 249.64290062404626
__proto__: Object
3: Object
x: 182.86729036357644
y: 240.37725854376902
__proto__
4: Object
x: 399.81762119081037
y: 242.65324822194802
__proto__
5: Object
x: 427.4247461219942
y: 252.9028476288206
__proto__
6: Object
x: 454.7714264783623
y: 265.2676866639429
__proto__
7: Object
x: 481.5972176850987
y: 279.532604955557

Notice that jump in the X coordinate from 3 to 4? It jumps from '182.86' to '399.81'. Obviously the ball did not teleport through time to move ahead in 1 step(or 3 frames). My only idea is that the browser/pc lagged enough to cause this. How I'm firing the shots is by using this code:

startLogShots: function(){
                this.startPos.x = 110;
                this.startPos.y = 200;
                this.slingPos.x = 650;
                this.slingPos.y = 150;

                // X Lowest = 150, highest = 500
                // Y Lowest 28 highest 275
                var that = this;
                timeout = 0;
                for(x=150; x <= 500; x+=5){

                    if(x< 200){
                        incY = 10;
                    }else{
                        incY = 15;
                    }

                    for(y=275; y >= 30; y-=incY){

                        if(y > 125 && x < 170){
                            y = y - 5;
                        }
                        setTimeout(function(obj){
                                console.log("X: " + that.slingPos.x, "Y: " + that.slingPos.y )
                                var x = obj.x;
                                var y = obj.y;
                                that.slingPos.x = x;
                                that.slingPos.y = y;
                                that.shoot();},
                            timeout, {x: x, y: y}
                        );
                        timeout += 1200;
                    }

                }
            }

Can anyone explain why this might have happened? Is my logic off? I'm getting desperate to solve this and I'm quite frustrated.