Note that there are some explanatory texts on larger screens.

plurals
  1. POThis is an infinite loop, but I cannot for the life of me figure out why
    primarykey
    data
    text
    <p>So pretty much I'm making a little web app to get better with using the canvas, but I'm stuck. I would like a rotating n-sided polygon (the drawing of lines already works). The game loop loops through a grid array (each point on the grid holds a subclass of a Point() object), and calls the tick() method on each. Everything works fine until it hits a ShapePoint() object (middle mouse to place on canvas). The ShapePoint's tick() method is somehow an infinite loop. If you put a console.log("hi") inside it, it will give you about 2000 "hi" messages, so it's working (in theory). The funny bit is, even though it is looping through stoke()'es, nothing is happening!</p> <pre><code>//################################################################ // THIS IS THE PROBLEM CLASS. // So pretty much, when the game loop calls the tick() funciton // of ANY ShapePoint object, everything hangs. The game is still // looping through the ENTIRE tick() function (put console.log() // functions in and you'll see what I mean) continually, but the // effects it is supposed to display aren't shown. // //################################################################ function ShapePoint(x, y, sides) { //position variable this.positionOnCanvas = [x, y]; //number of sides this.N = sides; //current step this.step = 0; //the array to store all the angle data this.thetas = new Array(this.N); //the array to store all the vertex data this.vertList = new Array(this.N); //function to increase all the angels by an even amount this.stepPoints = function(s) { //for every side for (i=0; i&lt;this.N; i++) { //multiply the current 'i' value by ((360/number of sides) + current step). This serves to create points at even intervals all the way around a circle, and have it increase by s every loop this.thetas[i] = i*((360/this.N) + s); //get the x value with 40*cos(angle for this point). Same for y, only with sin. Round both to 2 decimal places this.vertList[i] = [Math.round((40*(Math.cos(this.thetas[i])))*100)/100, Math.round((40*(Math.sin(this.thetas[i])))*100)/100]; //if the current angle is between 90 and 180... if (this.thetas[i]&gt;=90 &amp;&amp; this.thetas[i]&lt;=180) { //invert the x value this.vertList[i][0] *= -1; //else if the angle is between 180 and 270... } else if (this.thetas[i]&gt;=180 &amp;&amp; this.thetas[i]&lt;=270) { //invert both the x and the y values this.vertList[i][0] *= -1; this.vertList[i][1] *= -1; //else if the angle is between 270 and 360... } else if (this.thetas[i]&gt;=270 &amp;&amp; this.thetas[i]&lt;=360) { //invert the y value this.vertList[i][1] *= -1; } //nothing needed for 0-90 because both are positive } } this.tick = function() { //&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;THIS IS THE PROBLEM FUNCTION! //setup all the points forward this.stepPoints(this.step); //for every side in this polyogn... for (i=0; i&lt;this.N; i++) { //shorten the location of the positions var posX = this.vertList[i][0] + this.positionOnCanvas[0]; var posY = this.vertList[i][1] + this.positionOnCanvas[1]; //begin drawing ctx.beginPath(); //move to the x and y location of the current point ctx.moveTo(posX, posY); //if point is not the last in the array... if (i &lt; this.N-1) { //draw a line to the next point in the array ctx.lineTo(this.vertList[i+1][0] + this.positionOnCanvas[0], this.vertList[i+1][1] + this.positionOnCanvas[1]); //else... } else { //draw a line to the first point in the array ctx.lineTo(this.vertList[0][0] + this.positionOnCanvas[0], this.vertList[0][1] + this.positionOnCanvas[1]); } //draw a line ctx.strokeStyle = "#000000"; ctx.lineWidth = 0.5; //end ctx.stroke(); //draw the vertex ctx.fillStyle = "orange"; ctx.fillRect(posX-2, posY-2, 4, 4); } //draw the origin of the polygon ctx.fillStyle = "lightPurple"; ctx.fillRect(this.positionOnCanvas[0]-2, this.positionOnCanvas[1]-2, 4, 4); //if the step is greater than 360, set it to 0 this.step = this.step % 36; //(thanks Neikos!) } } ShapePoint.prototype = new Point(); </code></pre> <p>So I've spent hours tweaking different things, and I cannot for the life of me see what the problem is! If anybody can figure it out, it would be fantastic. If you need more context as to how exactly this is implemented, I've created a <a href="http://jsfiddle.net/TcLrV/" rel="nofollow">JSFiddle</a> for you. Thanks in advance, this place is always so helpfull!</p> <p>EDIT :: I do realize my code is a bit clunky, but I typing out what everything does really helps me learn for the next time</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload