27
\$\begingroup\$

Saw this in a PHP challenge. The objective is to make a chessboard with 64 squares (8*8) with the minimum amount of code. Simple enough, I made mine in PHP in 356 bytes (not impressive, I know) and I would like to see some other aproaches. This can be made in a language of your choice, as long as you keep it vanilla, so no imports. Smallest byte count wins.

The output should look like this:

screencap

And my code:

<table><?php $c='black';function p($c,$n){echo'<td style="width:50px;height:50px;background:'.$c.'"></td>';if($n==1){echo"<tr>";}}for($i=1;$i<=64;$i++){if($i%8==0&&$c=="black"){$c="white";$n=1;}elseif($i%8==0&&$c=="white"){$c="black";$n=1;}elseif(isset($n)&&$n==1){$n=0;}elseif($c=="black"){$n=0;$c="white";}elseif($c=="white"){$n=0;$c="black";}p($c,$n);}

Or readable:

<table><tr> <?php $color = 'black'; function printcolor($color, $nl) { echo '<td style="width:50px; height:50px; background:' . $color . '"></td>'; if ($nl == true) { echo "</tr><tr>"; } } for ($i=1; $i<=64;$i++) { if ($i % 8 == 0 && $color == "black") { $color = "white"; $nl = true; } elseif ($i % 8 == 0 && $color == "white") { $color = "black"; $nl = true; } elseif (isset($nl) && $nl == true) { $nl = false; } elseif ($color == "black") { $nl = false; $color = "white"; } elseif ($color == "white") { $nl = false; $color = "black"; } printcolor($color, $nl); }

Edit:

Sorry I wasn't very specific at first:

  • Squares should have 50px * 50px except for vectorial images.
  • Output format or size is not relevant nor it needs to be an image.
  • For evaluation purposes the output must be visible such as in an image file or a screenshot
  • No libraries written after the challenge was posted
Improve this question
\$\endgroup\$
39
  • 3
    \$\begingroup\$ Welcome to PPCG, as it stands, this challenge doesn't really have anything to do with PHP, so I changed your tags. Also, I believe your reference implementation belongs as an answer, not in your question. As Stewie brought up, you should specify the required size of the image output, as well as things like colour specifics and whether a lossy image is allowed. \$\endgroup\$ Commented Feb 4, 2016 at 17:04
  • 2
    \$\begingroup\$ So some ASCII-magic is not allowed? :( \$\endgroup\$ Commented Feb 4, 2016 at 17:13
  • 4
    \$\begingroup\$ How basic is basic? What is the definition of an "import"? \$\endgroup\$ Commented Feb 4, 2016 at 17:59
  • 6
    \$\begingroup\$ It doesn't need to be an image but each square must be at least 50px? That seems self-contradictory to me. \$\endgroup\$ Commented Feb 4, 2016 at 19:48
  • 4
    \$\begingroup\$ Programming languages here are very diverse, including some that are made specifically for golfing and have many builtin functions. Therefore, I recommend that the restriction to non-library functions be removed, and that this question instead follow the default (all imports counted in byte count; no libraries written after the challenge was posted). \$\endgroup\$ Commented Feb 5, 2016 at 3:23

50 Answers 50

Reset to default
1
2
27
\$\begingroup\$

vim, 47 46 44 43

crossed out 44 is still regular 44...

iP1 400 <C-p><cr><esc>50i1<esc>YpVr0yk3PyG49PyG:m$<cr>p2GyG3P 
i enter insert mode P1 signal to NetPPM that we're using black&white (PBM) format 400 width <C-p> fancy trick that inserts the other 400 for height <cr><esc> exit insert mode on the next line 50i1<esc> insert 50 '1's (black) YpVr0 insert 50 '0's (white) by duplicating the line and replacing all chars yk copy both lines (yank-up) 3P paste three times; this leaves us on line two yG copy from line 2 to end of file (this is a full row of pixels now) 49P we need 50 rows of pixels to make a complete "row"; paste 49 times yG copy the entire row of the checkerboard :m$<cr> move line 2 (the line we're currently on) to the end of the file this gives us the "alternating rows" effect p we're now on the last line: paste the entire row we copied earlier 2G hop back to line 2 (beginning of image data) yG3P copy the entire image data, paste 3 times

Outputs in NetPPM format (PBM):

output

Improve this answer
\$\endgroup\$
3
  • 2
    \$\begingroup\$ I love that you can complete a graphical output challenge with a text editor. Are there any other examples of PBMs from golfed vim? \$\endgroup\$ Commented Feb 4, 2016 at 23:12
  • 1
    \$\begingroup\$ @dohaqatar7 I dunno, but I've done TikZ with vim before, so graphics in vim is a thing for sure. \$\endgroup\$ Commented Feb 4, 2016 at 23:38
  • 2
    \$\begingroup\$ Wow, I never thought to try <C-p> in vim without having started typing a word... that is really handy! \$\endgroup\$ Commented Feb 5, 2016 at 15:41
19
\$\begingroup\$

CSS, 244 bytes

html{background:#fff}body{width:400px;height:400px;background:linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%)0 0/100px 100px,linear-gradient(45deg,#000 25%,transparent 25%,transparent 75%,#000 75%)50px 50px/100px 100px} 

html { background: white; } body { width: 400px; height: 400px; background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%) 0px 0px / 100px 100px, linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%) 50px 50px / 100px 100px }

Explanation: A 100x100px diagonal linear gradient is created with four stops so that most of the gradient is transparent except for two 50px triangular corners. (See below snippet). Adding a second gradient with a 50x50px offset fills in the missing halves of the squares. Increasing the size of the body then allows the resulting pattern to repeat to fill the entire chessboard.

html { background: white; } body { width: 100px; height: 100px; background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%) 0px 0px / 100px 100px }

Improve this answer
\$\endgroup\$
6
  • \$\begingroup\$ Neat solution. It should work as well if you drop the last } . \$\endgroup\$ Commented Feb 4, 2016 at 19:50
  • \$\begingroup\$ Can you explain what's going on here? \$\endgroup\$ Commented Feb 4, 2016 at 19:52
  • \$\begingroup\$ @flawr I've added a second snippet showing the partial effect, I hope that helps. \$\endgroup\$ Commented Feb 4, 2016 at 20:02
  • 1
    \$\begingroup\$ Do you really need the html{background:#fff}? By default 99% of browsers set the background to white, afaik \$\endgroup\$ Commented Feb 5, 2016 at 1:48
  • 1
    \$\begingroup\$ @Doᴡɴɢᴏᴀᴛ If I don't do that then the body's background gets applied to the canvas, ruining the effect. \$\endgroup\$ Commented Feb 5, 2016 at 8:37
17
\$\begingroup\$

Mathematica, 34 bytes

ArrayPlot@Array[Mod[+##,2]&,{8,8}]

The output is a vector image and is surrounded in a frame.

Instead of correctly positioning 32 rectangles, we can just generate a binary matrix and make ArrayPlot work for us:

enter image description here

Improve this answer
\$\endgroup\$
8
  • \$\begingroup\$ Nice! Thanks for posting it. \$\endgroup\$ Commented Feb 4, 2016 at 17:45
  • \$\begingroup\$ Looking good. Can you please explain me where do you define each square as 50px? Also, is there an online emulator where I can test it? \$\endgroup\$ Commented Feb 4, 2016 at 17:47
  • \$\begingroup\$ @Bruno The output is a vector graphic, so there is no such thing as pixel sizes (the image has no intrinsic size - it can be scaled to and displayed at any size). That's why I asked. \$\endgroup\$ Commented Feb 4, 2016 at 17:49
  • 4
    \$\begingroup\$ Wait, GenerateChessBoardWithColorsAsParameters[ColorBlack, ColorWhite, 8, 8, 50, 50] doesn't work? ;) \$\endgroup\$ Commented Feb 4, 2016 at 23:28
  • 3
    \$\begingroup\$ @CᴏɴᴏʀO'Bʀɪᴇɴ It does, but that's 73 bytes. \$\endgroup\$ Commented Feb 5, 2016 at 8:16
14
\$\begingroup\$

Octave, 20 18 bytes

Thanks to @Bruno for shaving off 2 bytes.

imshow(invhilb(8))

Result:

enter image description here

This answer uses a technique found here. It also relies on the automatic scaling of images in Octave depending on the size of the figure window.

Improve this answer
\$\endgroup\$
5
  • 1
    \$\begingroup\$ @AlexA. I'm also not entirely convinced that the squares must be exactly 50x50 pixels, as the very next rule says "Output format or size is not relevant...". People have asked for clarification in the comments, but the question has not been updated. \$\endgroup\$ Commented Feb 5, 2016 at 2:08
  • \$\begingroup\$ Edited the question. Tested your code and it's working, so currently you have the lowest byte count :) \$\endgroup\$ Commented Feb 5, 2016 at 10:14
  • \$\begingroup\$ Also removed the >0 and it still works so you can shave 2 bytes there \$\endgroup\$ Commented Feb 5, 2016 at 10:16
  • \$\begingroup\$ @Bruno What? That is wild. So it's apparently clamping the values of the matrix (which are all <<0 or >>1) to 0 and 1. Thanks for the tip, I'll update! :D \$\endgroup\$ Commented Feb 5, 2016 at 15:37
  • \$\begingroup\$ Congrats on 2k! \$\endgroup\$ Commented Aug 16, 2016 at 22:33
10
\$\begingroup\$

Mathematica, 81 72 55 bytes

Graphics[Rectangle/@Select[Range@8~Tuples~2,2∣Tr@#&]]

Input/Output

Image is of a previous version's evaluation, but still looks the same.

Improve this answer
\$\endgroup\$
0
9
\$\begingroup\$

Pure Bash (no external utilities), 133

I saw @Doorknob's comment as a bit of a challenge. Its a bit long, but here goes:

echo \# ImageMagick pixel enumeration:400,400,1,rgb for((;x=p%400,y=p/400,c=1-(x/50^y/50)&1,p++<160000;));{ echo "$x,$y:($c,$c,$c)" }

Output is in Imagemagick's .txt format. Note this is pure Bash. Neither Imagemagick nor any other external utilities are spawned to generate this output. However, the output may be redirected to a .txt file and viewed with the ImageMagick display utility:

enter image description here

This image format is nice because not only is it pure text, it is little more than a list of all pixels (x, y and colour value), one per line. It is a fairly simple matter to derive all pixel values arithmetically in one big loop.

Previous answer, 167

echo "\"400 400 2 1\" \" c white\" \"b c black\"" printf -vf %50s a="$f${f// /b}" o=("\"$a$a$a$a\"" "\"${f// /b}$a$a$a$f\"") for i in {0..399};{ echo "${o[i/50%2]}" }

Output is in the X_PixMap text image file format, which may also be viewed with the ImageMagick display utility.

Note I've taken as much out of the XPM format as I could such that display would still accept it. I was able to take out all the boilerplate with the exception of the " double quotes around each line. No idea what other - if any - utilities will accept this.

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ Oooh, interesting ;) \$\endgroup\$ Commented Nov 25, 2020 at 13:35
7
\$\begingroup\$

Octave, 48 bytes

​​​​​​​​​​​​​​​imwrite(kron(mod((t=0:7)+t',2),ones(50)),'.png')

This works exactly the same as my Matlab answer, but there is no spiral in Octave. Instead we use a feature that Matlab does not have: We can use the assignment of t already as an expression, and later use t again in the same expression.

(This is the rescaled version, I do not want to clutter the answers here=)

Improve this answer
\$\endgroup\$
4
  • 1
    \$\begingroup\$ The top left corner should be white, not black. \$\endgroup\$ Commented Feb 4, 2016 at 20:28
  • 2
    \$\begingroup\$ The output should be a checkerboard, the orientation was not specified. \$\endgroup\$ Commented Feb 4, 2016 at 20:57
  • 2
    \$\begingroup\$ Sorry, flawr, the output should be a chessboard. A chessboard is always "Queen on her color, white on the right" (meaning the right hand of each player has a white corner square). \$\endgroup\$ Commented Feb 4, 2016 at 21:38
  • 5
    \$\begingroup\$ Then imagine one player sitting to the right, one to the left. Again: this was not specified by the challenge, that is just your interpretation. \$\endgroup\$ Commented Feb 4, 2016 at 21:52
7
\$\begingroup\$

PowerShell + browser of your choice, 149 143 bytes

The inability to use imports is really tough, as all of the GDI calls (i.e., the stuff PowerShell uses to draw) are buried behind imports in .NET ...

"<table><tr>"+((1..8|%{$a=$_;-join(1..8|%{'<td style="width:50px;height:50px'+("",";background:#000")[($a+$_)%2]+'"></td>'})})-join'</tr><tr>')

Edit - saved six bytes thanks to @NotThatCharles

This uses two for-loops from 1..8 to generate a big-ol' HTML string, similar to the PHP example provided, and output it onto the pipeline. Each time through we calculate whether to append ;background:#000 for the black backgrounds by taking our current position on the board modulo 2.

To use, redirect the output into the file of your choice (e.g., with something like > chessboard.htm) and then launch that in the browser of your choice. For the screenshot below, I used "c.htm" and Firefox.

firefox

Improve this answer
\$\endgroup\$
4
  • \$\begingroup\$ This one was unespected but I quite like it somehow :) \$\endgroup\$ Commented Feb 4, 2016 at 18:34
  • \$\begingroup\$ white and black can be #fff and #000... but why bother specifying white? \$\endgroup\$ Commented Feb 4, 2016 at 20:53
  • \$\begingroup\$ try (";background:#000","")[($a+$_)%2] instead. \$\endgroup\$ Commented Feb 4, 2016 at 22:27
  • \$\begingroup\$ @NotthatCharles Durr, had my white and black flip-flopped, so it was only outputting white squares. Corrected for an additional 4 bytes saved. \$\endgroup\$ Commented Feb 5, 2016 at 13:27
6
\$\begingroup\$

Python 3, 365, 288, 270, 256 bytes

Thanks @Razetime, @mehbark and @Amazeryogo for the suggestions

from turtle import * B=range H=Screen() A=Turtle() def F(): for C in B(4):A.fd(30);A.lt(90) A.fd(30) for D in B(8): A.up();A.setpos(0,30*D);A.pd() for G in B(8): if(D+G)%2==0:E='black' else:E='white' A.fillcolor(E);A.begin_fill();F();A.end_fill()

Try it online!

Admittedly not good:) first contribution

Output

Improve this answer
\$\endgroup\$
14
  • \$\begingroup\$ forward can become fd, left to lt, down to pd. You can probably remove the definition of G since it has no parameters as well, including in main program. Since the background is white, you don't need the else statement. \$\endgroup\$ Commented Dec 1, 2020 at 6:27
  • \$\begingroup\$ oh, thanks :) will edit \$\endgroup\$ Commented Dec 1, 2020 at 6:32
  • \$\begingroup\$ 269 by refactoring the if statement \$\endgroup\$ Commented Dec 1, 2020 at 10:09
  • \$\begingroup\$ @Lyxal It gives an error i.imgur.com/KOaiOEl.png \$\endgroup\$ Commented Dec 1, 2020 at 12:47
  • \$\begingroup\$ @agent355 just change the last ' to ) \$\endgroup\$ Commented Dec 1, 2020 at 15:04
5
\$\begingroup\$

PHP + CSS + HTML, 136 bytes

Taking the table aproach to a higher level:

<table><?for(;++$i<9;)echo'<tr>',str_repeat(["<td b><td>","<td><td b>"][$i&1],4);?><style>td{width:50px;height:50px}[b]{background:#000}

It generates the following code:

<table><tr><td><td b><td><td b><td><td b><td><td b><tr><td b><td><td b><td><td b><td><td b><td><tr><td><td b><td><td b><td><td b><td><td b><tr><td b><td><td b><td><td b><td><td b><td><tr><td><td b><td><td b><td><td b><td><td b><tr><td b><td><td b><td><td b><td><td b><td><tr><td><td b><td><td b><td><td b><td><td b><tr><td b><td><td b><td><td b><td><td b><td><style>td{width:50px;height:50px}[b]{background:#000}

It relies heavily on browsers' kindness and CSS.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Good solution. Tho I had to include php after <? and include $i=0 as the first for parameter to get it working properly, giving a final result of 144 bytes. \$\endgroup\$ Commented Feb 5, 2016 at 10:08
  • 1
    \$\begingroup\$ @Bruno If you refer to the warning it gives, warnings are disregarded here. However, there's a trillion ways of disabling them. One of them is to replace ++$i<9 with @++$i<9. Also, for it to work without <?php, one must have the directive short_open_tags=On, which is default on some environments. Read more on stackoverflow.com/a/2185331/2729937 \$\endgroup\$ Commented Feb 5, 2016 at 10:26
5
\$\begingroup\$

MATL, 11 (27) bytes

8:t!+Q2\TYG

This produces the following figure. It doesn't have an intrinsic size; it's automatically scaled depending on the size of the figure window. This seems to be allowed by the challenge.

enter image description here

Explanation

8: % row vector [1,2,...8] t! % duplicate and transpose into column vector + % 8x8 matrix with all pairwise additions Q % add 1 2\ % modulo 2. Gives 8x8 matrix of zeros and ones TYG % draw image

If autoscaling is not allowed:

'imshow'8:t!+Q2\50t3$Y"0#X$

produces the following figure with 50x50-pixel squares

Explanation

enter image description here

'imshow' % name of Matlab function 8:t!+Q2\ % same as above. Produces 8x8 matrix of zeros and ones 50t3$Y" % repeat each element 50 times in each dimension 0#X$ % call imshow function with above matrix as input
Improve this answer
\$\endgroup\$
0
5
\$\begingroup\$

Pyth, 28 26 bytes

J*4+*50]255*50]0.wm_mxkdJJ

Explanation

J - Autoassign J = V *50]0 - 50*[0] *50]255 - 50*[255] + - ^^+^ *4 - 4*^ .w - write_greyscale(V) m J - [V for d in J] _ - reversed(V) m J - [V for k in J] xkd - k^d

Python equivalent

J = 4*(50*[255]+50*[0]) write_greyscale([[k^d for k in J][::-1] for d in J])

Try it here (just the colour values)

Output:

Output

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ Nice job on the byte count but I need a valid output with visible squares :) \$\endgroup\$ Commented Feb 4, 2016 at 18:19
  • \$\begingroup\$ @Bruno Output added! I installed PIL just for you :O (I hadn't actually tested it before) \$\endgroup\$ Commented Feb 4, 2016 at 18:27
  • \$\begingroup\$ @muddyfish sorry for the trouble and thanks. The board must start with and end with a white square tho :) \$\endgroup\$ Commented Feb 4, 2016 at 18:36
5
\$\begingroup\$

FFmpeg, 78 82 100 bytes

Finally got around to cleaning the board.

ffplay -f lavfi color=s=400x400,geq='255*mod(trunc(X/50)+trunc(Y/50)+1,2):128'

enter image description here

Older:

ffmpeg -f lavfi -i "color=tan@0:256x256,format=ya8" -vf "scale=400:-1:alphablend=checkerboard" .jpg

Will exit with error, but after producing image below.

enter image description here

(board's collected some dust)

Improve this answer
\$\endgroup\$
5
\$\begingroup\$

Jelly, 26 bytes

400R%2ẋ€50FU;$ẋ4;;;1j⁶;”PU

Since Jelly has no support for images built in, we print a PPM image.

Try it online! (smaller board for speed, raw PPM)

Results

screenshot

How it works

400R%2ẋ€50FU;$ẋ4;;;1j⁶;”PU Main link. No arguments. 400 Set the left argument to 400. R Yield [1, ..., 400]. %2 Compute the parity of each integer. ẋ€50 Replace each parity by an array of 50 copies of itself. F Flatten the resulting, nested list. This creates the first rank of the board. $ Combine the two atoms to the left: U Reverse the array of parities. ; Concatenate the reversed array with the original. This creates the first two ranks of the board. ẋ4 Repeat the resulting list four times. This creates all eight ranks of the board. ; Append 400, the link's left argument. ; Append 400, the link's left argument. ;1 Append 1. j⁶ Join, separating by spaces. ;”P Append the character 'P'. U Reverse the resulting list.

Non-competing version (24 bytes)

The newest Jelly interpreter that predates this post didn't vectorize x properly. With the latest version, 2 additional bytes can be saved.

400R%2x50U;$ẋ4;;;1j⁶;”PU

The only difference is that x50 yields a flat list (with every original element repeated 50 times), so F is no longer necessary.

Improve this answer
\$\endgroup\$
2
  • 1
    \$\begingroup\$ It looks like you were writing a java answer and fell asleep slightly whilst typing a ;... ;) \$\endgroup\$ Commented Feb 4, 2016 at 23:31
  • 2
    \$\begingroup\$ @CᴏɴᴏʀO'Bʀɪᴇɴ Java? You must be on Java 10.0, Golfing Edition, cause that doesn't look like any Java I've seen.... \$\endgroup\$ Commented Feb 5, 2016 at 22:55
4
\$\begingroup\$

Matlab, 47 (24) bytes

imwrite(kron(mod(spiral(8),2),ones(50)),'.png')

This works exactly the same as my Octave answer, but I was able to use spiral which saved one byte. spiral(n) makes an nxn matrix and fills it spiraling with the first n^2 integers.

If vectorgraphics are allowed, we could do it in 24 bytes:

imshow(mod(spiral(8),2))

(This is the rescaled version, I do not want to clutter the answers here=)

Improve this answer
\$\endgroup\$
4
\$\begingroup\$

HTML with utf-8 - 66b

<div style="font:100 50px/48px serif">▚▚▚▚<br>▚▚▚▚<br>▚▚▚▚<br>▚▚▚▚

▚ is short-direct utf for entity &# 9626 ;

Unicode Character 'QUADRANT UPPER LEFT AND LOWER RIGHT' (U+259A)

silly me, was looking for a 1 utf-8 char solution -would have been... 1b!

Improve this answer
\$\endgroup\$
3
  • 2
    \$\begingroup\$ Seems like fontsize is wrong. \$\endgroup\$ Commented Feb 6, 2016 at 20:20
  • 1
    \$\begingroup\$ You should use ▞ instead so that the top-left square is white like on a standard chessboard. Also, use <pre> instead of <div> so that you can use newlines instead of <br>. \$\endgroup\$ Commented Jul 17, 2016 at 10:14
  • \$\begingroup\$ Your bytecount appears to be wrong, it should be 98 bytes, as ▚ counts for 3 bytes using UTF-8 encoding. In the future, you can use this to check your UTF-8 Byte Count \$\endgroup\$ Commented Oct 11, 2017 at 17:30
4
+100
\$\begingroup\$

APL (Dyalog Extended), 51 30 bytes

'P1' 2⍴400 50/50⌿(⍳8)⌽8 8⍴'01'

Try it online!

Outputs a netpbm image. Save the result to a .pbm file and view here.

Since the output is too large for tio, here's the generated output.

-21 bytes(!) from Adám.

Here's the output converted to png:

enter image description here

Try it online!

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ 30 \$\endgroup\$ Commented Nov 24, 2020 at 20:32
3
\$\begingroup\$

CJam, 27 bytes

"P1"400__,2f%50e*_W%+4*~]S*

Try it online! (smaller board for speed, raw PPM)

Results

screenshot

How it works

"P1" e# Push that string. 400__ e# Push three copies of 400. , e# Turn the last one into [0 ... 399]. 2f% e# Compute the parity of each integer. 50e* e# Repeat each parity 50 times. e# This creates the first rank of the board. _W% e# Create a reversed copy of the resulting array. + e# Concatenate the original with the reversed array. e# This creates the first two ranks of the board. 4* e# Repeat the resulting array four times. e# This creates all eight ranks of the board. ~ e# Dump all of its items (the pixels) on the stack. ] e# Wrap the entire stack in an array. S* e# Join that array, separating them by spaces.
Improve this answer
\$\endgroup\$
3
\$\begingroup\$

Desmos, 136 bytes

ceil(sin(x))\left\{6<x<29\right\}>=ceil(sin(y))\left\{0<y<26\right\} ceil(sin(x))\left\{3<x<27\right\}<=ceil(sin(y))\left\{0<y<24\right\}

A typical black and white chessboard with the first square being white, plotted on a graph, offset to the right of the y-axis by about three units. This was the first thing I thought of when I saw this challenge, hopefully it's not stretching it too far.

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ Nice answer! You don't need to worry so long as your answer fits the guidelines. (This question isn't very specific, so it's alright) \$\endgroup\$ Commented Nov 30, 2020 at 17:18
  • \$\begingroup\$ The code provided wasn't in the correct format for Desmos, per consensus here. The issue is with the inequalities, which don't work as nicely as they look like they should. I've gone ahead and fixed it for you, and using >= instead of ≥ saves a byte for each line as well. \$\endgroup\$ Commented Dec 3, 2020 at 5:30
  • 1
    \$\begingroup\$ 60-byter: sin(\pi x)\sin\pi y>0\left\{max(abs(x-4),abs(y-4))<4\right\} \$\endgroup\$ Commented Dec 3, 2020 at 5:47
2
\$\begingroup\$

PHP, 166 158 155 bytes

Works in PHP 7.0.2 (short-tags enabled) and Chrome 48.0.2564.97 m

<table><tr><? while(++$i<=8){while(++$j<=8){echo"<td style=background-color:".($i%2==0?($j%2==1?0:""):($j%2==0?0:"")).";padding:9></td>";}echo"<tr>";$j=0;}
Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ You can use the property bgcolor=0 to generate the black background. That should shave off a ton of bytes! And instead of $v%2==0, use $v&1, which should shave a few bytes. \$\endgroup\$ Commented Feb 6, 2016 at 12:19
2
\$\begingroup\$

Perl 5 - 80

Generates a .PBM file:

print 'P1'.' 400'x2 .$".(((0 x50 .1 x50)x4 .$")x50 .((1 x50 .0 x50)x4 .$")x50)x4
Improve this answer
\$\endgroup\$
2
\$\begingroup\$

PHP >=5.4, 175 159 149 116 Bytes

<table><tr><? for(;@++$i<65;)echo'<td width=50 height=50 ',$i+@$m&1?:'bgcolor=0','>',$i%8<1?'<tr '.($m=@!$m).'>':''; 

<table><tr><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><tr 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><tr ><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><tr 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><tr ><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><tr 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><tr ><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><tr 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><td width=50 height=50 bgcolor=0><td width=50 height=50 1><tr >

Notes

  • Shaved 16 bytes - Thanks @insertusernamehere
  • Shaved 10 bytes - Thanks @msh210
  • Shaved 30 bytes - Thanks @Ismael Miguel
Improve this answer
\$\endgroup\$
8
  • 1
    \$\begingroup\$ Probably this can be golfed even more, but here you go (152 bytes): <table><tr><?php for(;++$i<65;){echo'<td style="width:50px;height:50px;background:#'.(($i+$m)%2?'000':'').'"></td>';if($i%8<1){echo"</tr><tr>";$m=!$m;}} \$\endgroup\$ Commented Feb 4, 2016 at 20:03
  • \$\begingroup\$ While i didn't remove the initial assignments(Works, personal quirk won't let me do it), Thank for this \$\endgroup\$ Commented Feb 4, 2016 at 21:20
  • 1
    \$\begingroup\$ According to even the strict version of HTML 4, you can skip the end tag for TR. \$\endgroup\$ Commented Feb 5, 2016 at 0:07
  • 1
    \$\begingroup\$ Replace ++$i<65 with @++$i<65, since you are worried about the warnings. This means that you can reduce $m=$i=0 to just $m=0, saving you 2 bytes. Instead of echo 'a'.'b'.'c';, you can do echo 'a','b','c';. This means that your echo can be echo'<td style="width:50px;height:50px;background:#',($i+$m)%2?'':'000','">'; saving you more 2 bytes. Also, HTML attributes don't require quotes. Remove them and sabe 2 bytes. Also, there's a much shorter bgcolor attribute, that reduces more bytes! You can use a print() in the for to save even more bytes! \$\endgroup\$ Commented Feb 6, 2016 at 11:53
  • 1
    \$\begingroup\$ To save even more, I've replaced ($i+$m)%2 with $i+@$m&1, which allowed me to remove that $m=0. Ahead, I've been able to remove your if, and replaced it with a trenary operation. To save even more, I've removed your style and added the properties width and height. To get even more into the hacky side, I've figured that Chrome 48.0.2564.103 m uses black if the background color is 0, using the property bgcolor. That allowed me to ever reduce more! More reductions is better! \$\endgroup\$ Commented Feb 6, 2016 at 12:14
2
\$\begingroup\$

GIMP, 539 bytes

gimp -i -b '(let* ((i (car (gimp-image-new 400 400 1))) (d (car (gimp-layer-new i 400 400 2 "b" 100 0)))) (gimp-image-insert-layer i d 0 -1) (define (t x y) (gimp-selection-translate i x y)) (define (x) (t 100 0)) (define (X) (t -100 0)) (define (y) (t 50 50)) (define (Y) (t -50 50)) (define (f) (gimp-edit-fill d 1)) (define (r) (f) (x) (f) (x) (f) (x) (f) (y)) (define (R) (f) (X) (f) (X) (f) (X) (f) (Y)) (gimp-image-select-rectangle i 2 0 0 50 50) (r) (R) (r) (R) (r) (R) (r) (R) (gimp-file-save 1 i d "c.png" "c.png") (gimp-quit 0))'

Ungolfed Scheme script-fu:

(let* ((i (car (gimp-image-new 400 400 GRAY))) (d (car (gimp-layer-new i 400 400 GRAY-IMAGE "b" 100 NORMAL-MODE)))) (gimp-image-insert-layer i d 0 -1) (define (t x y) (gimp-selection-translate i x y)) (define (x) (t 100 0)) (define (X) (t -100 0)) (define (y) (t 50 50)) (define (Y) (t -50 50)) (define (f) (gimp-edit-fill d BACKGROUND-FILL)) (define (r) (f) (x) (f) (x) (f) (x) (f) (y)) (define (R) (f) (X) (f) (X) (f) (X) (f) (Y)) (gimp-image-select-rectangle i CHANNEL-OP-REPLACE 0 0 50 50) (r) (R) (r) (R) (r) (R) (r) (R) (gimp-file-save RUN-NONINTERACTIVE i d "c.png" "c.png") (gimp-quit 0))

In batch mode, create a blank image, create a 50x50 rectangular selection, fill it, and then repeatedly move it around the image, filling in squares. Then save to c.png and exit.

Output:

chessboard png

Improve this answer
\$\endgroup\$
2
\$\begingroup\$

R, 40 38 bytes

Edit: -2 bytes thanks to Robin Ryder

image(matrix(1:0,9,8)[-1,],c=1:0,ax=F)

Try it at rdrr.io

This nicely exploits R's argument-recycling to fill a matrix() with dimensions of 9,8 with values of 1:0 recycled to fill it. We then use negative indexing [-1,] to chop-off the first row.

The image() function converts a matrix directly into a coloured image. Here we specify the color as 1:0 (black & white), and the axes as FALSE.

enter image description here

Improve this answer
\$\endgroup\$
4
  • \$\begingroup\$ How does this fit the 50 pixel per square rule? \$\endgroup\$ Commented Sep 6, 2020 at 15:19
  • 1
    \$\begingroup\$ 'except for vectorial images'. If the image isn't saved, it's rendered (on most setups) in a resizeable graphics window (I took a screenshot to upload the image, so that would have 'fixed' it at a random size). \$\endgroup\$ Commented Sep 6, 2020 at 15:23
  • \$\begingroup\$ image(matrix(1:0,9,8)[-1,],c=1:0,ax=F) should work for -2 bytes. \$\endgroup\$ Commented Nov 25, 2020 at 22:32
  • \$\begingroup\$ @RobinRyder - good catch! Thanks! \$\endgroup\$ Commented Nov 26, 2020 at 10:12
2
\$\begingroup\$

AppleSoft Basic, 146 bytes

The best (standard) resolution available on the Apple II is HGR2 mode, at 280x192 pixels, so the squares are 24x24. Verified at https://www.calormen.com/jsbasic/

0HGR2:HCOLOR=3:A=0:B=167:GOSUB8:A=24:B=191:GOSUB8:END 8FORI=A TOB STEP48:FORJ=A TOB STEP48:FORK=0TO23:HPLOTI+K,J TOI+K,J+23:NEXT:NEXT:NEXT:RETURN

image credit: Apple II Basic Bot on twitter

If we totally ignore resolution & use GR mode, 107 bytes:

1GR:COLOR=15:A=0:B=7:GOSUB8:A=1:B=8:GOSUB8:END 8FORI=A TOB STEP2:FORJ=A TOB STEP2:PLOTI,J:NEXT:NEXT:RETURN
Improve this answer
\$\endgroup\$
2
\$\begingroup\$

iKe, 24 bytes

,(;cga;t=\:t:2!-20!!160)

board

The core of the technique is to generate a list of x coordinates, divmod them and then take an equality cross-product to generate an appropriate bitmap. Using smaller examples for illustrative purposes:

 !8 0 1 2 3 4 5 6 7 -2!!8 0 0 1 1 2 2 3 3 2!-2!!8 0 0 1 1 0 0 1 1 t=\:t:2!-2!!8 (1 1 0 0 1 1 0 0 1 1 0 0 1 1 0 0 0 0 1 1 0 0 1 1 0 0 1 1 0 0 1 1 1 1 0 0 1 1 0 0 1 1 0 0 1 1 0 0 0 0 1 1 0 0 1 1 0 0 1 1 0 0 1 1)

try it here. Technically iKe works on a logical 160x160 pixel canvas, but in full-screen mode (the default when following a saved link) this is upscaled by 3x. I think this is still following the spirit of the question, as the program could assemble a much larger bitmap with the same character count; it just comes down to an arbitrary display limitation.

Update:

iKe isn't primarily designed for golf, but livecoding still benefits from brevity and sane defaults. As a result of tinkering with this problem, I've decided to permit it to use a default palette if none is provided. This particular solution could now be expressed with:

,(;;t=\:t:2!-20!!160)

Saving (an ineligible) 3 bytes.

Improve this answer
\$\endgroup\$
0
1
\$\begingroup\$

JavaScript, 150

This can definitely be golfed. It creates HTML.

for(i=0;i<8;)console.log(`<b style=margin-${['lef','righ'][i++%2]}t:50;width:50;height:50;display:inline-block;background:#000></b>`.repeat(4)+'<br>')
Improve this answer
\$\endgroup\$
1
  • 1
    \$\begingroup\$ Huh, I never knew about template strings in JavaScript. Cool. \$\endgroup\$ Commented Feb 5, 2016 at 1:04
1
\$\begingroup\$

Ruby with Shoes, 97 characters

Shoes.app(width:400){64.times{|i|stack(width:50,height:50){background [white,black][(i/8+i)%2]}}}

Sample output:

Chessboard drawn by Ruby with Shoes

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ Should start and end with white. Otherwise good job :) \$\endgroup\$ Commented Feb 5, 2016 at 14:35
  • \$\begingroup\$ Oops. Thanks @Bruno. Fixed. \$\endgroup\$ Commented Feb 5, 2016 at 16:48
  • \$\begingroup\$ Great, upvoted :) \$\endgroup\$ Commented Feb 5, 2016 at 16:49
1
\$\begingroup\$

Lua + LÖVE, 138 113 112 106 characters

function love.draw()for i=0,31 do love.graphics.rectangle("fill",i%8*50,(i-i%8)/8*100+i%2*50,50,50)end end

Sample output:

Chessboard drawn by Lua + LÖVE

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ Grr! Lua 5.3 has // integer division operator, but apparently there is still no LÖVE built with a LuaJIT featuring it. ☹ \$\endgroup\$ Commented Feb 5, 2016 at 16:53
1
\$\begingroup\$

PowerShell + GDI, 346 bytes

Add-Type -AssemblyName System.Windows.Forms Add-Type -AssemblyName System.Drawing $f=New-Object Windows.Forms.Form $f.width=$f.height=450 $g=$f.CreateGraphics() $f.add_paint({0..7|%{$y=$_;0..7|%{$g.FillRectangle((New-Object Drawing.SolidBrush ("white","black")[($_+$y)%2]),(new-object Drawing.Rectangle ($_*50),($y*50),50,50))}}}) $f.showDialog()

(newlines count same as semicolon, so newlines for readability)

As opposed to my other answer, this one uses the .NET assemblies to call GDI+ function calls. Interestingly, it's about twice the length.

The first two lines load the System.Windows.Forms and System.Drawing assemblies. The first is used for the literal window and the canvas thereon, the second is used for the drawing object (in this code, a brush) that create the graphics on the canvas.

We then create our form $f with the next line, and set its width and height to be 450. Note that this isn't 50*8, since these numbers correspond to the border-to-border edge of the forms window, including titlebar, the close button, etc.

The next line creates our canvas $g by calling the empty constructor. This defaults to the upper-left of the non-system area of the form being equal to 0,0 and increasing to the right and downward, perfect for our needs.

The next line is the actual call that draws the graphics, with $f.add_paint({...}). We construct the graphics calls by double-for looping from 0..7 and carrying a helper variable $y through each outer loop. Each inner loop, we tell our canvas to .FillRectangle(...,...) to draw our squares. The first parameter constructs a new SolidBrush with a color based on where we're at on the board. Other options here could be a hatch, a gradient, etc. The second parameter is a new Rectangle object starting at the specified x $_*50 and $y*50 coordinates and extending for 50 in each direction. Remember that 0,0 is the top-left.

The final line just displays the output with .showDialog(). PowerShell Forms

Note that since we're creating a form object, and PowerShell is all about the pipeline, closing the pop-up form will pass along a System.Enum.DialogResult object of Cancel, since that's technically what the user did. Since we're not capturing or otherwise doing anything with that result, the word Cancel will be displayed to STDOUT when the program concludes, as it was left on the pipeline.

Improve this answer
\$\endgroup\$
1
2

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.