javascript - How to make canvas elements reach the center of the canvas -
i'm populating canvas arcs @ random position want them move center of canvas, jump center of canvas , not moving center. road far
<canvas id="mycanvas"></canvas> <script> var mycanvas = document.getelementbyid("mycanvas"); var c = mycanvas.getcontext("2d"); mycanvas.style.backgroundcolor = "#000"; mycanvas.width = 600; mycanvas.height = 600; var myarr = []; var firstcircle; function circledraw(x, y, r) { this.x = x; this.y = y; this.r = r; this.draw = function() { c.beginpath(); c.arc(this.x, this.y, this.r, 0, math.pi * 2); c.fillstyle = "#fff"; c.fill(); } this.update = function() { this.x = mycanvas.clientwidth/2; this.y = mycanvas.clientheight/2; } } for(var =0; < 10; i++){ var x = math.random() * mycanvas.clientwidth; var y = math.random() * mycanvas.clientheight; var r = 20; firstcircle = new circledraw(x, y, 20); firstcircle.draw(); myarr.push(firstcircle); } setinterval(circlefall, 1000); function circlefall() { c.clearrect(0,0, mycanvas.clientwidth, mycanvas.clientheight); for(var z =0; z < myarr.length; z++){ myarr[z].update(); firstcircle.draw(); } } </script> how fix this??
edit:
<script> var canvas = document.getelementbyid("mycanvas"); var c = canvas.getcontext("2d"); canvas.width = 600; canvas.height = 600; canvas.style.backgroundcolor = "#e74c3c"; function vectors(x, y, r) { this.x = x; this.y = y; this.r = r; var centerx = canvas.width/2; var centery = canvas.height/2; var diffx = centerx - this.x; var diffy = centery - this.y; var angle = math.atan(diffy, diffx); var speed = 1; var vector = { x: math.cos(angle) * speed, y: math.sin(angle) * speed } this.draw = function() { c.beginpath(); c.arc(this.x, this.y, this.r, 0, math.pi * 2); c.fillstyle = '#fff'; c.fill(); } this.update = function() { this.x += vector.x; this.y += vector.y; } } var newcircle = new vectors(90, 100, 10); function animate() { window.requestanimationframe(animate); c.clearrect(0, 0, canvas.width, canvas.height); newcircle.update(); newcircle.draw(); } animate(); the first arc placed co-ordinates rather random position it's not moving towards center.
the mycanvas.clientwidth/2 , mycanvas.clientheight/2 return same result, in case center point of canvas.
a better approach use vector based on angle between original point , center - like:
var diffx = mycanvas.width / 2 - this.x, diffy = mycanvas.height / 2 - this.y, angle = math.atan2(diffy, diffx), speed = 1; var vector = { x: math.cos(angle) * speed, y: math.sin(angle) * speed }; then in update method add vector position:
this.update = function() { // todo add checks here see if it's close enough center this.x += vector.x; this.y += vector.y; } combine requestanimationframe() instead of using setinterval() make animation silk smooth well.
var mycanvas = document.getelementbyid("mycanvas"); var c = mycanvas.getcontext("2d"); mycanvas.style.backgroundcolor = "#000"; mycanvas.width = 600; mycanvas.height = 600; var myarr = []; var firstcircle; function circledraw(x, y, r) { this.x = x; this.y = y; this.r = r; var cx = mycanvas.width/2, cy = mycanvas.height/2, diffx = cx - this.x, diffy = cy - this.y, angle = math.atan2(diffy, diffx), speed = 1; var tolerance = 2; var vector = { x: math.cos(angle) * speed, y: math.sin(angle) * speed }; this.update = function() { if (!(this.x > cx - tolerance && this.x < cx + tolerance && this.y > cy - tolerance && this.y < cy + tolerance)) { this.x += vector.x; this.y += vector.y; } else { /* can used detect finished action */ } } this.draw = function() { c.beginpath(); c.arc(this.x, this.y, this.r, 0, math.pi * 2); c.fillstyle = "#fff"; c.fill(); } } for(var =0; < 10; i++){ var x = math.random() * mycanvas.width; var y = math.random() * mycanvas.height; var r = 20; firstcircle = new circledraw(x, y, 20); firstcircle.draw(); myarr.push(firstcircle); } (function circlefall() { c.clearrect(0,0, mycanvas.clientwidth, mycanvas.clientheight); for(var z =0; z < myarr.length; z++){ myarr[z].update(); myarr[z].draw(); // make sure draw th current circle } requestanimationframe(circlefall); })();<canvas id="mycanvas"></canvas>a different approach use linear interpolation allows dots finish in center @ same time:
var mycanvas = document.getelementbyid("mycanvas"); var c = mycanvas.getcontext("2d"); mycanvas.style.backgroundcolor = "#000"; mycanvas.width = 600; mycanvas.height = 600; var myarr = []; var firstcircle; function circledraw(x, y, r, step) { var startx, starty; var cx = mycanvas.width / 2; var cy = mycanvas.height / 2; this.x = startx = x; this.y = starty = y; this.r = r; this.t = 0; this.step = step; // since work normalized values, tend small function lerp(v1, v2, t) { // linear interpolation return v1 + (v2 - v1) * t; // t = [0.0, 1.0] 0 = v1, 1 = v2 } this.update = function() { if (this.t <= 1) { this.x = lerp(startx, cx, this.t); // set abs. position based on t this.y = lerp(starty, cy, this.t); this.t += this.step; // increase step t } else { /* can used detect finished action, example resetting pos */ this.x = startx = math.random() * mycanvas.width; this.y = starty = math.random() * mycanvas.height; this.t = 0; } } this.draw = function() { c.beginpath(); c.arc(this.x, this.y, this.r, 0, math.pi * 2); c.fillstyle = "#fff"; c.fill(); } } for(var =0; < 10; i++){ var x = math.random() * mycanvas.width; var y = math.random() * mycanvas.height; var r = 20; firstcircle = new circledraw(x, y, 20, math.random() * 0.04 + 0.005); firstcircle.draw(); myarr.push(firstcircle); } (function circlefall() { c.clearrect(0,0, mycanvas.clientwidth, mycanvas.clientheight); for(var z =0; z < myarr.length; z++){ myarr[z].update(); myarr[z].draw(); // make sure draw th current circle } requestanimationframe(circlefall); })();<canvas id="mycanvas"></canvas>
Comments
Post a Comment