Start page: ARABART home
← All fifteen programs

The Brave Sun

1993 · C:\SUN\SUN.EXE

C:\SUN\SUN.EXE
The Brave Sun running in DOS

Loading SUN.EXE, 59 KB

Click the screen to type into the program.

Arabic educational software about the sun, with moving orbits. It won third place in the PC Middle East programming competition in 1993.

The story

In September 1993 Yasser finished The Brave Sun, his entry to the PC Middle East competition for Arabic educational software. It won 3rd place, with a cash prize and enterprise software packages. Every picture is drawn by his own code. The planets circle the sun at the pace of their real years, and every word of Arabic comes from ARABART, his own Arabic library.

Four planets, true to their years

Pick “The sun and nature” and his solar system starts to turn. Mercury, Venus, Earth and Mars circle the sun at the true pace of their years. This is his loop, running in your browser on the numbers he typed.

SUN.EXE the solar system
His solar system: a yellow sun in a black window, with Mercury, Venus, Earth and Mars around it.

Frame 140 of his loop. Tap a planet to follow it.

Every planet is a sprite: a tiny picture he drew once (Earth in blue with green land, Venus in brown) and saved. Each frame he stamps it in its new place. The picture carries a black edge, and that edge paints over the spot where the planet stood a frame before, so nothing ever needs erasing. In a browser today you would stamp the same sprites onto a canvas with drawImage.

Where to stamp is school trigonometry. Across is the cosine of the planet’s angle times the width of its oval; down is the sine times the height. Every frame Mercury’s angle turns by π/80, and each other planet turns 88 ÷ its own year as far. So Mars, at 687 days, crawls while Mercury races, as in the sky. Most PCs of 1993 had no chip for decimals, so Borland’s floating-point emulator worked out every sine and cosine in software.

One frame, line by line

Step through one frame of his loop: the code the compiler made from his C on one side, his C on the other. The yellow box shows each planet stamped over its old spot. Then every angle turns, ready for the next frame.

Frame 200 of his loop: the four planets around the sun.

the picture being stamped where it was

SUN.EXE one frame of the orbits
  1. 0E04frame:push 1 / call bioskey; is a key waiting?
  2. 0E0Fcmp [bp-40h],3B00h; F1? Alt+X? Esc?
  3. 0E73fld [bp-28h] / call sin; Mars: its angle
  4. 0E88fmul dword [19A5h]; × 70
  5. 0E99faddp / call ftol; + 175, whole pixels
  6. 0EB7fmul dword [19A9h]; cosine × 80, + 160
  7. 0ED0call putimage; stamp Mars
  8. 0F3Ecall putimage; Earth: 60 by 50
  9. 0FACcall putimage; Venus: 35 by 35
  10. 101Acall putimage; Mercury: 20 by 20
  11. 1027fdiv dword [19A9h]; pi ÷ 80
  12. 102Cfsubr [bp-10h]; Mercury turns
  13. 1047jb 1058; at 0: pi × 2 again
  14. 1062fdiv dword [19C1h]; Venus: ÷ 225, × 88
  15. 10A2fdiv dword [19C9h]; Earth: ÷ its year
  16. 10E2fdiv dword [19CDh]; Mars: ÷ 687, × 88
  17. 111Ejmp 0E04; no key: next frame
What he wrote, in C
  1. do {
  2. key = bioskey(1);// peek, never wait
  3. if (key == F1) help();// and Alt+X, Esc
  4. y = 175 + sin(mars) * 70;
  5. x = 160 + cos(mars) * 80;
  6. putimage(x, y, mars_pic, 0);// COPY_PUT
  7. /* Earth, Venus, Mercury: the same */
  8. mercury -= pi / 80;
  9. if (mercury <= 0) mercury = pi * 2;
  10. venus -= pi / 80 / 225 * 88;
  11. /* Earth, Mars: their own years */
  12. } while (key == 0);
Watches
key
0 next frame
Help

No key yet: back to the top for the next frame. That is the whole animation.

Then and now
1991 to 19932026Why it is the same idea
do { … } while (key == 0) requestAnimationFrame(draw) Draw, move everything a little, go again.
putimage with a black edge drawImage from a sprite sheet Draw small pictures once, then copy them where they go.
160 + cos(mars) * 80 Math.cos and Math.sin Circles and ovals are still drawn this way.

A sun drawn in the dark

His menu shows a sun glowing in six shades of gold on a starry sky, on a screen that could show only 16 colors at a time. He drew the sky and the sun while they were invisible, then switched them on.

In this graphics mode every pixel stores a slot number from 0 to 15. The graphics card keeps a small table, the palette, that says which color each slot shows. A slot can hold any of 262,144 colors. Change a slot, and every pixel drawn in it changes at once, the way one CSS custom property recolors every element that uses it.

His sun is six filled circles in six slots, each circle a little smaller than the last. First he turns those six slots black, so the drawing happens unseen. Then he gives them six shades of gold, the middle first. The whole sun appears in a blink, glowing from the center, and not one pixel is drawn twice. The stars come on the same way. In all, 129 places in his code change a color slot.

His sun: six shades of gold, one inside the other, on a black sky full of small blue and white stars.

His 16 color slots

SUN.EXE the menu and draw_sun
  1. 0E7Dmenu:call getpalette; read the 16 slots
  2. 0E88call setrgbpalette; × 4: stars to black
  3. 0ED7call star; × 126, row by row
  4. 102Acall draw_sun; 180, 240, radius 100
  5. 0066sun:call setrgbpalette; × 6: sun to black
  6. 00CDpush 10 / call setcolor
  7. 00E6call fillellipse; the biggest disc
  8. 0101mov bx,40 / idiv bx; r -= r / 40
  9. 012Cmov bx,30 / idiv bx; r -= r / 30
  10. 0157mov bx,20 / idiv bx; r -= r / 20
  11. 0182mov bx,10 / idiv bx; r -= r / 10
  12. 01ADmov bx,5 / idiv bx; r -= r / 5
  13. 01C5call setrgbpalette; 14: 63, 50, 0
  14. 01D8call setrgbpalette; 13: 63, 49, 0
  15. 01EBcall setrgbpalette; 5: 63, 47, 0
  16. 01FEcall setrgbpalette; 4: 63, 45, 0
  17. 0211call setrgbpalette; 2: 63, 42, 0
  18. 0224call setrgbpalette; 10: 63, 38, 0
  19. 1030menu:call setrgbpalette; × 4: stars on
What he wrote, in C
  1. getpalette(&pal);// the 16 slots
  2. for (i = 0; i < 4; i++)
  3. setrgbpalette(sky[i], 0, 0, 0);
  4. for (row = 0; row < 9; row++)
  5. star(x, y, kind);// 14 a row
  6. draw_sun(180, 240, 100);
  7. /* inside draw_sun(x, y, r): */
  8. for (i = 0; i < 6; i++)
  9. setrgbpalette(gold[i], 0, 0, 0);
  10. setfillstyle(SOLID_FILL, 10);
  11. fillellipse(x, y, r, r);
  12. r -= r / 40;// slot 2, and fill
  13. r -= r / 30;// slot 4
  14. r -= r / 20;// slot 5
  15. r -= r / 10;// slot 13
  16. r -= r / 5;// slot 14
  17. setrgbpalette(14, 63, 50, 0);
  18. setrgbpalette(13, 63, 49, 0);
  19. setrgbpalette(5, 63, 47, 0);
  20. setrgbpalette(4, 63, 45, 0);
  21. setrgbpalette(2, 63, 42, 0);
  22. setrgbpalette(10, 63, 38, 0);
  23. setrgbpalette(1, 0, 0, 42);// and 3 more
Watches
1
0 0 42 blue ring
9
0 0 63 blue diamond
7
42 42 42 gray cross
15
63 63 63 white dot
Help

Back in the menu, four calls give the stars their colors, and the whole sky appears around the sun.

Step through with Show the hidden on to see what is drawn in black. Then pick any slot and drag its red, green and blue. His sun and sky recolor instantly, because only the palette changes.

Shadows and outlines on ARABART

Every word of Arabic in The Brave Sun is drawn by ARABART, the Arabic library he wrote. For this program he built two effects of his own on top of it: a soft shadow and a crisp outline.

ARAB-ART his line, draw by draw
المجموعة الشمسية, A section title, drawn by his engine with a shadow and an outline.

Draw 7 of 7: color 4, gold, in place. Done: the last draw puts the line itself on top.

His C program never draws a letter itself. It keeps each line as the keys you would press on an Arabic keyboard: hgals is الشمس, the sun. Then it asks ARABART, which waits in memory like a background service, to join the letters and draw them. ARABART has its own page, where you can type with it.

The shadow draws the line in dark color 8, six pixels right and six down, then draws it again in its own color on top. The outline draws four copies one pixel off on the diagonals, then the line itself in the middle. His section titles use both. In his code, 217 places draw a plain line, 57 an outlined one and 14 a shadowed one, and 59 pick a font. Font 5, the tall letters of الشمس, was made for this program.

Then and now
1991 to 19932026Why it is the same idea
Color 8, six pixels right and down, then the line text-shadow: 6px 6px A darker copy behind, offset.
Four copies one pixel off, then the middle Four text-shadows at 1px, or -webkit-text-stroke A ring of dark copies makes the edge.
hgals, the keys of an Arabic keyboard Unicode text and a shaping engine Plain text in, joined letters out.
For engineers: finding ARABART, and the outline
SUN.EXE · 04B6:000B, is ARABART there?
000B enter 2,0 ; a C function with assembly inside
001A push ax / push bx / push cx / push dx
001E mov ax,3600h ; AH 36h: ARABART. AL 00h: are you there?
0021 int 10h ; the video service; ARABART answers 5944h
0023 sub ax,5943h ; 5944h minus 5943h = 1: yes
002D mov ax,[bp-2] / leave / retf ; return 1 when it is there
When the answer is not 1, main() prints “ARABIC-ART is not active please run ARAB-ART.EXE first.” and returns to DOS.
04B6:01B4, his outline, as C
void outline_text(int x, int y, char far *s, int edge, int fill) {
ar_color(edge); // ARABART function 01
ar_draw(x - 1, y - 1, s); ar_draw(x + 1, y - 1, s);
ar_draw(x - 1, y + 1, s); ar_draw(x + 1, y + 1, s);
ar_color(fill);
ar_draw(x, y, s); // ARABART function 07: the line itself
}
ar_draw asks ARABART for the line height first and adds it to y, so his y is always the top of the line. The shadow, at 04B6:0163, is the same with ar_color(8) and one draw at x + 6, y + 6.

Fifteen verses about the sun

The third choice on his menu opens “The sun in the Quran”. Each verse gets its own card, laid out by hand and drawn by his engine.

C:SUN the sun in the Quran
Al-An’amالأنعام6:96
Al-A’rafالأعراف7:54
Yunusيونس10:5
Ar-Ra’dالرعد13:2
Ibrahimإبراهيم14:33
An-Nahlالنحل16:12
Al-Israالإسراء17:78
Al-Anbiyaالأنبياء21:33
Al-Hajjالحج22:18
Al-Furqanالفرقان25:45
Al-Ankabutالعنكبوت29:61
Luqmanلقمان31:29
Fatirفاطر35:13
Ya-Sinيس36:38
Ya-Sinيس36:40
SUN.EXE 640 × 480
His card for Al-An’am 6:96: the verse in yellow Arabic letters outlined in black on a blue-gray card.

Surah Al-An’am, verse 6:96: 2 lines.

The section opens with his own introduction. The sun is named in the Quran 30 times, he writes, and in three ways. It is a sign of God’s creation, it is sworn by in oaths, and it shines inside the stories, such as the people of the cave and the prophet Yusuf. Then come the fifteen cards, from Al-An’am to Ya-Sin.

Each card has its own margins, set by hand to fit its verse. The opening and closing words are small and blue, the verse large and yellow with a black outline, its lines 45 pixels apart. Wherever the verse names الشمس, the sun, it is underlined. A # before and after the word switches the underline on and off, like a <u> tag. Verse numbers are typed backwards, 69 for 96, because ARABART writes from right to left.

والشمس تجري لمستقر لها ذلك تقدير العزيز العليم

The verse that opens the whole program, before the title: “And the sun runs to its resting place. That is the decree of the Almighty, the All-Knowing.” Ya-Sin 36:38.

The whole program, from its menu

His main menu has five choices. Behind them sit 33,586 bytes of his own C code, in eight parts.

SUN.EXE the main menu
His main menu: the glowing sun on a starry sky beside five choices in blue Arabic, the first one in red.
What is behind it

The sun and nature

06D2 · 5,536 bytes of his code

The solar system with its moving planets. Then the sun’s heat and spots, its gravity, its distance (8 minutes and 18 seconds of light) and how it makes its energy. Last, its size beside Earth, its mass on a balance, and its pulse every 2 hours and 40 minutes.

33,586 bytes of his C in eight modules. Each width is its size, and the three smallest are widened so you can tap them.

He wrote The Brave Sun in Borland C++ for the PC Middle East competition for Arabic educational software, and it won 3rd place. Its title card calls it an educational program for young Arabic speakers, designed and built by Eng. Yasser Mohamed Ali, first release, September 1993.

There are no image files. Every picture, from the planets to the mosque and the phases of the Moon, is drawn by his code from coordinates he typed. 255 places in it draw a straight line. F1 brings up help on any screen, Esc goes back and Alt+X leaves from anywhere, like the shortcuts of a desktop app.

For engineers: how it is built

Borland C++ with its 1991 runtime, in the large memory model: every function is a far call, so the program can grow past 64 KB of code. It uses 80186 instructions such as enter and push 1, and every function starts with the compiler’s stack check. Drawing goes through Borland’s BGI library, with the VGA driver loaded from EGAVGA.BGI at start-up, in 640 by 480 pixels and 16 colors.

SUN.EXE · main() at 0302:0007
0007 push bp / mov bp,sp
0017 call far 04B6:000B ; is ARABART there?
001E cmp di,1 / je 0032
0023 push ds / push 0188h / call printf ; “ARABIC-ART is not active …”
0032 call far 04DA:0D0F ; start the graphics, show the opening verse
Then the title card, his poem, and the menu loop, which jumps to one of five places by a small table.
The last line of the poem he wrote for the opening screens: “Tomorrow you rise as a sun, tomorrow as an idea, tomorrow as life.”

Every Byte

Each square is one byte of the program in memory, colored by what it is. Tap a part to open it in the full map, down to the single instruction.

C:\SUN\SUN.EXE
C:\SUN\ARAB-ART.EXE