How to draw rectangle spiral?

Question

I'm trying to draw a one pixel width line going form the canvas center and evolving with the canvas width/height ratio as it's drawn.

var x = 0;
var y = 0;
var dx = 0;
var dy = -1;
var width = 200;
var height = 40;
//var i = width * height;
var counter = 0;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');



setInterval(function(){
    //for (i = Math.pow(Math.max(width, height), 2); i>0; i--) {

    if ((-width/2 < x <= width/2)  && (-height/2 < y <= height/2)) {
        console.log("[ " + x + " , " +  y + " ]");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(width/2 + x, height/2 - y,1,1);
    }

   if (x === y  || (x < 0 && x === -y)  || (x > 0 && x === 1-y) || ( -width/2 > x > width/2 ) || ( -height/2 > y > height/2 ) ) {
       // change direction
       var tempdx = dx;
       dx = -dy; 
       dy = tempdx;

   }
   counter += 1;
   //alert (counter);
   x += dx;
   y += dy;       
   }, 1);

I want the spiral to evolve as such:

I'd like to be able to get the ratio between height and width on the equation, so I don't need to calculate the coordinates for points outside the canvas. Also, the purpose is for it to adjust the spiral drawing to the canvas proportions.

Any help would be appreciated.

Answer 1

I nearly crashed my browser trying this. Here, have some code before I hurt myself!

It computes y=f(x) for the diagonal, and y2=f(x) for the antidiagonal, then checks if we're above or below the diagonals when needed.

var x = 0;
var y = 0;
var dx = 0;
var dy = -1;
var width = 200;
var height = 40;
//var i = width * height;
var counter = 0;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

function diag1(x) {
    return x*height/width;
}
function diag2(x) {
    return -1/diag(x);
}

setInterval(function(){
    //for (i = Math.pow(Math.max(width, height), 2); i>0; i--) {

    if ((-width/2 < x && x <= width/2)  && (-height/2 < y && y <= height/2)) {
        console.log("[ " + x + " , " +  y + " ]");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(width/2 + x, height/2 - y,1,1);
    }

    if (dx == 0) {
        if (dy == 1) {
            // moving up
            if (y >= diag1(x)) {
                // then move left
                dy = 0;
                dx = -1;
            }
        }
        else {
            // moving down
            if (y <= diag2(x)) {
                // then move right
                dy = 0;
                dx = 1;
            }
        }
    }
    else {
        if (dx == 1) {
            // moving right
            if (y <= diag1(x)) {
                // then move up
                dy = 1;
                dx = 0;
            }
        }
        else {
            // moving left
            if (y <= diag2(x)) {
                // then move down
                dy = -1;
                dx = 0;
            }
        }
    }

    counter += 1;
    //alert (counter);
    x += dx;
    y += dy;       
}, 1);

Answer 2

A friend helped me handling a proper solution. I only have a 1 pixel offset to solve where I need to move all the drawing to the left by one pixel.

Here's the fiddle for the solution achieved: http://jsfiddle.net/hitbyatruck/c4Kd6/

And the Javascript code below:

var width = 150;
var height = 50;

var x = -(width - height)/2;
var y = 0;
var dx = 1;
var dy = 0;
var x_limit = (width - height)/2;
var y_limit = 0;
var counter = 0;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

setInterval(function(){
    if ((-width/2 < x && x <= width/2)  && (-height/2 < y && y <= height/2)) {
    console.log("[ " + x + " , " +  y + " ]");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(width/2 + x, height/2 - y,1,1);
}
if( dx > 0 ){//Dir right
    if(x > x_limit){
        dx = 0;
        dy = 1;
    }
}
else if( dy > 0 ){ //Dir up
    if(y > y_limit){
        dx = -1;
        dy = 0;
    }
}
else if(dx < 0){ //Dir left
    if(x < (-1 * x_limit)){
        dx = 0;
        dy = -1;
    }
}
else if(dy < 0) { //Dir down
    if(y < (-1 * y_limit)){
        dx = 1;
        dy = 0;
        x_limit += 1;
        y_limit += 1;
    }
}
counter += 1;
//alert (counter);
x += dx;
y += dy;      
}, 1);