Plot a centered circle

Question 1

Intro

Given radius \$r\$, draw a circle in the center of the screen.

The Challenge

Here is a simple challenge.

Plot a circle using the formula \$x^2+y^2=r^2\$, or any other formula that will plot a circle according to the given parameters.

You may use any units that your language provides, so long as they are well defined and give consistent output.

The circle must have it's center at the center of the canvas, and must have a padding of 5 units or more on all sides.

The circle can have any fill that does not match the outline.

You may have axes in the background of your plot.

The outline of the circle must be solid (no gaps), and it must be visible. Here is an example:

enter image description here

Input can be taken in any acceptable form. (function params, variables, stdin...)

Output can be in the form of a separate window, or an image format.

Standard loopholes and rules apply.

Example Code (`Java + Processing`)

// Modified from the C language example from
// https:// en.wikipedia.org/wiki/Midpoint_circle_algorithm
int r = 70; //radius
void settings() {
 size(2*r+10, 2*r+10);
}
 
void draw() {
 background(255);
 drawCircle(width/2, height/2, r, 60);
 save("Circle.png");
}
 
void drawCircle(int x0, int y0, int radius, int angle) {
 int circCol = color(0, 0, 0);
 float limit = radians(angle);
 int x = radius;
 int y = 0;
 int err = 0;
 
 while (x >= y && atan2(y, x) < limit) {
 set(x0 + x, y0 + y, circCol);
 set(x0 + y, y0 + x, circCol);
 set(x0 - y, y0 + x, circCol);
 set(x0 - x, y0 + y, circCol);
 set(x0 - x, y0 - y, circCol);
 set(x0 - y, y0 - x, circCol);
 set(x0 + y, y0 - x, circCol);
 set(x0 + x, y0 - y, circCol);
 
 y += 1;
 if (err <= 0) {
 err += 2*y + 1;
 }
 if (err > 0) {
 x -= 1;
 err -= 2*x + 1;
 }
 }
}

Scoring

This is a graphical-output question. No ascii art.

This is code-golf. shortest answer in each language wins.

Question 2

What do you mean by 'the thickness of the outline must be 1 unit'? Are the units of outline thickness the same as those of the radius?

Question 3

yes, it doesn't make sense. I changed it.

Question 4

Related (Draw a Polygon)

Question 5

You say there should be a padding of 5 units, what should happen if radius is bigger than window size?

Question 6

If we can zoom, wouldn't the same constant-sized circle, not showing axes, work for any input?

Question 7

Desmos, 1 byte

r

Try it on Desmos

Uses the same input method as the other Desmos answer. An unused variable named r defaults to drawing a circle with radius r.

Question 8

R, (削除) 74 (削除ここまで) (削除) 70 (削除ここまで) (削除) 68 (削除ここまで) (削除) 65 (削除ここまで) 54 bytes

Edit: -11 bytes thanks to Giuseppe

function(r)plot(r*1i^(1:1e3/99),,"l",l<-c(-r-5,r+5),l)

Try it at rdrr.io

I propose 3 possible answers to this challenge in R, of decreasing length but with increasing caveats.

My favourite answer (above, using plot) is the ~~(削除) middle (削除ここまで)~~ shortest one of the 3. It plots a circle by calculating the complex coordinates of powers of i, using 396 points (with a bit of wrap-around). Here's an image of the output from plot_circle(5):

enter image description here

For a 'true' circle (rather than an almost-circle with tiny straight-lines connecting the data points), we can use the curve function with a formula, but unfortunately we need to draw the positive & negative halves separately, so it ends up longer:

R, (削除) 86 (削除ここまで) 84 bytes

function(r){curve((r^2-x^2)^.5,xli=l<-c(-r-5,r+5),yli=l)
curve(-(r^2-x^2)^.5,add=T)}

Try it at rdrr.io

~~(削除) The shortest (that I can think of) (削除ここまで)~~ Previously the shortest, but - thanks to Giuseppe now no longer so - is to use the circles option of the symbols function, for only 56 bytes. However, this has the caveat that the circle symbols are always circular even if the plot is re-sized, and so may no-longer line-up with the y-axis.

R, (削除) 62 (削除ここまで) (削除) 58 (削除ここまで) 56 bytes

function(r)symbols(x=1,c=r,i=F,xli=l<-c(-r-4,r+6),yli=l)

Try it at rdrr.io

Question 9

would pty="s" work instead of setting the xlim and ylim for the first 2? I was digging through the documentation for par but haven't had a chance to test it. It says "s" generates a square plotting region

Question 10

@Giuseppe par(pty="s") should work but then it wouldn't satisfy the condition of 5 units of padding. In fact, from what I can see, only this answer satisfies the padding condition! Without par(pty="s") the circle depends on the output device being square, since the device will otherwise stretch.

Question 11

@Therkel - welcome (back) to code-golf, and, in case you weren't aware, R is the language of the month this month (Sept 2020)! As you obviously know R, how about giving a shot at a couple of R-golfs...?

Question 12

@Therkel I completely missed the 5 padding requirement. Seems a bit random to be honest. At the least, you can use the order of variables in plot to get the first down to 54 bytes; presumably similar golfs would work for the others.

Question 13

well, I googled "R plot" and went to the first result from the stat.ethz.ch site (which I always do when googling R documentation), which luckily was the page for plot.default! The docs for plot say plot.default will be used for simple scatterplots, so I suppose I lucked out somewhat :-)

Question 14

Python 2 & 3, 55 bytes

-17 bytes thanks to @DigitalTrauma
-1 byte thanks to @Sisyphus
-2 bytes thanks to @ovs

from turtle import*
def f(r):sety(-r);clear();circle(r)

Try it online!

turtle is standard library included in Python 2 & 3. I came up with turtle idea as a almost first result in Googling "graphics python".

Question 15

If window is allowed to be closed automatically after drawing is done, then done() can be removed from end of code, it just prevents window from closing.

Question 16

so long as it displays the circle, even for a frame, there is no problem. I think you can remove int() from int(input()) as well.

Question 17

fd() is an alias of forward(). Also you can use goto() to set the start position: 60 bytes with the other suggestions

Question 18

This is a really cool approach, and I can't believe there aren't more turtle golfs in Python!

Question 19

@DominicvanEssen I came up with turtle solution as a first result in Googling "graphics python".

Question 20

LaTeX, 66 bytes

\input tikz\def\f#1{~\vfill\centering\tikz\draw circle(#1);\vfill}

I consider the "canvas" required by this challenge to be the default text area of a latex page. The code defines a macro \f that takes the radius in cm as an argument.

Example Code

\documentclass{article}
\input tikz\def\f#1{~\vfill\centering\tikz\draw circle(#1);\vfill}
\begin{document}
\f{3}
\enddocument

Outputs a PDF:

enter image description here

Question 21

How is the input given?

Question 22

Oh, I missed that part. Let me change it.

Question 23

SageMath, 24 bytes

lambda r:circle((0,0),r)

Try it online!

Example

enter image description here

Question 24

C (gcc), (削除) 169 (削除ここまで) (削除) 166 (削除ここまで) (削除) 161 (削除ここまで) 160 bytes

Thanks to ceilingcat (x3) for the suggestions! I also changed the newlines in the header to spaces as they seem to work fine as separators (at least in Irfanview) and fixed a bug that got revealed when the array was put on the stack.

Generates an image in PBM format, as it's probably the simplest way to make a bitmap! For some reason, all the online PBM viewers that I tried don't seem to like the output file, but Irfanview and GIMP are fine with it.

z;f(r,w){char s[(w=r*2+11)*w+1];float x=s[w*w]=!memset(s,48,w*w);for(;x<7;)s[z=round(sin(x+=1e-5)*r+r+5)+round(cos(x)*r+r+5)*w]=49;printf("P1 %d %d %s",w,w,s);}

Try it online!

Question 25

Libreoffice shows the correct circle image. Nice Answer.

Question 26

Save 21 bytes with

z,x;f(r,w){char s[(w=r*2+11)*w+1];for(x=!memset(s,48,w*w);x<7e5;)s[z=sin(++x)*r+r+5+round(cos(x)*r+r+5)*w]=49;printf("P1 %d %d %s",w,w,s);}

. No need for the first round and to keep x below 7 (or 2π) .

Question 27

T-SQL, 47 bytes

SELECT geometry::Point(0,0,0).STBuffer(r)FROM t

Input is taken via a pre-existing table t with float field r, per our IO rules.

Uses SQL geo-spatial functions, displayed in the SQL Management Studio results pane:

enter image description here

Question 28

TI-Basic, ^{(削除) 11 (削除ここまで) (削除) 8 (削除ここまで)} 7 bytes

Polar
Input r1
ZSquare

Input is a string, and is stored as a function. This function is shown in polar coordinates, so it shows as a circle.

Output for "4:

sniping target XD

Question 29

+1, looks like sniping target XD

Question 30

JavaScript (ES6), 96 bytes

f=
v=>`<svg width=${s=v*2+12} height=${s}><circle r=${v} cx=${v+=6} cy=${v} stroke=#000 fill=none>`

<input type=number min=1 oninput=o.innerHTML=f(+this.value)><div id=o>

Outputs an SVG(HTML5) image, which the snippet displays for you. If HTML5 is acceptable, then for 95 bytes:

f=
v=>`<div style="width:${v*=2}px;height:${v}px;margin:6px;border:1px solid;border-radius:100%">`

<input type=number min=1 oninput=o.innerHTML=f(+this.value)><div id=o>

Question 31

feel free to use html5 for your main answer.

Question 32

Wolfram Language (Mathematica), 16 bytes

Graphics@*Circle

See Wolfram documentation on Circle

for example here is a circle with center (0,0) and radius r=42

enter image description here

-6 bytes from @LegionMammal978

Question 33

The specifications call for a single input, the radius. On the other hand, Mathematica should center the circle in the plot window automatically, regardless of the center.

Question 34

@GregMartin "...or any other formula that will plot a circle according to the given parameters". Do you thing you you have a shortest solution? I don't think that Circle[] is acceptable, so this is the shortest way.

Question 35

You could just use Graphics@Circle@##&, or shorter yet, Graphics@*Circle.

Question 36

@LegionMammal978 yes, you're right..

Question 37

MATLAB, (削除) 38 (削除ここまで) 37 bytes

-1 byte thanks to Tom Carpenter

ezpolar(@(x)r);axis((r+5)*cospi(1:4))

Input as variable r in workspace.
Output:
output

Question 38

Ignore my previous deleted comments, forgot the circle had to be centred. You can save a byte with ezpolar(@(x)r);axis((r+5)*cospi(1:4)). The cospi(1:4) gives you [-1 1 -1 1] which can be multipled directly with (r+5) to get your limits array.

Question 39

<>^v, 56 bytes

ƒ∆57±∑361i∆90v
v 0Ii(I< a <
] ^
>¶° ^
>1 æ∑ ^

Explanation

ƒ : toggle turtle visibility
∆ : raise pen
57: push 57
± : negate
∑ : turtle forward by top of stack
361: push 361 (360 + 1)
i : pop stack & store in variable i
∆ : lower pen
90: push 90
v : send instruction pointer down
< : send instruction pointer left
a : turtle rotate right by top of stack (90)
start of loop
< : send instruction pointer left
I : push value of variable i
( : decrement top of stack
i : pop & store in variable i
I : push value of variable i
0 : push 0
v : send instruction pointer down
] : if top of stack is greater than or equal to second element of stack\

> : send instruction pointer right
¶ : update display
continue to continue here\

Else
> : send instruction pointer right
1: push 1
æ : turn left (top of stack) degrees
∑ : go forward by top of stack
^ : send instruction pointer up
continue here
^ : send instruction pointer up
^ : Idem, there to ensure trailing whitespace is not removed
go to start of loop

After drawing the circle, the program never halts to prevent the window from closing.

Screenshot below (Python Turtle Graphics is because the program does not set a title to the window and the interpreter is written in Python and uses Turtle for graphics) : screenshot

Question 40

Welcome to Code Golf!

Question 41

does this take input?

Question 42

@Razetime No, it doesn't

Question 43

Just realized how stupid what I just said was. Didn't see the program ought to take a radius input. I'll update it as soon as possible.

Question 44

Desmos, (削除) 12 (削除ここまで) 10 bytes

xx+yy=rr
r

Desmos it

Question 45

Is there a way to center the plot/zoom in desmos using code?

Question 46

@Razetime if you've zoomed away from centre, press the home button.

Question 47

I mean, for r=50, the circle extends outside the screen. is there a way to zoom to fit?

Question 48

i mean, programatically.

Question 49

MATL should work for that. It's available online.

Question 50

Java 8, (削除) 141 (削除ここまで) 123 bytes

import java.awt.*;r->new Frame(){{setSize(2*r+26,2*r+56);show();}public void paint(Graphics g){g.drawOval(13,43,2*r,2*r);}}

Output for \$n=100\$ (the second picture with added light grey background color is to verify the top padding):

enter image description here enter image description here

Explanation:

import java.awt.*; // Required import for Frame and Graphics
r-> // Method with integer parameter and Frame return-type
 new Frame(){ // Create the Frame
 { // In an inner code-block:
 setSize(2*r // Set the width to 2 times the radius-input
 +26 // + 2 times 8 pixels for the frame borders
 // + 2 times 5 pixels for the required padding
 2*r // Set the height to 2 times the radius-input
 +56); // + 2 times 8 pixels for the frame borders
 // + 30 pixels for the frame title-bar
 // + 2 times 5 pixels for the required padding
 show();} // And show the Frame at the end
 public void paint(Graphics g){
 // Overwrite its paint method to draw on
 g.drawOval(13,43, // With 5,5 for the required padding as top-left
 // x,y-coordinate of the surrounding rectangle + the same 8+30
 // pixels adjustment for the frame and frame title-bar,
 2*r,2*r);}} // draw the circle with a size of 2 times the radius-input

Note: I cannot use (r*=2),r,r,r instead of 2*r,2*r,2*r,2*r to save (3) bytes, because r has to be effectively final inside the inner Frame-class.

Question 51

Red, 74 bytes

-16 bytes thanbks to Aaron Miller!

func[r][d: r + 5 view compose/deep[base(2x2 * d)draw[circle(1x1 * d)(r)]]]

Red, 90 bytes

func[r][d: r + 5 view compose/deep[base(as-pair d * 2 d * 2)draw[circle(as-pair d d)(r)]]]

f 200

enter image description here

Question 52

74 bytes

Question 53

@AaronMiller Thank you!

Question 54

JavaScript (V8), 158 bytes

r=>document.write(`<p style="border-radius:50%;border:solid;position:fixed;width:${r*2}px;height:${r*2}px;top:50%;left:50%;transform:translate(-50%,-50%);">`)

Try it online!

jsfiddle thanks to @Razetime

Saved 1 thanks to @Razetime
Saved 2 using template literals

Writes directly to the HTML a p element fixed positioned, centered with border radius 50%

Question 55

This is better hosted on jsfiddle.

Question 56

Yes @Razetime thanks, I tried but it's really hard from a phone :/

Question 57

oh, gotcha. I think border-radius 50% is enough, so -1 byte.

Question 58

The jsfiddle link just gives me a bouncing cloud with an infinity sign... So (without having actually witnessed the output): does border-radius 50% satisfy the "must have a padding of 5 units or more on all sides" when r<10?

Question 59

The circle is always at the center of the screen, due to top and left:50%

Question 60

Shadertoy (GLSL), 142 bytes

void mainImage(out vec4 f,in vec2 v){vec2 S=iResolution.xy;vec2 u=v/S-vec2(0.5);u.y/=S.x/S.y;vec4 c;if(abs(length(u)-0.2)<8e-4)c=vec4(1);f=c;}

Shadertoy link

Output:

enter image description here

Question 61

85 bytes: void mainImage(out vec4 f,in vec2 v){v-=vec2(400,225);f=vec4(abs(dot(v,v)-1e4)<1e2);}

Question 62

My above code might not apply with the challenge, does print a circle though

Question 63

Red, (削除) ^{96 (削除ここまで)} (削除) ^{92 (削除ここまで)} 87 bytes

Forgot to remove some extra whitespace for -4 bytes.

-5 bytes by using shorter type conversions and initializing and using x at the same time.

draw to-pair x: r * 9 to-block append"circle "append mold to-pair x / 2 append" "mold r

No TIO link because draw doesn't seem to be implemented on TIO. However, you can copy this into the Red offline interpreter to output an image.

The first line is for defining a variable to be used for the canvas size. Multiplying by 9 might be a bit overkill, but it ensures enough padding around the circle. I couldn't figure out how to use variables in the block, so the second line builds the draw command bit by bit, essentially building the command draw {x}x{x} [circle {x / 2}x{x / 2} {r}].

Example output for \$r = 10\$:

enter image description here

Question 64

Red, (削除) 59 (削除ここまで) (削除) 57 (削除ここまで) (削除) 55 (削除ここまで) 51 byte

func[r][?(draw 2 * c: 5x5 + r reduce['circle c r])]

Try it locally.

-2 bytes thanks to Aaron Miller spotting superfluous as-pair.

Output for \$r=50\$:

enter image description here

Ethan Chapman 1,51810 silver badges17 bronze badges · Accepted Answer · 2020-09-22 18:20:48Z

Desmos, 1 byte

r

Try it on Desmos

Uses the same input method as the other Desmos answer. An unused variable named r defaults to drawing a circle with radius r.

Plot a centered circle

Intro

The Challenge

Example Code (Java + Processing)

Scoring

32 Answers 32

Desmos, 1 byte

R, (削除) 74 (削除ここまで) (削除) 70 (削除ここまで) (削除) 68 (削除ここまで) (削除) 65 (削除ここまで) 54 bytes

R, (削除) 86 (削除ここまで) 84 bytes

R, (削除) 62 (削除ここまで) (削除) 58 (削除ここまで) 56 bytes

Python 2 & 3, 55 bytes

LaTeX, 66 bytes

Example Code

SageMath, 24 bytes

Example

C (gcc), (削除) 169 (削除ここまで) (削除) 166 (削除ここまで) (削除) 161 (削除ここまで) 160 bytes

T-SQL, 47 bytes

TI-Basic, (削除) 11 (削除ここまで) (削除) 8 (削除ここまで) 7 bytes

JavaScript (ES6), 96 bytes

Wolfram Language (Mathematica), 16 bytes

MATLAB, (削除) 38 (削除ここまで) 37 bytes

<>^v, 56 bytes

Explanation

Desmos, (削除) 12 (削除ここまで) 10 bytes

Java 8, (削除) 141 (削除ここまで) 123 bytes

Red, 74 bytes

Red, 90 bytes

JavaScript (V8), 158 bytes

Shadertoy (GLSL), 142 bytes

Red, (削除) 96 (削除ここまで) (削除) 92 (削除ここまで) 87 bytes

Red, (削除) 59 (削除ここまで) (削除) 57 (削除ここまで) (削除) 55 (削除ここまで) 51 byte

Python + pygame, 110 bytes

80186 DOS machine code, (削除) 76 (削除ここまで) (削除) 74 (削除ここまで) (削除) 72 (削除ここまで) 71 bytes

Commented assembly

Desmos, (削除) 10 (削除ここまで) 12 bytes

Perl 5, 92 bytes

PHP, 131 bytes

Swift, entire iOS app, 152 bytes

Ungolfed

ZX Spectrum BASIC, 1, 3 or 6 bytes

PostScript, 69 bytes

HTML + Javascript, 98

JavaScript: 85, HTML: 13

C (gcc), (削除) 132 (削除ここまで) 128 bytes

Desmos, 3 bytes

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related

Hot Network Questions

Example Code (`Java + Processing`)

TI-Basic, ^{(削除) 11 (削除ここまで) (削除) 8 (削除ここまで)} 7 bytes

Red, (削除) ^{96 (削除ここまで)} (削除) ^{92 (削除ここまで)} 87 bytes