code only code that draw a circle ? 8

NEVERSLEEP · May 9, 2002

can someone show me how to create a circle
NOT using some image tricks...
thanks ---------------------------------------

someone knowledge ends where
someone else knowledge starts

Wullie · May 9, 2002

Hi mate,

This may or may not do what you want..

Code:

<SCRIPT LANGUAGE=&quot;JavaScript1.2&quot;>
function Circle (cx, cy, radius, color, dotSize, da) {
  this.id = Circle.cnt++;
  this.cx = cx || 100;
  this.cy = cy || 100;
  this.radius = radius || 100;
  this.color = color || 'black';
  this.dotSize = dotSize || 1;
  this.da = da || Math.PI / 180;
  this.left = this.cx - radius;
  this.top = this.cy - radius;
  this.width = 2 * this.radius + this.dotSize;
  this.height = 2 * this.radius + this.dotSize;
  this.relX = this.radius;
  this.relY = this.radius;
  if (document.layers) {
    var l = this.layer = new Layer (this.width);
    l.left = this.left;
    l.top = this.top; 
    l.clip.width = this.width;
    l.clip.height = this.height;
    l.visibility = 'show';
  }
  else if (document.all || document.getElementById) {
    var html = '';
    html += '<DIV ID=&quot;Circle' + this.id + '&quot;';
    html += ' STYLE=&quot;position: absolute;';
    html += ' left: ' + this.left + 'px; top: ' + this.top + 'px;';
    html += ' width: ' + this.width + 'px; height: ' + this.height 
+ 'px;';
    html += '&quot;';
    html += '>';
    html += '<\/DIV>';
    if (document.all) {
      document.body.insertAdjacentHTML('beforeEnd', html);
      this.layer = document.all['Circle' + this.id];
    }
    else if (document.getElementById) {
      var range = document.createRange();
      range.setStartAfter(document.body.lastChild);
      var docFrag = range.createContextualFragment(html);
      document.body.appendChild(docFrag);
      this.layer = document.getElementById('Circle' + this.id);
    }
  }
  for (var a = 0; a < Math.PI * 2; a += this.da) {
    var x = this.relY + this.radius * Math.sin(a);
    var y = this.relY + this.radius * Math.cos(a);
    if (document.layers) {
      l = new Layer (this.dotSize, this.layer);
      l.clip.width = this.dotSize;
      l.clip.height = this.dotSize;
      l.bgColor = this.color;
      l.left = x;
      l.top = y;
      l.visibility = 'inherit';
    }
    else if (document.all || document.getElementById) {
      var html = '';
      html += '<SPAN';
      html += ' STYLE=&quot;position: absolute; visibility: inherit;';
      html += ' left: ' + x + 'px; top: ' + y + 'px;';
      html += ' width: ' + this.dotSize + 'px; height: ' + this.dotSize 
+ 'px;';
      html += ' background-color: ' + this.color + ';';
      html += document.all ? 
        'clip: rect (0 ' + this.dotSize + ' ' + this.dotSize + ' 0);' :
        '';
      html += '&quot;';
      html += '>';
      html += '<\/SPAN>';
      if (document.all) {
        this.layer.insertAdjacentHTML('beforeEnd', html);
      }
      else if (document.getElementById) {
        var range = document.createRange();
        range.setStartAfter(this.layer);
        var docFrag = range.createContextualFragment(html);
        this.layer.appendChild(docFrag);
      }
    }
  }
}
Circle.cnt = 0;  
</SCRIPT>
<SCRIPT>
var circle1, circle2;
function init () {
  var cx = window.innerWidth ?
    parseInt(window.innerWidth / 2) :
    parseInt(document.body.clientWidth / 2);
  var cy = window.innerHeight ?
    parseInt(window.innerHeight / 2) :
    parseInt(document.body.clientHeight / 2);
  circle1 = new Circle (cx, cy, 100, 'lime');
  circle2 = new Circle (cx, cy, 150, 'orange', 2);
}
</SCRIPT>
<BODY ONLOAD=&quot;init();&quot;>

Hope this helps

Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

NEVERSLEEP · May 9, 2002

many thanks

[atom]

---------------------------------------

someone knowledge ends where
someone else knowledge starts

xutopia · May 9, 2002

a star to wullie. Gary

http://www.xutopia.com

Haran

NEVERSLEEP · May 9, 2002

how about a full solid circle ?

is there a official list
of accepted jsfunction by browser ?

many thanks

and another..star ---------------------------------------

someone knowledge ends where
someone else knowledge starts

gnet · May 9, 2002

wow, that is A LOT of code to draw a circle! i can't wait for SVG to become a standard.

Wullie · May 9, 2002

how about a full solid circle ?

LOL I am not sure mate, I will try but not guaranteeing anything..

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

NEVERSLEEP · May 9, 2002

alright !

---------------------------------------

someone knowledge ends where
someone else knowledge starts

xutopia · May 10, 2002

wullie,

Could you tell us where you got this script from please? Gary

http://www.xutopia.com

Haran

Wullie · May 10, 2002

xutopia,

A friend gave me the code last month as I needed something similar..

I am really not sure if he wrote it or found it on the net..

I will find out when I see him and let you know..

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.searchit-now.co.uk

http://www.survivorhelp.co.uk

gnet · May 12, 2002

this thread got my curiosity going, so i opened up my math book and after some tweaking i managed to write a circle script that is a lot simpler than the one above IMHO:

Code:

<style>
I {position:absolute; width:1; height:1; clip:rect(0 1 1 0); background-color:red}
#circle {position:absolute; clip:rect(0 630 400 0)}
</style>
<script>
D = document;
IE = D.all;
function plotCircle(radius,layer) {
	plot = '';
	pi = Math.PI;
	x = -pi;
	while (x<pi+.000078125) {
		y = Math.sqrt((radius*radius-x*x));
		if (!isNaN(y)) {
			if (IE) plot += '<i style=left:' + Math.round(x*50+314) + ';top:' + Math.round(y*50+200) + '></i>';
			else D[layer].document.write('<layer left=' + Math.round(x*50+314) + ' top=' + Math.round(y*50+194) + '><font size=1 color=red>·</layer>');
		}
		if (x>-pi+.78 && x<pi-.78) x += .02;
		else if (x>-pi+.26 && x<pi-.26) x += .01;
		else if (x>-pi+.06 && x<pi-.08) x += .005;
		else if (x>-pi+.003 && x<pi-.004) x += .00125;
		else x += .000078125;
	}
	x = pi;
	while (x>-pi-.000078125) {
		y = -Math.sqrt((radius*radius-x*x));
		if (!isNaN(y)) {
			if (IE) plot += '<i style=left:' + Math.round(x*50+314) + ';top:' + Math.round(y*50+200) + '></i>';
			else D[layer].document.write('<layer left=' + Math.round(x*50+314) + ' top=' + Math.round(y*50+194) + '><font size=1 color=red>·</layer>');
		}
		if (x<pi-.78 && x>-pi+.78) x -= .02;
		else if (x<pi-.26 && x>-pi+.26) x -= .01;
		else if (x<pi-.06 && x>-pi+.08) x -= .005;
		else if (x<pi-.003 && x>-pi+.004) x -= .00125;
		else x -= .000078125;
	}
	if (IE) IE[layer].innerHTML = plot;
}
</script>
<div id=circle></div>
<TABLE width=630 height=400 bgcolor=black><tr><td><br></td></tr></TABLE>
<FORM>
<input type=button value=Draw! onClick=plotCircle(Math.PI,'circle')><br><br>
</FORM>

since a property of a circle is that x and y are always going to be the same distance from the center (0,0 in this case), you basically take the radius equation (sqrt of r^2-x^2) and run a loop through x to evaluate its y function. voila, by the end of the loop you've got yourself a circle

.

the code above is just a concept...ideally there should be a multiplier to automatically iterate x depending on a given radius or else you'll have a broken circle if you plug in a really big radius. the reason i didn't iterate x by .000078125 all the way through is because that'll bring most systems to a crawl.

after playing with javascript's built-in math functions, i reckon that theoretically any symmetric pattern can be drawn with javascript. yes, your browser is also a fractal generator! 8)

NEVERSLEEP · May 12, 2002

very nice !
can u make it a full red circle ? ---------------------------------------

someone knowledge ends where
someone else knowledge starts

gnet · May 12, 2002

yes. you already have the radius, so loop y from 0 to pi, then for each y position, write a red 1px high x layer with length = x*2. that should do the trick, hope that helps.

SashiRaveendran · May 13, 2002

IE4 and IE5 have drawing objects that make drawing a piece of cake.

xutopia · May 13, 2002

sjravee,

Where is the fun in using something that only works in IE? Gary

http://www.xutopia.com

Haran

SashiRaveendran · May 13, 2002

Because by the time you got it to work in Netscrap its no longer fun

Sleidia · May 13, 2002

Hello,

What about this one:

& #9679

That's short and cross-browser!

You can even have triangles!

Have a good day all.

xutopia · May 13, 2002

I gave a star to sleida for proving my point. Gary

http://www.xutopia.com

Haran

SashiRaveendran · May 13, 2002

the code proves a point but its not very versatile. Cant specify dimensions with the above method or cannot use it for scale drawings etc, even though I like the simplicity of it.

Sleidia · May 13, 2002

You can make drawings too!

X
& #9679;
& #9678;

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

code only code that draw a circle ? 8

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Technical User

Programmer

Programmer

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor