Making a circle out of . (periods) [closed]
I am trying to make a function that will draw a circle out of periods with only being given a starting x and y and a radius. Is it possible?
Here's the maths and even an example program in C:
http://pixwiki.bafsoft.com/mags/5/articles/circle/sincos.htm (link no longer exists).
And position: absolute, left and top will let you draw:
http://www.w3.org/TR/CSS2/visuren.html#choose-position
Any further questions?
I know you asked for just the circumference, but it seemed easier to do a filled circle.
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
</head>
<body>
<script type="text/javascript">
function drawCircle(left, top, radius) {
var pre = $("<pre/>").css({position: "absolute", top: top, left: left}).appendTo($("body"));
var testSpan = $("<span> </span>").appendTo(pre);
var cellWidth = testSpan.width();
var cellHeight = testSpan.height();
testSpan.remove();
var diameter = 2 * radius;
var dotArray = [];
for (var row = 0; row <= diameter / cellHeight; row++) {
for (var column = 0; column <= diameter / cellWidth; column++) {
var cellDY = Math.abs(row * cellHeight - radius) - cellHeight / 2;
var cellDX = Math.abs(column * cellWidth - radius) - cellWidth / 2;
var distance = Math.pow(cellDY, 2) + Math.pow(cellDX, 2);
if (distance < Math.pow(radius, 2)) {
dotArray.push(".");
} else {
dotArray.push(" ");
}
}
dotArray.push("<br/>");
}
pre.html(dotArray.join(""));
}
drawCircle(20, 20, 200);
</script>
</body>
</html>
Yes, it is possible. Put the below code into an html file to see it in action.
A quick run through: The code generates an array of dots and spaces. It chooses to make a dot based on if the distance from the current x, y position to the center of the circle is less than or equal to the length of the radius via the distance formula ( http://www.purplemath.com/modules/distform.htm ).
<div id= "mydiv" style="font-family: monospace"> </div>
<script type="text/javascript">
var x = 2; //starting x,y position of circle
var y = 5;
var rad = 4; //radius of circle
var width = 10; //width and height of display
var height = 10;
var dotArray = "";
for (var i=0;i<width;i++){
for (var j=0;j<height;j++){
if (Math.sqrt( Math.pow(i-y, 2) + Math.pow(j-x, 2)) <= rad){
dotArray += (".");
} else {
dotArray += (" ");
}
}
dotArray += "<br \>";
}
document.getElementById('mydiv').innerHTML = dotArray;
</script>
<script type="text/javascript">
var e=0;
function a() {
if(e<=7200){
var f = (180-e)/2;
var g = 90-e;
var h = f-g;
var j = Math.sin(g)*300;
var n = Math.cos(g)*300;
var m = 300-j;
var newX = 900-m;
var newY = 300+n;
document.write("<p class=lol style=position:absolute;left:"+newX+";top:"+newY+">.</p>");
e++;
}
}
setInterval("a()", 1);
</script>
<script type="text/javascript">
var e=0;
function a() {
if(e<=7200){
var f = (180-e)/2;
var g = 90-e;
var h = f-g;
var j = Math.sin(g)*300;
var n = Math.cos(g)*300;
var m = 300-j;
var newX = 900-m;
var newY = 300+n;
document.write("<p class='lol' style='position:absolute;left:"+newX+";top:"+newY+"'>.</p>");
e++;
a();
}
}
a();
</script>
You are looking for Bresenham's circle algorithm.
加载中,请稍侯......
精彩评论