javascript - why my animation with html5 canvas is so flickery? -


i want keep animation is, problem flickering of animation.

if reason question needs more elaborate on, please let me , explain in more details.

var text = 'got it';      document.getelementbyid('mycanvas').style.backgroundcolor = 'lightgray';      var ctx = document.getelementbyid('mycanvas');      var c = ctx.getcontext('2d');        function ball(x, y, zx, zy, rotation,goldx,goldy) {      this.x = x;      this.y = y;        this.zx = zx;      this.zy = zy;      this.rotation = rotation;      this.goldx = goldx;      this.goldy = goldy;      this.draw = function() {          c.beginpath();      c.settransform(1, 0, 0, 1, 0, 0);         c.translate(0, 0.01);          c.rotate(this.rotation);      c.fillstyle = 'black';          c.font="10px corsive";      c.filltext("$100", this.x, this.y + 10);      c.strokestyle = "gray"        c.rect(this.x, this.y, 24,14);      c.fillstyle = 'rgba(0, 128, 0, 0.49)';      c.fill();      c.stroke();      c.closepath();        }        var x = math.floor(math.random() *10);      this.draw1 = function() {      c.beginpath();      c.arc(this.goldx, this.goldy, 5, math.pi*2,false);        c.fillstyle = 'gold';      c.fill();      c.stroke();      }        this.update = function() {      var b = math.random() * 500;      if(this.y  > 510 || this.x > 510 || this.x  < -30) {ballarray.splice(i,1)}        this.x += this.zx;      this.y += this.zy;            if(ballarray.length < 99) {ballarray.push(new ball(this.x,20,this.zx,this.zy, this.rotation))}        if(x > 350) { this.rotation += 0.00009} else {this.rotation -= 0.00009};      this.draw();        if(this.goldy  > 510 || this.goldx > 510 || this.goldx  < 0) {goldarray.splice(j,1)}      if(goldarray.length < 49) {goldarray.push(new ball(0,0,0,0,0,goldx,goldy))}      this.goldy += 1;               this.draw1();       }             }      var goldarray = [];        (j = 0; j < 50; j++){      var goldx = math.random() * 500;      var goldy = math.random() * 500;      goldarray.push(new ball(0,0,0,0,0,goldx,goldy));      }      var ballarray = [];        for(i= 0; < 100; i++) {      var x = math.random() * 500;      var y = math.random() * 500;      var zx = math.random() - 0.5;      var zy = 1;      var rotation = 0;      ballarray.push(new ball(y,x,zx,zy,rotation,goldx,goldy));      }        function animate() {      requestanimationframe(animate);      c.clearrect(0,0,500, 500);       for(j = 0; j< goldarray.length; j++) {       goldarray[j].update();       }      for(i = 0; < ballarray.length; i++) {      ballarray[i].update();         }        }        animate();
<canvas id="mycanvas" width="500" height="500" style="border: 1px solid black"></canvas>

array splice causing skip objects

your animation flicking because of lot of reasons.

the main 1 being way delete ball , or gold. call update function within loop.

for(i = 0; < balls.length; i++){     balls[i].update(); }

then in update function test if ball out of bounds. if remove array

if(this.y > 510) { //  example not code      balls.splice(i,1); }

but ignore fact have moved balls above 1 in array down 1 index. when update function returns ball @ i has been removed , next 1 above @ i. loop increments i , draw next ball, skipping ball.

the skipped ball not rendered frame , flicker. same gold.

quick fix

there other problems (many) , give fix require complete rewrite.

what can reset ball , gold rather delete , create another.

where have

if(this.y  > 510 || this.x > 510 || this.x  < -30) { ballarray.splice(i,1) }

change to

if(this.y  > 510 || this.x > 510 || this.x  < -30) {      this.x = math.random() * 500;      this.y = math.random() * 500;      this.zx = math.random() - 0.5;      this.zy = 1;      this.rotation = 0;          }

and remove line

if(ballarray.length < 99) {ballarray.push(new ball(this.x,20,this.zx,this.zy, this.rotation))}

do same gold.

that ready next problem.

some code notes.

you still have problems because have gold , ball 1 object rendering both ball , gold each ball , same each gold.

you need ball , gold separate objects, gold not draw ball , other way around.

you should have

 function gold(){       this.draw(){ // draw code      this.update() { // update code      ...  }  function ball(){ /* code */      this.draw(){ // draw code      this.update() { // update code      ...  }

and create each

 ballarray.push(new ball( stuff));  goldarray.push(new gold( stuff));

also have need declare variables have not done i,j end in global scope , come bug soon.

whenever use variable must have @ location inside function declaration.

eg

 function animate(){      var i;      var j;      ... rest of code.

oh , more...

but leave there now.


Comments

Post a Comment

Popular posts from this blog

resizing Telegram inline keyboard -

telegram's inline keyboard great feature lots of different use cases. inline buttons added list of items this: inline_keyboard = [[inlinekeyboardbutton(text="button", callback_data="button"), inlinekeyboardbutton(text="reset",callback_data="reset")]] inline_keyboard_markup = inlinekeyboardmarkup(inline_keyboard) update.message.reply_text("hi", reply_markup=inline_keyboard_markup) the above code adds 2 buttons each half width of chat screen. i know the normal keyboard button there resize_keyboard parameter somehow can used. my question is there way resize inline buttons ? example make full width or quarter width. unfortunately, can't now. :( you can suggest @botsupport , might add feature next version.
Read more

javascript - How to bind ViewModel Store to View? -

i'm pretty new ext js , trying embed multiselect inside panel . the viewmodel has stores property can see here: ext.define('test.view.controls.search.searchfiltermodel', { extend: 'ext.app.viewmodel', alias: 'viewmodel.filter', data: { title: '' }, stores: { test: { fields: [ 'id', 'name' ], proxy: { type: 'ajax', url: 'api/test', reader: 'array' }, autoload: true } } }); i bind in view this: viewmodel: { type: 'filter' }, layout: 'fit', border: 1, plain: true, scrollable: 'y', layout: 'fit', bind: { title: '{title}', }, items: { xtype: 'multiselect', scrollable: false, allowblank: true, ddreorder: true, bind: { store: '{test}' }, valuefield: 'id', displayfield: 'name' } ...
Read more

python - Alternative to referencing variable before assignment -

import time # define variables username = "username" password = "password" customer_info_file_path = "c:\\users\megam\pycharmprojects\general stuff\the square pie co\customer " \ "information\{}.txt ".format(name) username_entry = input("enter username\n>>") password_entry = input("enter password\n>>") if username_entry != username or password_entry != password: print("access denied\nyou have entered username or password incorrectly. please check password , " "account name , try again.\n") else: print("access granted") choice_menu = input("\na) view list of customers\nb) add customer\nc) delete customer\nd) log out\n>>") if choice_menu == "a": customer_info = open(customer_info_file_path, 'a', ) file = open(customer_info_file_path, 'r') output = file.read() ...
Read more