ansaurus

Question

Making a circle out of . (periods)

Answer 1

+6 A:

Here's the maths and even an example program in C:

http://pixwiki.bafsoft.com/mags/5/articles/circle/sincos.htm

And position: absolute, left and top will let you draw:

http://www.w3.org/TR/CSS2/visuren.html#choose-position

Any further questions?

Matti Virkkunen 2010-09-16 21:46:22

+1 Nice to see an answer that nudges the OP in the right direction, as opposed to a copy/paste solution that they will not learn as much from

Josh Stodola 2010-09-16 21:51:50

This doesn't answer the question at all. @Michael is essentially asking an ascii art problem and @Matti is answering in c and pixels. This is boring and off topic.

Dave Aaron Smith 2010-09-16 21:57:45

@Dave: Periods sort of look like pixels, don't they? And if you had actually taken a look at the C code, the syntax is almost identical to JS, and should be quite understandable.

Matti Virkkunen 2010-09-16 21:59:06

@Matti, haha, I don't know where to start. I'll bury the fork at `void draw_circle () { int x, y;` looks nothing like Javascript.

Dave Aaron Smith 2010-09-16 22:11:11

no it is not, and w3 is a horrid place to look for tutorials, i learned that the hard way.

Michael 2010-09-16 22:18:09

@Michael: W3 is the only reference I use nowadays. I don't see what's wrong with it.

Matti Virkkunen 2010-09-16 22:19:41

w3 is good for some stuff but not the advanced stuff which is what i need, i bought a book for javascript, flash, and css and i went through every last chapter on each of them but none helped me even remotely solve my problem

Michael 2010-09-16 22:21:51

Hey, @Matti, no hard feelings. I don't want to start name calling. You've got some good points. If you really want to draw circles, of course you'd want to use c. I was just pumped to answer a unique Javascript question. Peace my man.

Dave Aaron Smith 2010-09-16 23:09:02

@Dave: `void draw_circle() { int x, y;` is not dramatically different from `function draw_circle() { var x, y;`. The only difference is that the C declares types.

Chuck 2010-09-16 23:13:29

Answer 2

+1 A:

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 += ("&nbsp;");
            }
        }
        dotArray += "<br \>";
    }

document.getElementById('mydiv').innerHTML = dotArray;
</script>

thedayturns 2010-09-16 21:52:08

This is only drawing half circles at best for me in Firefox 3.

Dave Aaron Smith 2010-09-16 22:01:28

in chrome this does nothing except make a few lines of . nothing at all like a circle, what browser are u using, i need this to work fro chrome only.

Michael 2010-09-16 22:17:10

You need to style it with `white-space: pre` as well.

Chuck 2010-09-16 23:11:31

Sorry; I had a slight glitch (replaced " " with " "). It now works correctly in Chrome (and probably other browsers as well).

thedayturns 2010-09-17 04:39:56

Answer 3

+3 A:

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"&gt;&lt;/script&gt;
    <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>

Dave Aaron Smith 2010-09-16 22:58:33

Let me know which parts you'd like me to explain and I can elucidate. Good, fun question!

Dave Aaron Smith 2010-09-16 23:00:35

Alright, I know you guys don't like the question in the first place, hence the downvote. Honestly though, this is the only working code on the page that does what @Michael asked. It's really quite clever if I do say so myself. Give it a go.

Dave Aaron Smith 2010-09-16 23:11:01

Downvotes without comment are lame.

Chuck 2010-09-16 23:14:43

@Dave: Maybe the downvoter didn't like your answer because it's copy-pasteable.

Matti Virkkunen 2010-09-16 23:15:12

getting closer... but i said NO FILL, and it needs to look more like a circle than that haha but its pretty good

Michael 2010-09-17 00:06:11

Answer 4

+1 A:

You are looking for Bresenham's circle algorithm.

strager 2010-09-16 23:00:59

Answer 5

+1 A:

<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>

Michael 2010-09-17 05:49:37

uh how do you make it in code like u guys did, it didnt show the whole thing

Michael 2010-09-17 05:50:11

Michael 2010-09-17 05:57:16

Read the "How to Format" help on the right hand side when editing...

deceze 2010-09-17 05:58:41

@Michael - Just read the small side-bar when writing a post, it explains. Or select the code and click the "code" button.

Venemo 2010-09-17 05:59:43

@Michael There's a [help document](http://stackoverflow.com/editing-help). You click the code button, just to the right of the blockquote button you were already using

Michael Mrozek 2010-09-17 06:00:19

This did not work in IE for me, but it did work in Chrome!

Josh Stodola 2010-09-17 11:12:47

ansaurus

tags:

views:

answers:

Making a circle out of . (periods)

related questions