Web Analytics Made Easy - StatCounter Ellipse algorithm? - CodingForum

Announcement

Collapse
No announcement yet.

Ellipse algorithm?

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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
    Tags: None
  • #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

              Previous template Next
              Working...
              X