# Build a chessboard

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:

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
• 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. Feb 4, 2016 at 17:04
• So some ASCII-magic is not allowed? :( Feb 4, 2016 at 17:13
• How basic is basic? What is the definition of an "import"? Feb 4, 2016 at 17:59
• It doesn't need to be an image but each square must be at least 50px? That seems self-contradictory to me. Feb 4, 2016 at 19:48
• 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). Feb 5, 2016 at 3:23

## vim, 474644 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):

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

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

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

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

• Nice! Thanks for posting it. Feb 4, 2016 at 17:45
• 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? Feb 4, 2016 at 17:47
• @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. Feb 4, 2016 at 17:49
• Wait, GenerateChessBoardWithColorsAsParameters[ColorBlack, ColorWhite, 8, 8, 50, 50] doesn't work? ;) Feb 4, 2016 at 23:28
• @CᴏɴᴏʀO'Bʀɪᴇɴ It does, but that's 73 bytes. Feb 5, 2016 at 8:16

# Octave, 20 18 bytes

Thanks to @Bruno for shaving off 2 bytes.

imshow(invhilb(8))


Result:

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.

• @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. Feb 5, 2016 at 2:08
• Edited the question. Tested your code and it's working, so currently you have the lowest byte count :) Feb 5, 2016 at 10:14
• Also removed the >0 and it still works so you can shave 2 bytes there Feb 5, 2016 at 10:16
• @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 Feb 5, 2016 at 15:37
• Congrats on 2k! Aug 16, 2016 at 22:33

# Mathematica, 8172 55 bytes

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


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

# 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: 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. • Oooh, interesting ;) Nov 25, 2020 at 13:35 # 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=) • The top left corner should be white, not black. Feb 4, 2016 at 20:28 • The output should be a checkerboard, the orientation was not specified. Feb 4, 2016 at 20:57 • 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). Feb 4, 2016 at 21:38 • 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. Feb 4, 2016 at 21:52 ## 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. • This one was unespected but I quite like it somehow :) Feb 4, 2016 at 18:34 • white and black can be #fff and #000... but why bother specifying white? Feb 4, 2016 at 20:53 • try (";background:#000","")[($a+$_)%2] instead. Feb 4, 2016 at 22:27 • @NotthatCharles Durr, had my white and black flip-flopped, so it was only outputting white squares. Corrected for an additional 4 bytes saved. Feb 5, 2016 at 13:27 # 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 • 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. Dec 1, 2020 at 6:27 • oh, thanks :) will edit Dec 1, 2020 at 6:32 • 269 by refactoring the if statement Dec 1, 2020 at 10:09 • @Lyxal It gives an error i.imgur.com/KOaiOEl.png Dec 1, 2020 at 12:47 • @agent355 just change the last ' to ) Dec 1, 2020 at 15:04 # 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. • 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. Feb 5, 2016 at 10:08
• @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 Feb 5, 2016 at 10:26

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

### Explanation

8:      % row vector [1,2,...8]
t!      % duplicate and transpose into column vector
+       % 8x8 matrix with all pairwise additions
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

'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


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

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

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


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.

(board's collected some dust)

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

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

# 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=)

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

Here's the output converted to png:

Try it online!

• 30
Nov 24, 2020 at 20:32

# CJam, 27 bytes

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


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

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


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!

• Seems like fontsize is wrong. Feb 6, 2016 at 20:20
• 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>.
– Neil
Jul 17, 2016 at 10:14
• 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 Oct 11, 2017 at 17:30

# 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\}


This was the first thing I thought of when I saw this challenge, hopefully it's not stretching it too far.

• 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) Nov 30, 2020 at 17:18
• 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. Dec 3, 2020 at 5:30
• 60-byter: sin(\pi x)\sin\pi y>0\left\{max(abs(x-4),abs(y-4))<4\right\} Dec 3, 2020 at 5:47

## PHP, 166158 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;}

• 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. Feb 6, 2016 at 12:19

# iKe, 24 bytes

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


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.

## PHP >=5.4, 175159149 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
• 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;}} Feb 4, 2016 at 20:03
• While i didn't remove the initial assignments(Works, personal quirk won't let me do it), Thank for this Feb 4, 2016 at 21:20
• According to even the strict version of HTML 4, you can skip the end tag for TR. Feb 5, 2016 at 0:07
• 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! Feb 6, 2016 at 11:53 • 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! Feb 6, 2016 at 12:14

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

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

• How does this fit the 50 pixel per square rule? Sep 6, 2020 at 15:19
• '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). Sep 6, 2020 at 15:23
• image(matrix(1:0,9,8)[-1,],c=1:0,ax=F) should work for -2 bytes. Nov 25, 2020 at 22:32
• @RobinRyder - good catch! Thanks! Nov 26, 2020 at 10:12

# 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


# 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>')  • Huh, I never knew about template strings in JavaScript. Cool. Feb 5, 2016 at 1:04 # Perl 5 - 80 Generates a .PBM file: print 'P1'.' 400'x2 .$".(((0 x50 .1 x50)x4 .$")x50 .((1 x50 .0 x50)x4 .$")x50)x4


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

• Should start and end with white. Otherwise good job :) Feb 5, 2016 at 14:35
• Oops. Thanks @Bruno. Fixed. Feb 5, 2016 at 16:48
• Great, upvoted :) Feb 5, 2016 at 16:49

# Lua + LÖVE, 138113112 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:

• Grr! Lua 5.3 has // integer division operator, but apparently there is still no LÖVE built with a LuaJIT featuring it. ☹ Feb 5, 2016 at 16:53

## PowerShell + GDI, 346 bytes

Add-Type -AssemblyName System.Windows.Forms
$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().

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.