Register

## [FROM CK] Drawing Cleaner, Dotted, Filled, Etc. Circles

Learn how to program. Code snippets for creating sprites etc. Submit your own or use those of others.
Posts: 89
Joined: Thu Apr 05, 2012 3:16 pm
Location: Akron, OH, USA
Calculators: Casio fx-9750 G II, Casio fx-CG 10

### [FROM CK] Drawing Cleaner, Dotted, Filled, Etc. Circles

I thought this was a good post, so I moved it here since some of us can't view casio kingdom.

Original author: iwantanimac
Original post date: Sept 1, 2006

[color="#FF8C00"]More manipulable circles
[/color]
I stumbled upon this while trying to make a program in which you can make pie charts on the calc. You can create circles which are not only much cleaner than the original "Circle X,Y,r", but can be filled in, drawn dotted, made with thick edges, or even drawn only to a specific angle. It involves some pretty basic code and some maths you should all know and understand.

First, you need to understand that this code will draw circles fine on the default viewwindow (Which has square pixels and properly aligned coordinates) and can be easily adapted for most other square-pixeled viewwindows.

[color="#000080"]- Introduction [/color]
Firstly, i'll introduce you to the meat of the code. This will draw a very clean circle in the centre of the default ViewWindow (And will automatically change to it, so don't worry) Code:
Code: Select all
ClearGraph
For 1->x to 360 step 1
F-Line rcosx,rsinx,rcosx,rsinx
Next

So essentially, we first clear the graph (This resets the ViewWindow, and is entirely optional), then we start a loop, which will continue to add 1 to x 360 times (The 1 comes from the step 2, not the 1->r).
Inside this loop, we have a very basic code. This is an F-Line, used because it doesn't mind coordinates outside your viewwindow and it can draw more than one pixel at a time. r is our radius variable, while x is our angle, in degrees.

[color="#000080"]- Speeding Up and dashed/dotted circles [/color]
Running this code by itself on your calculator (Using appropriate values for varialbes - try an r vlaue between 2 and 3.1) it will draw you up a nice circle in the centre of the screen, but it will take a while. You'll notice the edges are much cleaner and more circular than the default circle command.

The time can be cut down quite significantly by manipulating the step value. Doing this causes the calculator to skip that many degrees per loop, making it draw less.
The problem with this is, at larger radii the circle can appear broken or dotted. If this is the efect you are after, you cna set the step value higher. If not, you can still set the step value, but i recommend only up to about 5. If you do this, i'd also recommend you make it draw an extended line rather than a dot by using this alternative code: Code:
Code: Select all
ClearGraph
For 1->x to 360 step 5
F-Line rcos(x-5),rsin(x-5),rcos(x+5),rsin(x+5)
Next

You'll notice this is five times as fast, but may draw slightly less "perfect"circles. You can also use this change in X value, along with a large step value to create dashed lines for your circles.

[color="#000080"]- Thick bordered circles [/color]
Creating thick bordered circles requires a simple manipulation of the r value for one end of the line, as follows: Code:
Code: Select all
ClearGraph
For 1->x to 360 step 1
F-Line (r+t)cosx,(r+t)sinx,rcosx,rsinx
Next

This will draw a circle with lines t pixels thicker than usual. t can also be negative (This will make the line thickness start at the outside rather than inside)

[color="#000080"]- Filled In Circles [/color]
To create a filled in circle, you can simply set one coordinate of your F-Line to the centre of your circle. At defaults, this is (0,0), so we can do this: Code:
Code: Select all
ClearGraph
For 1->x to 360 step 1
F-Line 0,0,rcosx,rsinx
Next

[color="#000080"]- Moving the circle [/color]
To move the circle, we must add a value to the total of the coordinate, as follows: Code:
Code: Select all
ClearGraph
For 1->x to 360 step 1
F-Line (rcosx)+a,(rsinx+b),(rcosx+a),(rsinx+b)
Next

substitute a and b for your x and y values.

[color="#8B0000"] - Other Tricks [/color]
- Spirals
You can create a simple spiral drawer by replacing the circle code with the following: Code:
Code: Select all
ClearGraph
For 1->x to 360 step 1
F-Line xcosx,xsinx,xcosx,xsinx
Next

- Random Circular Patterns
You can create a funny-looking circle by using the following code: Code:
Code: Select all
ClearGraph
For 1->x to 360 step 1
If (Ran#*10)>5
Then r+0.1->r
Else r-0.1->r
IfEnd
F-Line rcosx,rsinx,rcosx,rsinx
Next

This will be unique every* time you run it. A cool visual toy.

I hope you found that useful. If you think my ramblings are too hard to understand, please let me know and i'll try to fix it up (I'm pretty tired at the time of writing, so it could be entirely incomprehensible). I tried to make this as beginner-friendly as possible, but i haven't included the reasons for using cos and sin, in case anyone doesn't know how they work (Which most of you should anyway) so if you really need that, let me know. Images are also coming soon.