Web Analytics Made Easy -
StatCounter Ellipse algorithm? - CodingForum

Announcement

Collapse
No announcement yet.

Ellipse algorithm?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Ellipse algorithm?

    I am looking for a Ellipse algorithm, and I can't find any without specifying steps.
    here is an algorithm I found:
    Code:
    function calculateEllipse(x, y, a, b, angle, steps){
      if (steps == null)
        steps = 36;
      var points = [];
     
      // Angle is given by Degree Value
      var beta = -angle * (Math.PI / 180); //(Math.PI/180) converts Degree Value into Radians
      var sinbeta = Math.sin(beta);
      var cosbeta = Math.cos(beta);
     
      for (var i = 0; i < 360; i += 360 / steps) 
      {
        var alpha = i * (Math.PI / 180) ;
        var sinalpha = Math.sin(alpha);
        var cosalpha = Math.cos(alpha);
     
        var X = Math.floor(x + (a * cosalpha * cosbeta - b * sinalpha * sinbeta));
        var Y = Math.floor(y + (a * cosalpha * sinbeta + b * sinalpha * cosbeta));
        drawPixel(X,Y);
       }
    }
    can anyone help me solve this algorithm problem or get me a new one.

    thanks.
    Shedokan - Free Online Games

  • #2
    You can just remove that variable from the script:
    Code:
    function calculateEllipse(x, y, a, b, angle){
    // Angle is given by Degree Value
    var beta = -angle * (Math.PI / 180); //(Math.PI/180) converts Degree Value into Radians
    var sinbeta = Math.sin(beta);
    var cosbeta = Math.cos(beta);
    for (var i = 0; i < 360; i++) {
        var alpha = i * (Math.PI / 180) ;
        var sinalpha = Math.sin(alpha);
        var cosalpha = Math.cos(alpha);
        var X = Math.floor(x + (a * cosalpha * cosbeta - b * sinalpha * sinbeta));
        var Y = Math.floor(y + (a * cosalpha * sinbeta + b * sinalpha * cosbeta));
        drawPixel(X,Y);
       }
    }

    Comment


    • #3
      thanks! I'm just very bad with algorithms.

      but there are a lot of pixels near each other but in drawing programs like MS paint there are no pixels near each other.

      maybe remove somehow the degree?
      Shedokan - Free Online Games

      Comment


      • #4
        For fewer pixel drawings, try:
        for (var i = 0; i < 360; i=i+5) { // or i=i+2

        or even:
        for (var i = 0; i < 360; i=i+10) {

        Change increment to whatever looks good to you.

        Comment


        • #5
          it works but just like it did before, the problem with this is that if you change the height or the width you have to input a different value.

          and I tested aa lot with diffrent heights and different values and couldn't find an algorithm.
          Shedokan - Free Online Games

          Comment


          • #6
            can you post the whole code? Where's drawPixel? Can I see it?

            heheh I'm just curious to see it work.

            Comment


            • #7
              I'm using canvas, it's for a painting application.
              here is the code that's involved:
              Code:
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he">
              <head>
              	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
              	<title>Paint</title>
              	<link type="text/css" href="theme/jquery-ui-1.7.custom.css" rel="Stylesheet" />
              	<style type="text/css">
              body {
              background:#CCC;
              }
              	</style>
              </head>
              <body>
              	<canvas id="canvas" width="200" height="200" style="background:#FFF;"></canvas>
              	<script type="text/javascript" src="jquery.plus.plugins.php"></script>
              	<script type="text/javascript">
              paint={
              	zoom:5,
              	canvas:$('#canvas')[0].getContext("2d")
              };
              function createMap(){
              	paint.image=[];
              	y=0;
              	do{
              		paint.image[y]=[];
              		x=0;
              		do{
              			paint.image[y][x]='';
              		} while(++x<paint.width)
              	} while(++y<paint.height);
              }
              function drawPixel(x,y,c,canvas){
              	if(!paint.image[y] || x<0 || x>=paint.width || (paint.image[y][x]==c && canvas!=paint.tempCanvas))
              		return false;
              	zoom=paint.zoom;
              	canvas.clearRect(x*zoom, y*zoom, zoom, zoom);
              	//console.log(c);
              	if((c!='#FFFFFF' && c!='') || canvas==paint.tempCanvas){
              		canvas.fillStyle = c;
              		canvas.fillRect(x*zoom, y*zoom, zoom, zoom);
              	}
              	if(canvas!=paint.tempCanvas)
              		paint.image[y][x]=c;
              }
              function calculateEllipse(x, y, w, h, angle){
              	c='#000000';
              	canvas=paint.canvas;
              	var beta = -angle * (Math.PI / 180); //(Math.PI/180) converts Degree Value into Radians
              	var sinbeta = Math.sin(beta);
              	var cosbeta = Math.cos(beta);
              
              	for (var i = 0; i < 360; i+=5) {
              		var alpha = i * (Math.PI / 180) ;
              		var sinalpha = Math.sin(alpha);
              		var cosalpha = Math.cos(alpha);
              		var X = Math.floor(x + (w * cosalpha * cosbeta - h * sinalpha * sinbeta));
              		var Y = Math.floor(y + (w * cosalpha * sinbeta + h * sinalpha * cosbeta));
              		drawPixel(X,Y,c,canvas);
              	}
              }
              function drawCircle(x0,y0,width,height,c,canvas){
              	width=Math.floor(width/2);
              	height=Math.floor(height/2);
              	f = 1 - ((width<height)?width:height);
              	ddF_x = 1;
              	ddF_y = -2*height;
              	x = 0;
              	y = height;
              
              	drawPixel(x0, y0 + height,c,canvas);
              	drawPixel(x0, y0 - height,c,canvas);
              	drawPixel(x0 + width, y0,c,canvas);
              	drawPixel(x0 - width, y0,c,canvas);
              
              	while(x < y){
              		console.log('x: '+x+', ddF_x: '+ddF_x+', y: '+y+', ddF_y: '+ddF_y);
              		if(f >= 0) {
              			--y;
              			ddF_y += 2;
              			f += ddF_y;
              		}
              		++x;
              		ddF_x += 2;
              		f += ddF_x;
              		drawPixel(x0 + Math.floor(x/2), y0 + y,c,canvas);
              		drawPixel(x0 - Math.floor(x/2), y0 + y,c,canvas);
              		drawPixel(x0 + Math.floor(x/2), y0 - y,c,canvas);
              		drawPixel(x0 - Math.floor(x/2), y0 - y,c,canvas);
              		drawPixel(x0 + Math.floor(y/2), y0 + x,c,canvas);
              		drawPixel(x0 - Math.floor(y/2), y0 + x,c,canvas);
              		drawPixel(x0 + Math.floor(y/2), y0 - x,c,canvas);
              		drawPixel(x0 - Math.floor(y/2), y0 - x,c,canvas);
              	}
              }
              //
              paint.width=200;
              paint.height=200;
              createMap();
              
              calculateEllipse(25, 25, 4, 10, 0);
              //drawCircle(20,20,4,4,'#000000',paint.canvas);
              	</script>
              </body>
              </html>
              for the complete paint program you'll have to wait for it o get out here: http://shedokan.110mb.com/os
              Shedokan - Free Online Games

              Comment

              Working...
              X