13
\$\begingroup\$

Intro

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

Sandbox.

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 question. No ascii art.

This is . shortest answer in each language wins.

\$\endgroup\$
  • \$\begingroup\$ 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? \$\endgroup\$ – Dingus Sep 22 at 6:49
  • \$\begingroup\$ yes, it doesn't make sense. I changed it. \$\endgroup\$ – Razetime Sep 22 at 6:53
  • 1
    \$\begingroup\$ Related (Draw a Polygon) \$\endgroup\$ – Jo King Sep 22 at 8:04
  • 1
    \$\begingroup\$ You say there should be a padding of 5 units, what should happen if radius is bigger than window size? \$\endgroup\$ – LiefdeWen Sep 22 at 8:36
  • 1
    \$\begingroup\$ If we can zoom, wouldn't the same constant-sized circle, not showing axes, work for any input? \$\endgroup\$ – att Sep 23 at 6:58

17 Answers 17

7
\$\begingroup\$

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

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ 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 \$\endgroup\$ – Giuseppe Sep 22 at 16:18
  • \$\begingroup\$ @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. \$\endgroup\$ – Therkel Sep 23 at 7:15
  • 1
    \$\begingroup\$ @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...? \$\endgroup\$ – Dominic van Essen Sep 23 at 7:37
  • 1
    \$\begingroup\$ @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. \$\endgroup\$ – Giuseppe Sep 23 at 14:24
  • 1
    \$\begingroup\$ 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 :-) \$\endgroup\$ – Giuseppe Sep 23 at 15:03
5
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$
5
\$\begingroup\$

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!

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Libreoffice shows the correct circle image. Nice Answer. \$\endgroup\$ – Razetime Sep 23 at 3:38
  • \$\begingroup\$ 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π) . \$\endgroup\$ – Kjetil S. Sep 24 at 21:57
4
\$\begingroup\$

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>

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ feel free to use html5 for your main answer. \$\endgroup\$ – Razetime Sep 22 at 9:46
4
\$\begingroup\$

Python 2 & 3, 57 bytes

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

from turtle import*
def f(r):pu();sety(-r);pd();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".

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ The question asks for user input, so you need to input radius r, then draw a circle of radius r. \$\endgroup\$ – Razetime Sep 22 at 15:30
  • 1
    \$\begingroup\$ 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. \$\endgroup\$ – Arty Sep 22 at 16:10
  • 1
    \$\begingroup\$ 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. \$\endgroup\$ – Razetime Sep 22 at 16:11
  • 1
    \$\begingroup\$ fd() is an alias of forward(). Also you can use goto() to set the start position: 60 bytes with the other suggestions \$\endgroup\$ – Digital Trauma Sep 22 at 16:26
  • 1
    \$\begingroup\$ @DominicvanEssen I came up with turtle solution as a first result in Googling "graphics python". \$\endgroup\$ – Arty Sep 23 at 9:09
3
\$\begingroup\$

SageMath, 24 bytes

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

Try it online!

Example

enter image description here

| improve this answer | |
\$\endgroup\$
3
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$
3
\$\begingroup\$

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

| improve this answer | |
\$\endgroup\$
  • 1
    \$\begingroup\$ 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. \$\endgroup\$ – Tom Carpenter Sep 24 at 17:49
2
\$\begingroup\$

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

Try it online!

f 200

enter image description here

| improve this answer | |
\$\endgroup\$
2
\$\begingroup\$

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

| improve this answer | |
\$\endgroup\$
2
\$\begingroup\$

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%

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ This is better hosted on jsfiddle. \$\endgroup\$ – Razetime Sep 23 at 6:35
  • \$\begingroup\$ Yes @Razetime thanks, I tried but it's really hard from a phone :/ \$\endgroup\$ – AZTECCO Sep 23 at 6:41
  • 1
    \$\begingroup\$ oh, gotcha. I think border-radius 50% is enough, so -1 byte. \$\endgroup\$ – Razetime Sep 23 at 6:43
  • \$\begingroup\$ 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? \$\endgroup\$ – Dominic van Essen Sep 23 at 7:59
  • \$\begingroup\$ The circle is always at the center of the screen, due to top and left:50% \$\endgroup\$ – Razetime Sep 23 at 15:17
2
\$\begingroup\$

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

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ 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. \$\endgroup\$ – Greg Martin Sep 22 at 15:40
  • \$\begingroup\$ @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. \$\endgroup\$ – J42161217 Sep 22 at 19:10
  • \$\begingroup\$ You could just use Graphics@Circle@##&, or shorter yet, Graphics@*Circle. \$\endgroup\$ – LegionMammal978 Sep 24 at 12:16
  • \$\begingroup\$ @LegionMammal978 yes, you're right.. \$\endgroup\$ – J42161217 Sep 24 at 12:35
1
\$\begingroup\$

Desmos, 13 bytes

x^2+y^2=r^2
r

$$ x^2 + y^2 = r^2 \\{} r $$

Desmos it

enter image description here

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Is there a way to center the plot/zoom in desmos using code? \$\endgroup\$ – Razetime Sep 22 at 6:15
  • \$\begingroup\$ @Razetime if you've zoomed away from centre, press the home button. \$\endgroup\$ – Lyxal Sep 22 at 6:16
  • \$\begingroup\$ I mean, for r=50, the circle extends outside the screen. is there a way to zoom to fit? \$\endgroup\$ – Razetime Sep 22 at 6:17
  • 1
    \$\begingroup\$ i mean, programatically. \$\endgroup\$ – Razetime Sep 22 at 6:26
  • 1
    \$\begingroup\$ MATL should work for that. It's available online. \$\endgroup\$ – Razetime Sep 22 at 6:54
1
\$\begingroup\$

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

| improve this answer | |
\$\endgroup\$
1
\$\begingroup\$

PHP, 131 bytes

($f=imagecolorallocate)($i=imagecreate($d=10+$argn*2,$d),0,0,0);imageellipse($i,$d/2,$d/2,$d-10,$d-10,$f($i,9,9,9));imagepng($i,a);

Try it online!

Actually you cannot run it in online PHP testers because they disable the image functions. Saves the image in a file named "a". One byte could be saved using imagegd but I didn't know the "gd" format and couldn't open it to check if it works.

The circle is in very dark grey, but I consider it visible. If you don't, leave a comment and I'll edit, with one byte more $f($i,99,0,0) it's much clearer.

with $f($i,9,9,9):

enter image description here

with $f($i,99,0,0):

enter image description here

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ dark grey is different from black, so it's alright. I can see the circle. \$\endgroup\$ – Razetime Oct 1 at 10:16
1
\$\begingroup\$

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

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ How is the input given? \$\endgroup\$ – Razetime Oct 28 at 11:02
  • 1
    \$\begingroup\$ Oh, I missed that part. Let me change it. \$\endgroup\$ – corvus_192 Oct 28 at 11:11
0
\$\begingroup\$

Perl 5, 92 bytes

$r=$_;
$w=$r*2+11;
$_="P1 $w $w @{[map{($_%$w-$r-5)**2+($_/$w-$r-5)**2<$r**2?1:0}0..$w**2-1]}"

Try it online!

Circle with black filling. Put the 92 bytes above into program.pl and run like this:

echo 50 | perl -p program.pl > circle.pbm  # radius 50
feh circle.pbm                             # view with feh or other image viewer
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.