Construct a program or function that takes input in form of

<width>, <height>, <color1>, <color2>

and generates an output such that first row alternates between pixels of color <color1> and <color2> with a period of <height>. For each row that follows, the period shall be <height> - <row number>. Note that <color1> always begins the row.

Sample Output

Input 120, 6, #000000, #FFFF00:

Sample Output

Input 80, 50, #000000, #FFFF00:

Sample Output 2

(Sample output has been scaled for clarity)

This is , so the shortest valid entry in bytes wins.

  • \$\begingroup\$ Is that a fractal? Does it have a fractal dimension? \$\endgroup\$ – PyRulez Oct 28 '17 at 20:38

11 Answers 11


JavaScript (ES6), 177 bytes

(w,h,f,b)=>`<svg${s=` width=${w} height=`+h}><rect${s} fill=${b} />`+[...Array(h)].map((_,i)=>`<line stroke=${f} stroke-dasharray=${h-i} x1=0 y1=${i} x2=${w} y2=${i} />`).join``
Width: <input id=w value=80 type=number min=1><br>Height: <input id=h value=50 type=number min=1><br>Foreground: <input id=f value=#000000><br>Background: <input id=b value=#FFFF00><br><input type=button value=Go! onclick=o.innerHTML=g(+w.value,+h.value,f.value,b.value)><div id=o>

Outputs an HTML5-compatibile SVG image.


Excel VBA, 129 Bytes

Anonymous VBE immediate window function that takes input from range [A1:D1] and outputs to the range [A2].Resize([B1],[A1])

Cells.RowHeight=48:For Each r in[A2].Resize([B1],[A1]):r.Interior.Color=IIf(int((r.Column-1)/([B1]-R.Row+2))Mod 2,[D1],[C1]):Next


Output for input 160, 90, 0xBDD7EE, 0xDDEBF7: Output


Tcl/Tk, 143

147 150 151

proc P {w h b c} {set p [image c photo -w $w -h $h]
time {incr y
set x 0
time {$p p -t $x $y [expr {[incr x]/($h-$y+1)%2?$c:$b}]} $w} $h
set p}

Returns the image which can be tested, by putting it on a canvas widget, writing on a file, may be on the clipboard, etc.

Code for testing

set w 960
set h 540
pack [canvas .c -w $w -he $h -highlightt 0]
.c cr image 0 0 -image [P $w $h #00ffff #ffbf32] -anchor nw

enter image description here


Mathematica, 52 bytes


Sample input:


C (gcc), 155 143 bytes

Prints a Portable PixMap (.ppm) to stdout.

x,y,z;f(w,h,r,g,b,R,G,B){for(y=~0,printf("P3 %d %d 255",w,h);y++<~-h;)for(x=~0;x++<~-w;)z=(x/(h-y)%2),printf("\n%d %d %d ",z?R:r,z?G:g,z?B:b);}

Try it online!


  • Input: 80, 50, #ad00df, #f17e18

enter image description here (Image converted and resized.)

  • \$\begingroup\$ What is the advantage of writing ~0 instead of -1 ? \$\endgroup\$ – sergiol Sep 24 '17 at 15:00
  • \$\begingroup\$ @sergiol It looks cooler. And -- theoretically -- if you need a variable containing only 1s, ~0 would be more portable than -1. \$\endgroup\$ – Jonathan Frech Sep 24 '17 at 17:00
  • 2
    \$\begingroup\$ this image killed my eyes when I was scrolling past it. +1 \$\endgroup\$ – HyperNeutrino Sep 24 '17 at 18:17

MATL, 34 32 29 bytes

-3 bytes thanks to Luis Mendo


Try it at MATL Online


Java 8, 321 + 42 = 363 bytes

import java.awt.*;import java.awt.image.*;
(w,h,a,b)->{BufferedImage i=new BufferedImage(w,h,1);Graphics2D g=(Graphics2D)i.getGraphics();g.setColor(new Color(a));g.fillRect(0,0,w,h);g.setColor(new Color(b));for(int j=h;j>0;g.drawLine(0,h-j,w,h-j--))g.setStroke(new BasicStroke(1,0,0,1,new float[]{j},j));javax.imageio.ImageIO.write(i,"png",new java.io.File("a"));}

Outputs to a PNG file named a (no extension).

Surrounding code used to run the lambda: Try it online!


    BufferedImage i=new BufferedImage(w,h,1);
    Graphics2D g=(Graphics2D)i.getGraphics();
    g.setColor(new Color(a));
    g.setColor(new Color(b));
    for(int j=h;j>0;g.drawLine(0,h-j,w,h-j--))
        g.setStroke(new BasicStroke(1,0,0,1,new float[]{j},j));
    javax.imageio.ImageIO.write(i,"png",new java.io.File("a"));


Inputs: 80, 50, 0xFF00FF, 0xFFFF00.

example output


SOGL V0.12, 83 bytes


Try it Here!

SOGL was made in Processing.. So I took advantage of that using - execute as JavaScript. Could easily be many bytes less (at least 30) if SOGL had anything made for graphics.

Uncompressed strings:



..¹C       save the first 2 inputs as an array on variable C
be¹        save next input - width - on B, next input - height - on E, and wrap both in an array
           execute "__processing0.hidden=0;cp.size(ŗ,ŗ)" as JavaScript - show the canvas and set the size to the corresponding items in the array

e∫A        repeat height times, saving 1-indexed counter on A
  b∫       repeat width times, pushing 1-indexed counter
    Ƨ01    push "01"
    a∙     multiply vertically A times             - ["01", "01", "01",...]
    H      rotate anticlockwise                    - ["000...","111..."]
    ∑      join together                           - "000..111.."
    bm     mold to the length of width             - "00011100011100"
    W      get the counterth letter of that string - "1"
    r      convert to number                       - 1
    cw     get that item from the variable C
    ι      remove the array from the stack
    FH     push current loops counter minus 1
    ea-    push e-a - height-outerLoopsCounter
    ¹      wrap the 3 items in an array - [itemInC (color), counter-1 (x position), height-outerLoopsCounter (y position)]

           execute "cp.stroke(ŗ);cp.point(ŗ,ŗ)" as JavaScript, replacing ŗ with the corresponding item from the array

SmileBASIC, 84 bytes


The color of a pixel at (x,height-y) is [color1,color2][x/y & 1]


Python 2, 123 101 bytes

for i in range(h):
 for j in range(w):print`[c,C][j/(h-i)%2]`[1:-1]

Try it online!

Prints a .ppm to output as in Jonathan's answer.

  • \$\begingroup\$ Looks similar to my C answer... 105 bytes if you change your color input format (as the question does not rigorously define the color format). \$\endgroup\$ – Jonathan Frech Sep 25 '17 at 8:56
  • \$\begingroup\$ @JonathanFrech Thanks :) Yeah, I got inspired by your answer when looking for a way to output the image. \$\endgroup\$ – TFeld Sep 25 '17 at 9:20
  • \$\begingroup\$ Just out of curiosity; which program do you use to open your .ppm file? \$\endgroup\$ – Jonathan Frech Sep 25 '17 at 9:44
  • \$\begingroup\$ '%d '*3% is shorter than '%d %d %d'%. \$\endgroup\$ – Jonathan Frech Sep 25 '17 at 9:48
  • \$\begingroup\$ @JonathanFrech This works, or I've used GIMP \$\endgroup\$ – TFeld Sep 25 '17 at 9:51

JavaScript (ES6) + HTML5, 138 bytes

<canvas id=c>

<input id=w value=80>
<input id=h value=50>
<input id=a value=#000>
<input id=b value=#FF0>
<input value=go type=button onclick=f(w.value,h.value,a.value,b.value)>
<canvas id=c>

The function outputs by operating on the <canvas id=c>.

Starting from the bottom right of the canvas, the nested for loop iterates to the left and up, and checks the condition x/(h-y)%2<1 for the pixel at x,y. If the condition is true, it colors that pixel with color1, else color2.


Your Answer

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