Generate a special period image

Question

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:

Input 80, 50, #000000, #FFFF00:

(Sample output has been scaled for clarity)

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

Answer 1

JavaScript (ES6), 177 bytes

g=
(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.

Answer 2

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

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

Answer 3

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

Answer 4

Mathematica, 52 bytes

Image@Table[If[Mod[j,2i]>i,#4,#3],{i,-#2,-1},{j,#}]&

Sample input:

Image@Table[If[Mod[j,2i]>i,#4,#3],{i,-#2,-1},{j,#}]&[120,6,Black,Yellow]

Answer 5

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!

Output

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

(Image converted and resized.)

Answer 6

MATL, 34 32 29 bytes

-3 bytes thanks to Luis Mendo

XJx:P"1Hh@Y"1Jyn/XkX"J:)]viYG

Try it at MATL Online

Answer 7

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!

Ungolfed

(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"));
}

Result

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

Answer 8

SOGL V0.12, 83 bytes

..¹Cbe¹"εģνļ▲I-℮eīÆoHι⅛ļJd⁾)⁶f°┌²‘→e∫Ab∫Ƨ01a∙H∑bmWrcwιFHea-¹"S⁸▒Μ¬NrηA¤Y_⅓ļpPboā⁵‘→

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:

..¹Cbe¹"__processing0.hidden=0;cp.size(ŗ,ŗ)”→e∫Ab∫Ƨ01a∙H∑bmWrcwιFHea-¹"cp.stroke(ŗ);cp.point(ŗ,ŗ)”→

Explanation:

..¹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
"__processing0.hidden=0;cp.size(ŗ,ŗ)”→   
           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)]

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

Answer 9

SmileBASIC, 84 bytes

DEF C W,H,C,D
FOR J=1TO H
FOR I=0TO W-1N=1AND I/J
GPSET I,H-J,C*!N+D*N
NEXT
NEXT
END

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

Answer 10

Python 2, 123 101 bytes

w,h,c,C=input()
print'P3',w,h,255
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.

Answer 11

JavaScript (ES6) + HTML5, 138 bytes

(w,h,a,b)=>{with(c.width=w,c.getContext`2d`)for(c.height=y=h;~--y;)for(x=w;~--x;)fillStyle=x/(h-y)%2<1?a:b,fillRect(x,y,1,1)}

<canvas id=c>

f=
(w,h,a,b)=>{with(c.width=w,c.getContext`2d`)for(c.height=y=h;~--y;)for(x=w;~--x;)fillStyle=x/(h-y)%2<1?a:b,fillRect(x,y,1,1)}

#c{display:block

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