"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
-<!-- 2025-07-28 ma 18:31 -->
+<!-- 2025-07-29 ti 00:24 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fractals</title>
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
-<li><a href="#org67a3e04">1. Fractal circles</a></li>
-<li><a href="#org9b77eb5">2. Fractal circles animated</a></li>
-<li><a href="#orged10e86">3. Fractal of squares</a></li>
-<li><a href="#org8554707">4. Fractal of squares animated</a></li>
-<li><a href="#orgc110f72">5. Fractal of trees</a></li>
+<li><a href="#org1275a81">1. Fractal circles</a></li>
+<li><a href="#orgd4b8463">2. Fractal circles animated</a></li>
+<li><a href="#org69998f4">3. Fractal of squares</a></li>
+<li><a href="#org1ab8a93">4. Fractal of squares animated</a></li>
+<li><a href="#org8845645">5. Fractal of trees</a></li>
</ul>
</div>
</div>
</style>
-<div id="outline-container-org67a3e04" class="outline-2">
-<h2 id="org67a3e04"><span class="section-number-2">1.</span> Fractal circles</h2>
+<div id="outline-container-org1275a81" class="outline-2">
+<h2 id="org1275a81"><span class="section-number-2">1.</span> Fractal circles</h2>
<div class="outline-text-2" id="text-1">
+<p>
+This QBasic program generates a visually captivating spiral fractal
+composed of circles. It employs a recursive algorithm to create
+intricate patterns that can inspire those interested in fractal
+geometry, recursive programming, and graphical design.
+</p>
+
-<div id="orgeebb105" class="figure">
+<div id="orgd5d762a" class="figure">
<p><a href="fractal circles.bas" class="responsive-img"><img src="fractal%20circles.png" alt="fractal%20circles.png" class="responsive-img" /></a>
</p>
</div>
+<dl class="org-dl">
+<dt>Color and Depth</dt><dd>The color of each circle alternates based on the
+recursion depth, adding visual complexity to the fractal.</dd>
+<dt>Termination Condition</dt><dd>The recursion terminates when the size of
+the circles becomes too small, ensuring the program doesn't run
+indefinitely.</dd>
+</dl>
+
<p>
<a href="fractal circles.bas">Source code</a>
</p>
</div>
</div>
-<div id="outline-container-org9b77eb5" class="outline-2">
-<h2 id="org9b77eb5"><span class="section-number-2">2.</span> Fractal circles animated</h2>
+<div id="outline-container-orgd4b8463" class="outline-2">
+<h2 id="orgd4b8463"><span class="section-number-2">2.</span> Fractal circles animated</h2>
<div class="outline-text-2" id="text-2">
+<p>
+This QBasic program creates an animated fractal composed of circles,
+demonstrating an engaging visual effect. The program uses a timer
+system to control the animation's progression.
+</p>
+
<div class="flex-center">
<video controls loop autoplay class="flex-center">
<source src="fractal circles animated.webm" type="video/webm">
</div>
</div>
-<div id="outline-container-orged10e86" class="outline-2">
-<h2 id="orged10e86"><span class="section-number-2">3.</span> Fractal of squares</h2>
+<div id="outline-container-org69998f4" class="outline-2">
+<h2 id="org69998f4"><span class="section-number-2">3.</span> Fractal of squares</h2>
<div class="outline-text-2" id="text-3">
+<p>
+This QBasic program generates and displays a fractal pattern composed of squares.
+</p>
+
-<div id="org4f8b4a7" class="figure">
+<div id="orgae53695" class="figure">
<p><a href="fractal squares.bas" class="responsive-img"><img src="fractal%20squares,%201.png" alt="fractal%20squares,%201.png" class="responsive-img" /></a>
</p>
</div>
-<div id="org7567bb6" class="figure">
+<div id="orgefabacd" class="figure">
<p><a href="fractal squares.bas" class="responsive-img"><img src="fractal%20squares,%202.png" alt="fractal%20squares,%202.png" class="responsive-img" /></a>
</p>
</div>
</div>
</div>
-<div id="outline-container-org8554707" class="outline-2">
-<h2 id="org8554707"><span class="section-number-2">4.</span> Fractal of squares animated</h2>
+<div id="outline-container-org1ab8a93" class="outline-2">
+<h2 id="org1ab8a93"><span class="section-number-2">4.</span> Fractal of squares animated</h2>
<div class="outline-text-2" id="text-4">
+<p>
+This QBasic program generates an animated fractal pattern composed of
+size-shifting squares. The animation creates a visually captivating
+display by continuously redrawing the fractal with varying parameters,
+resulting in a dynamic and ever-changing geometric pattern.
+</p>
+
<div class="flex-center">
<video controls loop autoplay class="flex-center">
<source src="fractal squares animated.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
+
<p>
<a href="fractal squares animated.bas">Source code</a>
</p>
</div>
</div>
-<div id="outline-container-orgc110f72" class="outline-2">
-<h2 id="orgc110f72"><span class="section-number-2">5.</span> Fractal of trees</h2>
+<div id="outline-container-org8845645" class="outline-2">
+<h2 id="org8845645"><span class="section-number-2">5.</span> Fractal of trees</h2>
<div class="outline-text-2" id="text-5">
+<p>
+QBasic program that generates a visually appealing fractal tree
+animation. The program creates a dynamic fractal pattern that
+resembles a tree, with branches that grow and change over time.
+</p>
+
<div class="flex-center">
<video controls loop autoplay class="flex-center">
<source src="fractal trees.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
+
+
<p>
<a href="fractal trees.bas">Source code</a>
</p>
</div>
</div>
<div id="postamble" class="status">
-<p class="date">Created: 2025-07-28 ma 18:31</p>
+<p class="date">Created: 2025-07-29 ti 00:24</p>
<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
-<!-- 2025-07-28 ma 18:31 -->
+<!-- 2025-07-29 ti 00:24 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Spiral series</title>
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
-<li><a href="#org4f6f844">1. Spiral with increasing density</a></li>
-<li><a href="#org81f12a2">2. Spiral with varying height</a></li>
-<li><a href="#orgde6c4be">3. Shaded spiral</a></li>
-<li><a href="#org9c5aa8d">4. Sphere forming spiral</a></li>
-<li><a href="#orga428d74">5. Textured spherical spiral</a></li>
-<li><a href="#org1f04d62">6. Textured and shaded spherical spiral</a></li>
+<li><a href="#org4de7736">1. Spiral with increasing density</a></li>
+<li><a href="#org1791e8a">2. Spiral with varying height</a></li>
+<li><a href="#orgee2fc76">3. Shaded spiral</a></li>
+<li><a href="#org2ca1638">4. Sphere forming spiral</a></li>
+<li><a href="#org507032b">5. Textured spherical spiral</a></li>
+<li><a href="#org0fa6f97">6. Textured and shaded spherical spiral</a></li>
</ul>
</div>
</div>
}
</style>
-<div id="outline-container-org4f6f844" class="outline-2">
-<h2 id="org4f6f844"><span class="section-number-2">1.</span> Spiral with increasing density</h2>
+<div id="outline-container-org4de7736" class="outline-2">
+<h2 id="org4de7736"><span class="section-number-2">1.</span> Spiral with increasing density</h2>
<div class="outline-text-2" id="text-1">
-<div id="org2be678b" class="figure">
+<div id="org9a8ec38" class="figure">
<p><img src="spiral.png" alt="spiral.png" class="responsive-img" />
</p>
</div>
</div>
</div>
-<div id="outline-container-org81f12a2" class="outline-2">
-<h2 id="org81f12a2"><span class="section-number-2">2.</span> Spiral with varying height</h2>
+<div id="outline-container-org1791e8a" class="outline-2">
+<h2 id="org1791e8a"><span class="section-number-2">2.</span> Spiral with varying height</h2>
<div class="outline-text-2" id="text-2">
-<div id="orgd7d0a78" class="figure">
+<div id="orgdcede2b" class="figure">
<p><img src="spiral, 2.png" alt="spiral, 2.png" class="responsive-img" />
</p>
</div>
</div>
</div>
-<div id="outline-container-orgde6c4be" class="outline-2">
-<h2 id="orgde6c4be"><span class="section-number-2">3.</span> Shaded spiral</h2>
+<div id="outline-container-orgee2fc76" class="outline-2">
+<h2 id="orgee2fc76"><span class="section-number-2">3.</span> Shaded spiral</h2>
<div class="outline-text-2" id="text-3">
-<div id="orgc7c2f14" class="figure">
+<div id="org56a4ed5" class="figure">
<p><img src="spiral, 3.png" alt="spiral, 3.png" class="responsive-img" />
</p>
</div>
</div>
</div>
-<div id="outline-container-org9c5aa8d" class="outline-2">
-<h2 id="org9c5aa8d"><span class="section-number-2">4.</span> Sphere forming spiral</h2>
+<div id="outline-container-org2ca1638" class="outline-2">
+<h2 id="org2ca1638"><span class="section-number-2">4.</span> Sphere forming spiral</h2>
<div class="outline-text-2" id="text-4">
<p>
Similar to previous spiral, Line segments are connected between the
</p>
-<div id="org02a5efa" class="figure">
+<div id="org54145e9" class="figure">
<p><img src="spiral, 4, 1.png" alt="spiral, 4, 1.png" class="responsive-img" />
</p>
</div>
</p>
-<div id="org848d35b" class="figure">
+<div id="orga1d97cc" class="figure">
<p><img src="spiral, 4, 2.png" alt="spiral, 4, 2.png" class="responsive-img" />
</p>
</div>
</div>
</div>
-<div id="outline-container-orga428d74" class="outline-2">
-<h2 id="orga428d74"><span class="section-number-2">5.</span> Textured spherical spiral</h2>
+<div id="outline-container-org507032b" class="outline-2">
+<h2 id="org507032b"><span class="section-number-2">5.</span> Textured spherical spiral</h2>
<div class="outline-text-2" id="text-5">
-<div id="org34884ba" class="figure">
+<div id="orgfab3135" class="figure">
<p><img src="spiral, 5.png" alt="spiral, 5.png" class="responsive-img" />
</p>
</div>
</div>
</div>
-<div id="outline-container-org1f04d62" class="outline-2">
-<h2 id="org1f04d62"><span class="section-number-2">6.</span> Textured and shaded spherical spiral</h2>
+<div id="outline-container-org0fa6f97" class="outline-2">
+<h2 id="org0fa6f97"><span class="section-number-2">6.</span> Textured and shaded spherical spiral</h2>
<div class="outline-text-2" id="text-6">
-<div id="org327a812" class="figure">
+<div id="org2841266" class="figure">
<p><img src="spiral, 6.png" alt="spiral, 6.png" class="responsive-img" />
</p>
</div>
</div>
</div>
<div id="postamble" class="status">
-<p class="date">Created: 2025-07-28 ma 18:31</p>
+<p class="date">Created: 2025-07-29 ti 00:24</p>
<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
-<!-- 2025-07-28 ma 18:32 -->
+<!-- 2025-07-29 ti 02:13 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fractals</title>
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
-<li><a href="#org1743c5c">1. Circular waves</a></li>
-<li><a href="#org7aca31e">2. Diamond square clouds</a></li>
-<li><a href="#org35f4011">3. Old paper</a></li>
-<li><a href="#org8f24972">4. Wood</a></li>
-<li><a href="#org90bc76d">5. Yellow flame</a></li>
+<li><a href="#orgb370f6f">1. Circular waves</a></li>
+<li><a href="#org563db65">2. Diamond square clouds</a></li>
+<li><a href="#orgd785dc2">3. Old paper</a></li>
+<li><a href="#orgdcf6428">4. Wood</a></li>
+<li><a href="#org95d07e4">5. Yellow flame</a></li>
</ul>
</div>
</div>
}
</style>
-<div id="outline-container-org1743c5c" class="outline-2">
-<h2 id="org1743c5c"><span class="section-number-2">1.</span> Circular waves</h2>
+<div id="outline-container-orgb370f6f" class="outline-2">
+<h2 id="orgb370f6f"><span class="section-number-2">1.</span> Circular waves</h2>
<div class="outline-text-2" id="text-1">
+<p>
+This QBasic program creates visually captivating circular wave
+patterns by manipulating pixel colors based on sine function
+calculations. It's a simple yet effective demonstration of how
+mathematical functions can be used to generate complex visual
+patterns.
+</p>
+
+<p>
+The program uses two nested loops to iterate over each pixel on the
+screen. The outer loop handles the vertical axis (y-coordinate), and
+the inner loop handles the horizontal axis (x-coordinate).
+</p>
+
+<p>
+For each pixel, the program calculates a sine value based on the
+squared distance from the origin (0,0). This calculation involves the
+formula:
+</p>
+
+<pre class="example">
+colorvalue = SIN((x^2 + y^2) / 10) * 10
+</pre>
+
+
+<p>
+This program is a blend of mathematics and art, showcasing how simple
+algorithms can produce intricate and visually appealing results.
+</p>
+
<p class="responsive-img">
<img src="Circular waves.png" alt="Circular waves.png" class="responsive-img" />
<a href="Circular waves.bas">Source code</a>
</p>
<div class="org-src-container">
-<pre class="src src-basic-qb45"><span style="color: #666677;">' </span><span style="color: #666677;">Program to render circular wave patterns.</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Algorithm was accidentally discovered while experimenting with sine function.</span>
-<span style="color: #666677;">'</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">This program is free software: released under Creative Commons Zero (CC0) license</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">by Svjatoslav Agejenko.</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Email: svjatoslav@svjatoslav.eu</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Homepage: http://www.svjatoslav.eu</span>
-<span style="color: #666677;">'</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Changelog:</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">2003, Initial version</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">2025, Improved program readability</span>
-
-<span style="color: #ee8899;">SCREEN</span> 13
-
-<span style="color: #666677;">' </span><span style="color: #666677;">Initialize the screen mode to 320x200 with 16 colors</span>
-
-<span style="color: #666677;">' </span><span style="color: #666677;">Outer loop for the vertical axis (y-coordinate)</span>
-<span style="color: #bb99ee;">FOR</span> ycoordinate = 1 <span style="color: #bb99ee;">TO</span> 199
- <span style="color: #666677;">' </span><span style="color: #666677;">Inner loop for the horizontal axis (x-coordinate)</span>
- <span style="color: #bb99ee;">FOR</span> xcoordinate = 1 <span style="color: #bb99ee;">TO</span> 319
- <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the sine value based on the squared distances from the origin</span>
- colorvalue = <span style="color: #88aaee;">SIN</span>((xcoordinate ^ 2 + ycoordinate ^ 2) / 10) * 10
-
- <span style="color: #666677;">' </span><span style="color: #666677;">Clamp the color value to the range [0, 15]</span>
- <span style="color: #bb99ee;">IF</span> colorvalue < 0 <span style="color: #bb99ee;">THEN</span> colorvalue = 0
- <span style="color: #bb99ee;">IF</span> colorvalue > 15 <span style="color: #bb99ee;">THEN</span> colorvalue = 15
-
- <span style="color: #666677;">' </span><span style="color: #666677;">Set the pixel color at (xcoordinate, ycoordinate) with an offset to use the full 16-color palette</span>
- <span style="color: #ee8899;">PSET</span> (xcoordinate, ycoordinate), colorvalue + 16
- <span style="color: #bb99ee;">NEXT</span> xcoordinate
-<span style="color: #bb99ee;">NEXT</span> ycoordinate
-
-<span style="color: #666677;">' </span><span style="color: #666677;">Wait for user key press</span>
-<span style="color: #bb99ee;">WHILE</span> <span style="color: #88aaee;">INKEY$</span> = <span style="color: #99dd99;">""</span>: <span style="color: #bb99ee;">WEND</span>
-<span style="color: #ee8899;">CLS</span>
-<span style="color: #bb99ee;">END</span>
+<pre class="src src-basic-qb45"><span style="color: #6c7086;">' </span><span style="color: #6c7086;">Program to render circular wave patterns.</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Algorithm was accidentally discovered while experimenting with sine function.</span>
+<span style="color: #6c7086;">'</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">This program is free software: released under Creative Commons Zero (CC0) license</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">by Svjatoslav Agejenko.</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Email: svjatoslav@svjatoslav.eu</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Homepage: http://www.svjatoslav.eu</span>
+<span style="color: #6c7086;">'</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Changelog:</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">2003, Initial version</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">2025, Improved program readability</span>
+
+<span style="color: #f38ba8;">SCREEN</span> 13
+
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Initialize the screen mode to 320x200 with 16 colors</span>
+
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Outer loop for the vertical axis (y-coordinate)</span>
+<span style="color: #cba6f7;">FOR</span> ycoordinate = 1 <span style="color: #cba6f7;">TO</span> 199
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Inner loop for the horizontal axis (x-coordinate)</span>
+ <span style="color: #cba6f7;">FOR</span> xcoordinate = 1 <span style="color: #cba6f7;">TO</span> 319
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the sine value based on the squared distances from the origin</span>
+ colorvalue = <span style="color: #89b4fa;">SIN</span>((xcoordinate ^ 2 + ycoordinate ^ 2) / 10) * 10
+
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Clamp the color value to the range [0, 15]</span>
+ <span style="color: #cba6f7;">IF</span> colorvalue < 0 <span style="color: #cba6f7;">THEN</span> colorvalue = 0
+ <span style="color: #cba6f7;">IF</span> colorvalue > 15 <span style="color: #cba6f7;">THEN</span> colorvalue = 15
+
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set the pixel color at (xcoordinate, ycoordinate) with an offset to use the full 16-color palette</span>
+ <span style="color: #f38ba8;">PSET</span> (xcoordinate, ycoordinate), colorvalue + 16
+ <span style="color: #cba6f7;">NEXT</span> xcoordinate
+<span style="color: #cba6f7;">NEXT</span> ycoordinate
+
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Wait for user key press</span>
+<span style="color: #cba6f7;">WHILE</span> <span style="color: #89b4fa;">INKEY$</span> = <span style="color: #a6e3a1;">""</span>: <span style="color: #cba6f7;">WEND</span>
+<span style="color: #f38ba8;">CLS</span>
+<span style="color: #cba6f7;">END</span>
</pre>
</div>
</div>
</div>
-<div id="outline-container-org7aca31e" class="outline-2">
-<h2 id="org7aca31e"><span class="section-number-2">2.</span> Diamond square clouds</h2>
+<div id="outline-container-org563db65" class="outline-2">
+<h2 id="org563db65"><span class="section-number-2">2.</span> Diamond square clouds</h2>
<div class="outline-text-2" id="text-2">
+<p>
+This QBasic program demonstrates the Diamond-Square algorithm, a
+method used to generate fractal terrain or cloud surfaces. The
+algorithm is particularly useful for creating realistic landscapes or
+textures in computer graphics.
+</p>
+
<p class="responsive-img">
<img src="Diamond square clouds.png" alt="Diamond square clouds.png" class="responsive-img" />
<a href="Diamond square clouds.bas">Source code</a>
</p>
<div class="org-src-container">
-<pre class="src src-basic-qb45"><span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> DrawPixels (x1 <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>, y1 <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>, s <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>)
-<span style="color: #666677;">' </span><span style="color: #666677;">Program to render cloud surface using diamond square algorithm.</span>
-<span style="color: #666677;">'</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">This program is free software: released under Creative Commons Zero (CC0) license</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">by Svjatoslav Agejenko.</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Email: svjatoslav@svjatoslav.eu</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Homepage: http://www.svjatoslav.eu</span>
-<span style="color: #666677;">'</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Changelog:</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">2003.12, Initial version</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">2024.08, Improved program readability</span>
-
-<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> DrawBox (x1 <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>, y1 <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>, s <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>)
-<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> SetPalette ()
-<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> InitializeProgram ()
-<span style="color: #bb99ee;">DEFINT</span> A-Z
+<pre class="src src-basic-qb45"><span style="color: #cba6f7;">DECLARE</span> <span style="color: #cba6f7;">SUB</span> DrawPixels (x1 <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>, y1 <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>, s <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>)
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Program to render cloud surface using diamond square algorithm.</span>
+<span style="color: #6c7086;">'</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">This program is free software: released under Creative Commons Zero (CC0) license</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">by Svjatoslav Agejenko.</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Email: svjatoslav@svjatoslav.eu</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Homepage: http://www.svjatoslav.eu</span>
+<span style="color: #6c7086;">'</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Changelog:</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">2003.12, Initial version</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">2024.08, Improved program readability</span>
+
+<span style="color: #cba6f7;">DECLARE</span> <span style="color: #cba6f7;">SUB</span> DrawBox (x1 <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>, y1 <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>, s <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>)
+<span style="color: #cba6f7;">DECLARE</span> <span style="color: #cba6f7;">SUB</span> SetPalette ()
+<span style="color: #cba6f7;">DECLARE</span> <span style="color: #cba6f7;">SUB</span> InitializeProgram ()
+<span style="color: #cba6f7;">DEFINT</span> A-Z
InitializeProgram
-<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> maxLightness <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>
+<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> maxLightness <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
maxLightness = 127
-<span style="color: #bb99ee;">DIM</span> scale <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>
+<span style="color: #cba6f7;">DIM</span> scale <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
scale = 2 ^ 8
-<span style="color: #eeaa77;">1</span> :
+<span style="color: #fab387;">1</span> :
scale = scale \ 2
x1 = (319 \ scale) - 1
y1 = (199 \ scale) - 1
-<span style="color: #bb99ee;">FOR</span> y = 0 <span style="color: #bb99ee;">TO</span> y1
- <span style="color: #bb99ee;">FOR</span> x = 0 <span style="color: #bb99ee;">TO</span> x1
+<span style="color: #cba6f7;">FOR</span> y = 0 <span style="color: #cba6f7;">TO</span> y1
+ <span style="color: #cba6f7;">FOR</span> x = 0 <span style="color: #cba6f7;">TO</span> x1
DrawPixels x * scale, y * scale, scale
- <span style="color: #bb99ee;">NEXT</span> x
-<span style="color: #bb99ee;">NEXT</span> y
+ <span style="color: #cba6f7;">NEXT</span> x
+<span style="color: #cba6f7;">NEXT</span> y
-<span style="color: #bb99ee;">IF</span> scale > 2 <span style="color: #bb99ee;">THEN</span> <span style="color: #bb99ee;">GOTO</span> <span style="color: #eeaa77;">1</span>
-WAITa$ = <span style="color: #88aaee;">INPUT$</span>(1)
+<span style="color: #cba6f7;">IF</span> scale > 2 <span style="color: #cba6f7;">THEN</span> <span style="color: #cba6f7;">GOTO</span> <span style="color: #fab387;">1</span>
+WAITa$ = <span style="color: #89b4fa;">INPUT$</span>(1)
-<span style="color: #bb99ee;">SUB</span> DrawPixels (x1 <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>, y1 <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>, s <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>)
- <span style="color: #666677;">' </span><span style="color: #666677;">Get the lightness values for the corners of the box</span>
- c1 = <span style="color: #88aaee;">POINT</span>(x1, y1)
- c2 = <span style="color: #88aaee;">POINT</span>(x1 + s, y1)
- c3 = <span style="color: #88aaee;">POINT</span>(x1, y1 + s)
- c4 = <span style="color: #88aaee;">POINT</span>(x1 + s, y1 + s)
+<span style="color: #cba6f7;">SUB</span> DrawPixels (x1 <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>, y1 <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>, s <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>)
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Get the lightness values for the corners of the box</span>
+ c1 = <span style="color: #89b4fa;">POINT</span>(x1, y1)
+ c2 = <span style="color: #89b4fa;">POINT</span>(x1 + s, y1)
+ c3 = <span style="color: #89b4fa;">POINT</span>(x1, y1 + s)
+ c4 = <span style="color: #89b4fa;">POINT</span>(x1 + s, y1 + s)
- <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the midpoint lightness values</span>
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the midpoint lightness values</span>
sp = s \ 2
k = s * 2
kp = k / 2
- cc2 = ((c1 + c2) / 2) + (<span style="color: #88aaee;">RND</span> * k) - kp
- <span style="color: #bb99ee;">IF</span> cc2 > maxLightness <span style="color: #bb99ee;">THEN</span> cc2 = maxLightness
- <span style="color: #bb99ee;">IF</span> cc2 < 0 <span style="color: #bb99ee;">THEN</span> cc2 = 0
-
- cc3 = ((c1 + c3) / 2) + (<span style="color: #88aaee;">RND</span> * k) - kp
- <span style="color: #bb99ee;">IF</span> cc3 > maxLightness <span style="color: #bb99ee;">THEN</span> cc3 = maxLightness
- <span style="color: #bb99ee;">IF</span> cc3 < 0 <span style="color: #bb99ee;">THEN</span> cc3 = 0
-
- cc4 = ((c2 + c4) / 2) + (<span style="color: #88aaee;">RND</span> * k) - kp
- <span style="color: #bb99ee;">IF</span> cc4 > maxLightness <span style="color: #bb99ee;">THEN</span> cc4 = maxLightness
- <span style="color: #bb99ee;">IF</span> cc4 < 0 <span style="color: #bb99ee;">THEN</span> cc4 = 0
-
- cc5 = ((c3 + c4) / 2) + (<span style="color: #88aaee;">RND</span> * k) - kp
- <span style="color: #bb99ee;">IF</span> cc5 > maxLightness <span style="color: #bb99ee;">THEN</span> cc5 = maxLightness
- <span style="color: #bb99ee;">IF</span> cc5 < 0 <span style="color: #bb99ee;">THEN</span> cc5 = 0
-
- <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the central lightness value</span>
- cc1 = ((cc2 + cc3 + cc4 + cc5) / 4) + (<span style="color: #88aaee;">RND</span> * k) - kp
- <span style="color: #bb99ee;">IF</span> cc1 > maxLightness <span style="color: #bb99ee;">THEN</span> cc1 = maxLightness
- <span style="color: #bb99ee;">IF</span> cc1 < 0 <span style="color: #bb99ee;">THEN</span> cc1 = 0
-
- <span style="color: #666677;">' </span><span style="color: #666677;">Set the calculated lightness values for the box</span>
- <span style="color: #ee8899;">PSET</span> (x1 + sp, y1 + sp), cc1
- <span style="color: #ee8899;">PSET</span> (x1 + sp, y1), cc2
- <span style="color: #ee8899;">PSET</span> (x1, y1 + sp), cc3
- <span style="color: #ee8899;">PSET</span> (x1 + s, y1 + sp), cc4
- <span style="color: #ee8899;">PSET</span> (x1 + sp, y1 + s), cc5
-<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">SUB</span>
-
-<span style="color: #bb99ee;">SUB</span> InitializeProgram
- <span style="color: #666677;">' </span><span style="color: #666677;">Set the screen mode and initialize the color palette</span>
- <span style="color: #ee8899;">SCREEN</span> 13
+ cc2 = ((c1 + c2) / 2) + (<span style="color: #89b4fa;">RND</span> * k) - kp
+ <span style="color: #cba6f7;">IF</span> cc2 > maxLightness <span style="color: #cba6f7;">THEN</span> cc2 = maxLightness
+ <span style="color: #cba6f7;">IF</span> cc2 < 0 <span style="color: #cba6f7;">THEN</span> cc2 = 0
+
+ cc3 = ((c1 + c3) / 2) + (<span style="color: #89b4fa;">RND</span> * k) - kp
+ <span style="color: #cba6f7;">IF</span> cc3 > maxLightness <span style="color: #cba6f7;">THEN</span> cc3 = maxLightness
+ <span style="color: #cba6f7;">IF</span> cc3 < 0 <span style="color: #cba6f7;">THEN</span> cc3 = 0
+
+ cc4 = ((c2 + c4) / 2) + (<span style="color: #89b4fa;">RND</span> * k) - kp
+ <span style="color: #cba6f7;">IF</span> cc4 > maxLightness <span style="color: #cba6f7;">THEN</span> cc4 = maxLightness
+ <span style="color: #cba6f7;">IF</span> cc4 < 0 <span style="color: #cba6f7;">THEN</span> cc4 = 0
+
+ cc5 = ((c3 + c4) / 2) + (<span style="color: #89b4fa;">RND</span> * k) - kp
+ <span style="color: #cba6f7;">IF</span> cc5 > maxLightness <span style="color: #cba6f7;">THEN</span> cc5 = maxLightness
+ <span style="color: #cba6f7;">IF</span> cc5 < 0 <span style="color: #cba6f7;">THEN</span> cc5 = 0
+
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the central lightness value</span>
+ cc1 = ((cc2 + cc3 + cc4 + cc5) / 4) + (<span style="color: #89b4fa;">RND</span> * k) - kp
+ <span style="color: #cba6f7;">IF</span> cc1 > maxLightness <span style="color: #cba6f7;">THEN</span> cc1 = maxLightness
+ <span style="color: #cba6f7;">IF</span> cc1 < 0 <span style="color: #cba6f7;">THEN</span> cc1 = 0
+
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set the calculated lightness values for the box</span>
+ <span style="color: #f38ba8;">PSET</span> (x1 + sp, y1 + sp), cc1
+ <span style="color: #f38ba8;">PSET</span> (x1 + sp, y1), cc2
+ <span style="color: #f38ba8;">PSET</span> (x1, y1 + sp), cc3
+ <span style="color: #f38ba8;">PSET</span> (x1 + s, y1 + sp), cc4
+ <span style="color: #f38ba8;">PSET</span> (x1 + sp, y1 + s), cc5
+<span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">SUB</span>
+
+<span style="color: #cba6f7;">SUB</span> InitializeProgram
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set the screen mode and initialize the color palette</span>
+ <span style="color: #f38ba8;">SCREEN</span> 13
SetPalette
- <span style="color: #ee8899;">RANDOMIZE</span> <span style="color: #ee8899;">TIMER</span>
-<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">SUB</span>
-
-<span style="color: #bb99ee;">SUB</span> SetPalette
- <span style="color: #666677;">' </span><span style="color: #666677;">Set the color palette for lightness levels</span>
- <span style="color: #bb99ee;">FOR</span> a = 0 <span style="color: #bb99ee;">TO</span> 255
- <span style="color: #ee8899;">OUT</span> &H3C8, a
- <span style="color: #ee8899;">OUT</span> &H3C9, a / 4
- <span style="color: #ee8899;">OUT</span> &H3C9, a / 3
- <span style="color: #ee8899;">OUT</span> &H3C9, a / 2.3
- <span style="color: #bb99ee;">NEXT</span> a
-<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">SUB</span>
+ <span style="color: #f38ba8;">RANDOMIZE</span> <span style="color: #f38ba8;">TIMER</span>
+<span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">SUB</span>
+
+<span style="color: #cba6f7;">SUB</span> SetPalette
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set the color palette for lightness levels</span>
+ <span style="color: #cba6f7;">FOR</span> a = 0 <span style="color: #cba6f7;">TO</span> 255
+ <span style="color: #f38ba8;">OUT</span> &H3C8, a
+ <span style="color: #f38ba8;">OUT</span> &H3C9, a / 4
+ <span style="color: #f38ba8;">OUT</span> &H3C9, a / 3
+ <span style="color: #f38ba8;">OUT</span> &H3C9, a / 2.3
+ <span style="color: #cba6f7;">NEXT</span> a
+<span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">SUB</span>
</pre>
</div>
</div>
</div>
-<div id="outline-container-org35f4011" class="outline-2">
-<h2 id="org35f4011"><span class="section-number-2">3.</span> Old paper</h2>
+<div id="outline-container-orgd785dc2" class="outline-2">
+<h2 id="orgd785dc2"><span class="section-number-2">3.</span> Old paper</h2>
<div class="outline-text-2" id="text-3">
+<p>
+This QBasic program generates a procedural texture that simulates the
+appearance of old paper.
+</p>
+
+<p>
+The program initializes the screen to a 320x200 resolution with 256
+colors (SCREEN 13 in QBasic) and sets up a grayscale color
+palette. Each color index from 0 to 63 is assigned a shade of gray,
+creating a smooth gradient.
+</p>
+
+<p>
+The program generates the texture by iterating over each pixel on the
+screen. For each pixel, it calculates a color value based on the color
+of the pixel directly above it, adding a small amount of random
+noise. This creates a smooth transition between pixels with controlled
+randomness, mimicking the fibrous texture of paper.
+</p>
+
<p class="responsive-img">
<img src="Old paper.png" alt="Old paper.png" class="responsive-img" />
<a href="Old paper.bas">Source code</a>
</p>
<div class="org-src-container">
-<pre class="src src-basic-qb45"><span style="color: #666677;">' </span><span style="color: #666677;">Program to render surface resembling old paper.</span>
-<span style="color: #666677;">'</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">This program is free software: released under Creative Commons Zero (CC0) license</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">by Svjatoslav Agejenko.</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Email: svjatoslav@svjatoslav.eu</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Homepage: http://www.svjatoslav.eu</span>
-<span style="color: #666677;">'</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Changelog:</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">2003, Initial version</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">2025, Improved program readability</span>
-
-<span style="color: #bb99ee;">DEFINT</span> A-Z
-<span style="color: #ee8899;">SCREEN</span> 13
-<span style="color: #ee8899;">RANDOMIZE</span> <span style="color: #ee8899;">TIMER</span>
-
-<span style="color: #666677;">' </span><span style="color: #666677;">Initialize the color palette to grayscale. Each color index from 0 to 63 has R, G, B values equal to the index,</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">creating a smooth grayscale gradient for the 256-color mode.</span>
-<span style="color: #bb99ee;">FOR</span> paletteIndex = 0 <span style="color: #bb99ee;">TO</span> 63
- <span style="color: #ee8899;">OUT</span> &H3C8, paletteIndex
- <span style="color: #ee8899;">OUT</span> &H3C9, paletteIndex <span style="color: #666677;">' </span><span style="color: #666677;">Set red component</span>
- <span style="color: #ee8899;">OUT</span> &H3C9, paletteIndex <span style="color: #666677;">' </span><span style="color: #666677;">Set green component</span>
- <span style="color: #ee8899;">OUT</span> &H3C9, paletteIndex <span style="color: #666677;">' </span><span style="color: #666677;">Set blue component</span>
-<span style="color: #bb99ee;">NEXT</span> paletteIndex
+<pre class="src src-basic-qb45"><span style="color: #6c7086;">' </span><span style="color: #6c7086;">Program to render surface resembling old paper.</span>
+<span style="color: #6c7086;">'</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">This program is free software: released under Creative Commons Zero (CC0) license</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">by Svjatoslav Agejenko.</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Email: svjatoslav@svjatoslav.eu</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Homepage: http://www.svjatoslav.eu</span>
+<span style="color: #6c7086;">'</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Changelog:</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">2003, Initial version</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">2025, Improved program readability</span>
+
+<span style="color: #cba6f7;">DEFINT</span> A-Z
+<span style="color: #f38ba8;">SCREEN</span> 13
+<span style="color: #f38ba8;">RANDOMIZE</span> <span style="color: #f38ba8;">TIMER</span>
+
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Initialize the color palette to grayscale. Each color index from 0 to 63 has R, G, B values equal to the index,</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">creating a smooth grayscale gradient for the 256-color mode.</span>
+<span style="color: #cba6f7;">FOR</span> paletteIndex = 0 <span style="color: #cba6f7;">TO</span> 63
+ <span style="color: #f38ba8;">OUT</span> &H3C8, paletteIndex
+ <span style="color: #f38ba8;">OUT</span> &H3C9, paletteIndex <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set red component</span>
+ <span style="color: #f38ba8;">OUT</span> &H3C9, paletteIndex <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set green component</span>
+ <span style="color: #f38ba8;">OUT</span> &H3C9, paletteIndex <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set blue component</span>
+<span style="color: #cba6f7;">NEXT</span> paletteIndex
noiseOffset = 0
-<span style="color: #666677;">' </span><span style="color: #666677;">Generate a paper-like surface by averaging the color of the pixel above with some randomness.</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">This creates a procedural texture that mimics the roughness of paper.</span>
-<span style="color: #bb99ee;">FOR</span> y = 1 <span style="color: #bb99ee;">TO</span> 190
- <span style="color: #bb99ee;">FOR</span> x = 1 <span style="color: #bb99ee;">TO</span> 310
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Generate a paper-like surface by averaging the color of the pixel above with some randomness.</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">This creates a procedural texture that mimics the roughness of paper.</span>
+<span style="color: #cba6f7;">FOR</span> y = 1 <span style="color: #cba6f7;">TO</span> 190
+ <span style="color: #cba6f7;">FOR</span> x = 1 <span style="color: #cba6f7;">TO</span> 310
stepCounter = stepCounter + 1
- <span style="color: #666677;">' </span><span style="color: #666677;">Approximately every 10 steps, introduce a new random noise offset to create variation in the pattern.</span>
- <span style="color: #666677;">' </span><span style="color: #666677;">This prevents the surface from becoming too uniform.</span>
- <span style="color: #bb99ee;">IF</span> stepCounter > 10 <span style="color: #bb99ee;">THEN</span>
- noiseOffset = <span style="color: #88aaee;">RND</span> * currentColor / 20
- stepCounter = stepCounter - (<span style="color: #88aaee;">RND</span> * 20 + 10)
- <span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">IF</span>
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Approximately every 10 steps, introduce a new random noise offset to create variation in the pattern.</span>
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">This prevents the surface from becoming too uniform.</span>
+ <span style="color: #cba6f7;">IF</span> stepCounter > 10 <span style="color: #cba6f7;">THEN</span>
+ noiseOffset = <span style="color: #89b4fa;">RND</span> * currentColor / 20
+ stepCounter = stepCounter - (<span style="color: #89b4fa;">RND</span> * 20 + 10)
+ <span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">IF</span>
- <span style="color: #666677;">' </span><span style="color: #666677;">Get the color of the pixel directly above the current position.</span>
- topColor = <span style="color: #88aaee;">POINT</span>(x, y - 1)
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Get the color of the pixel directly above the current position.</span>
+ topColor = <span style="color: #89b4fa;">POINT</span>(x, y - 1)
- <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the current color as the average of the top color and the previous current color,</span>
- <span style="color: #666677;">' </span><span style="color: #666677;">plus a small random noise and minus the noise offset. This creates a smooth transition with</span>
- <span style="color: #666677;">' </span><span style="color: #666677;">controlled randomness.</span>
- currentColor = (topColor + currentColor) \ 2 + ((<span style="color: #88aaee;">RND</span> * 2) - noiseOffset)
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the current color as the average of the top color and the previous current color,</span>
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">plus a small random noise and minus the noise offset. This creates a smooth transition with</span>
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">controlled randomness.</span>
+ currentColor = (topColor + currentColor) \ 2 + ((<span style="color: #89b4fa;">RND</span> * 2) - noiseOffset)
- <span style="color: #666677;">' </span><span style="color: #666677;">Clamp the color value to stay within the valid palette range (0 to 63).</span>
- <span style="color: #bb99ee;">IF</span> currentColor < 0 <span style="color: #bb99ee;">THEN</span> currentColor = 0
- <span style="color: #bb99ee;">IF</span> currentColor > 63 <span style="color: #bb99ee;">THEN</span> currentColor = 63
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Clamp the color value to stay within the valid palette range (0 to 63).</span>
+ <span style="color: #cba6f7;">IF</span> currentColor < 0 <span style="color: #cba6f7;">THEN</span> currentColor = 0
+ <span style="color: #cba6f7;">IF</span> currentColor > 63 <span style="color: #cba6f7;">THEN</span> currentColor = 63
- <span style="color: #666677;">' </span><span style="color: #666677;">Plot the current pixel at (x-1, y) using the calculated color.</span>
- <span style="color: #ee8899;">PSET</span> (x - 1, y), currentColor
- <span style="color: #bb99ee;">NEXT</span> x
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Plot the current pixel at (x-1, y) using the calculated color.</span>
+ <span style="color: #f38ba8;">PSET</span> (x - 1, y), currentColor
+ <span style="color: #cba6f7;">NEXT</span> x
- <span style="color: #666677;">' </span><span style="color: #666677;">Set the starting color for the next row to the last calculated color of the current row.</span>
- <span style="color: #666677;">' </span><span style="color: #666677;">This ensures continuity between rows.</span>
- <span style="color: #ee8899;">PSET</span> (0, y + 1), currentColor
-<span style="color: #bb99ee;">NEXT</span> y
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set the starting color for the next row to the last calculated color of the current row.</span>
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">This ensures continuity between rows.</span>
+ <span style="color: #f38ba8;">PSET</span> (0, y + 1), currentColor
+<span style="color: #cba6f7;">NEXT</span> y
-<span style="color: #666677;">' </span><span style="color: #666677;">Wait for a single key press before exiting the program.</span>
-inputKey$ = <span style="color: #88aaee;">INPUT$</span>(1)
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Wait for a single key press before exiting the program.</span>
+inputKey$ = <span style="color: #89b4fa;">INPUT$</span>(1)
-<span style="color: #bb99ee;">SYSTEM</span>
+<span style="color: #cba6f7;">SYSTEM</span>
</pre>
</div>
</div>
</div>
-<div id="outline-container-org8f24972" class="outline-2">
-<h2 id="org8f24972"><span class="section-number-2">4.</span> Wood</h2>
+<div id="outline-container-orgdcf6428" class="outline-2">
+<h2 id="orgdcf6428"><span class="section-number-2">4.</span> Wood</h2>
<div class="outline-text-2" id="text-4">
+<p>
+This QBasic program creates a visually appealing simulation of a wood
+surface. It is designed to generate a realistic wood grain texture
+using simple graphical techniques.
+</p>
+
<p class="responsive-img">
<img src="Wood.png" alt="Wood.png" class="responsive-img" />
<a href="Wood.bas">Source code</a>
</p>
<div class="org-src-container">
-<pre class="src src-basic-qb45"><span style="color: #666677;">' </span><span style="color: #666677;">Program to render surface resembling wood.</span>
-<span style="color: #666677;">'</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">This program is free software: released under Creative Commons Zero (CC0) license</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">by Svjatoslav Agejenko.</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Email: svjatoslav@svjatoslav.eu</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Homepage: http://www.svjatoslav.eu</span>
-<span style="color: #666677;">'</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Changelog:</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">2003.12, Initial version</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">2024 - 2025, Improved program readability</span>
-
-<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> DrawWoodSurface (woodX%, woodY%)
-<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> DrawPaper (xPos%, y1Pos%)
-<span style="color: #bb99ee;">DEFINT</span> A-Z
-<span style="color: #ee8899;">SCREEN</span> 12
-<span style="color: #ee8899;">RANDOMIZE</span> <span style="color: #ee8899;">TIMER</span>
-
-<span style="color: #666677;">' </span><span style="color: #666677;">Set palette colors</span>
-<span style="color: #bb99ee;">FOR</span> colorIndex = 0 <span style="color: #bb99ee;">TO</span> 15
- <span style="color: #ee8899;">OUT</span> &H3C8, colorIndex
- <span style="color: #ee8899;">OUT</span> &H3C9, colorIndex * 4
- <span style="color: #ee8899;">OUT</span> &H3C9, colorIndex * 3
- <span style="color: #ee8899;">OUT</span> &H3C9, colorIndex * 0
-<span style="color: #bb99ee;">NEXT</span> colorIndex
-
-<span style="color: #666677;">' </span><span style="color: #666677;">Main loop to draw wood at random positions</span>
-<span style="color: #eeaa77;">100</span>:
-woodX = <span style="color: #88aaee;">RND</span> * 400 + 200
-woodY = <span style="color: #88aaee;">RND</span> * 100 + 200
-<span style="color: #bb99ee;">CALL</span> DrawWoodSurface(woodX, woodY)
-<span style="color: #bb99ee;">GOTO</span> <span style="color: #eeaa77;">100</span>
-
-<span style="color: #666677;">' </span><span style="color: #666677;">Wait for user input to exit</span>
-exitKey$ = <span style="color: #88aaee;">INPUT$</span>(1)
-
-<span style="color: #bb99ee;">SUB</span> DrawWoodSurface (woodX, woodY)
- <span style="color: #bb99ee;">DIM</span> lowerY <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>
- <span style="color: #bb99ee;">DIM</span> phaseOffset <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>
- <span style="color: #bb99ee;">DIM</span> xStepCounter <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>
- <span style="color: #bb99ee;">DIM</span> randomOffset <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>
- <span style="color: #bb99ee;">DIM</span> newColor <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>
- <span style="color: #bb99ee;">DIM</span> upperColor <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>
- <span style="color: #bb99ee;">DIM</span> currentColor <span style="color: #bb99ee;">AS</span> <span style="color: #eeddaa;">INTEGER</span>
-
- <span style="color: #666677;">' </span><span style="color: #666677;">Draw the outline of the wood</span>
+<pre class="src src-basic-qb45"><span style="color: #6c7086;">' </span><span style="color: #6c7086;">Program to render surface resembling wood.</span>
+<span style="color: #6c7086;">'</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">This program is free software: released under Creative Commons Zero (CC0) license</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">by Svjatoslav Agejenko.</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Email: svjatoslav@svjatoslav.eu</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Homepage: http://www.svjatoslav.eu</span>
+<span style="color: #6c7086;">'</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Changelog:</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">2003.12, Initial version</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">2024 - 2025, Improved program readability</span>
+
+<span style="color: #cba6f7;">DECLARE</span> <span style="color: #cba6f7;">SUB</span> DrawWoodSurface (woodX%, woodY%)
+<span style="color: #cba6f7;">DECLARE</span> <span style="color: #cba6f7;">SUB</span> DrawPaper (xPos%, y1Pos%)
+<span style="color: #cba6f7;">DEFINT</span> A-Z
+<span style="color: #f38ba8;">SCREEN</span> 12
+<span style="color: #f38ba8;">RANDOMIZE</span> <span style="color: #f38ba8;">TIMER</span>
+
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set palette colors</span>
+<span style="color: #cba6f7;">FOR</span> colorIndex = 0 <span style="color: #cba6f7;">TO</span> 15
+ <span style="color: #f38ba8;">OUT</span> &H3C8, colorIndex
+ <span style="color: #f38ba8;">OUT</span> &H3C9, colorIndex * 4
+ <span style="color: #f38ba8;">OUT</span> &H3C9, colorIndex * 3
+ <span style="color: #f38ba8;">OUT</span> &H3C9, colorIndex * 0
+<span style="color: #cba6f7;">NEXT</span> colorIndex
+
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Main loop to draw wood at random positions</span>
+<span style="color: #fab387;">100</span>:
+woodX = <span style="color: #89b4fa;">RND</span> * 400 + 200
+woodY = <span style="color: #89b4fa;">RND</span> * 100 + 200
+<span style="color: #cba6f7;">CALL</span> DrawWoodSurface(woodX, woodY)
+<span style="color: #cba6f7;">GOTO</span> <span style="color: #fab387;">100</span>
+
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Wait for user input to exit</span>
+exitKey$ = <span style="color: #89b4fa;">INPUT$</span>(1)
+
+<span style="color: #cba6f7;">SUB</span> DrawWoodSurface (woodX, woodY)
+ <span style="color: #cba6f7;">DIM</span> lowerY <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
+ <span style="color: #cba6f7;">DIM</span> phaseOffset <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
+ <span style="color: #cba6f7;">DIM</span> xStepCounter <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
+ <span style="color: #cba6f7;">DIM</span> randomOffset <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
+ <span style="color: #cba6f7;">DIM</span> newColor <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
+ <span style="color: #cba6f7;">DIM</span> upperColor <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
+ <span style="color: #cba6f7;">DIM</span> currentColor <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
+
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw the outline of the wood</span>
lowerY = woodY + 1
- <span style="color: #ee8899;">LINE</span> (0, 0)-(woodX, woodY), 0, BF <span style="color: #666677;">' </span><span style="color: #666677;">Black background</span>
- <span style="color: #ee8899;">LINE</span> (5, 5)-(woodX - 5, lowerY - 5), 8, BF <span style="color: #666677;">' </span><span style="color: #666677;">Gray wood outline</span>
- <span style="color: #ee8899;">LINE</span> (10, 10)-(woodX - 10, lowerY - 10), 15, BF <span style="color: #666677;">' </span><span style="color: #666677;">White inner highlight</span>
+ <span style="color: #f38ba8;">LINE</span> (0, 0)-(woodX, woodY), 0, BF <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Black background</span>
+ <span style="color: #f38ba8;">LINE</span> (5, 5)-(woodX - 5, lowerY - 5), 8, BF <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Gray wood outline</span>
+ <span style="color: #f38ba8;">LINE</span> (10, 10)-(woodX - 10, lowerY - 10), 15, BF <span style="color: #6c7086;">' </span><span style="color: #6c7086;">White inner highlight</span>
- <span style="color: #666677;">' </span><span style="color: #666677;">Initialize random phase offset for color variation</span>
- phaseOffset = <span style="color: #88aaee;">RND</span> * 300
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Initialize random phase offset for color variation</span>
+ phaseOffset = <span style="color: #89b4fa;">RND</span> * 300
- <span style="color: #666677;">' </span><span style="color: #666677;">Draw the wood texture</span>
- <span style="color: #bb99ee;">FOR</span> y = woodY - 1 <span style="color: #bb99ee;">TO</span> 0 <span style="color: #bb99ee;">STEP</span> -1
- <span style="color: #bb99ee;">FOR</span> x = woodX - 1 <span style="color: #bb99ee;">TO</span> 0 <span style="color: #bb99ee;">STEP</span> -1
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw the wood texture</span>
+ <span style="color: #cba6f7;">FOR</span> y = woodY - 1 <span style="color: #cba6f7;">TO</span> 0 <span style="color: #cba6f7;">STEP</span> -1
+ <span style="color: #cba6f7;">FOR</span> x = woodX - 1 <span style="color: #cba6f7;">TO</span> 0 <span style="color: #cba6f7;">STEP</span> -1
xStepCounter = xStepCounter + 1
- <span style="color: #bb99ee;">IF</span> xStepCounter > woodX <span style="color: #bb99ee;">THEN</span>
- randomOffset = <span style="color: #88aaee;">RND</span> * 13 <span style="color: #666677;">' </span><span style="color: #666677;">Small random noise for texture variation</span>
- xStepCounter = <span style="color: #88aaee;">SIN</span>((y + phaseOffset) / 100) * woodX <span style="color: #666677;">' </span><span style="color: #666677;">Sine wave to create wavy grain pattern</span>
- <span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">IF</span>
- upperColor = <span style="color: #88aaee;">POINT</span>(x, y + 1) <span style="color: #666677;">' </span><span style="color: #666677;">Get color from upper pixel</span>
- currentColor = <span style="color: #88aaee;">POINT</span>(x, y) <span style="color: #666677;">' </span><span style="color: #666677;">Get color from current pixel</span>
- newColor = (upperColor * 2 + currentColor + newColor * 3 + randomOffset) / 7 + <span style="color: #88aaee;">RND</span> * 1
-
- <span style="color: #666677;">' </span><span style="color: #666677;">Ensure color value is within the valid range (0-15)</span>
- <span style="color: #bb99ee;">IF</span> newColor < 0 <span style="color: #bb99ee;">THEN</span> newColor = 0
- <span style="color: #bb99ee;">IF</span> newColor > 15 <span style="color: #bb99ee;">THEN</span> newColor = 15
-
- <span style="color: #666677;">' </span><span style="color: #666677;">Set the pixel color for the wood texture</span>
- <span style="color: #ee8899;">PSET</span> (x + 1, y), newColor
- <span style="color: #bb99ee;">NEXT</span> x
- <span style="color: #bb99ee;">NEXT</span> y
-
-<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">SUB</span>
+ <span style="color: #cba6f7;">IF</span> xStepCounter > woodX <span style="color: #cba6f7;">THEN</span>
+ randomOffset = <span style="color: #89b4fa;">RND</span> * 13 <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Small random noise for texture variation</span>
+ xStepCounter = <span style="color: #89b4fa;">SIN</span>((y + phaseOffset) / 100) * woodX <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Sine wave to create wavy grain pattern</span>
+ <span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">IF</span>
+ upperColor = <span style="color: #89b4fa;">POINT</span>(x, y + 1) <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Get color from upper pixel</span>
+ currentColor = <span style="color: #89b4fa;">POINT</span>(x, y) <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Get color from current pixel</span>
+ newColor = (upperColor * 2 + currentColor + newColor * 3 + randomOffset) / 7 + <span style="color: #89b4fa;">RND</span> * 1
+
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Ensure color value is within the valid range (0-15)</span>
+ <span style="color: #cba6f7;">IF</span> newColor < 0 <span style="color: #cba6f7;">THEN</span> newColor = 0
+ <span style="color: #cba6f7;">IF</span> newColor > 15 <span style="color: #cba6f7;">THEN</span> newColor = 15
+
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set the pixel color for the wood texture</span>
+ <span style="color: #f38ba8;">PSET</span> (x + 1, y), newColor
+ <span style="color: #cba6f7;">NEXT</span> x
+ <span style="color: #cba6f7;">NEXT</span> y
+
+<span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">SUB</span>
</pre>
</div>
</div>
</div>
-<div id="outline-container-org90bc76d" class="outline-2">
-<h2 id="org90bc76d"><span class="section-number-2">5.</span> Yellow flame</h2>
+<div id="outline-container-org95d07e4" class="outline-2">
+<h2 id="org95d07e4"><span class="section-number-2">5.</span> Yellow flame</h2>
<div class="outline-text-2" id="text-5">
+<p>
+"Yellow Flame" is a visually captivating program written in QBasic
+that generates a dynamic flame-like pattern on the screen.
+</p>
+
+<p>
+Program initializes the color palette using sine waves to create a
+smooth gradient of colors. This gradient is essential for the flame
+effect.
+</p>
+
+<p>
+The core of the program involves generating a surface pattern that
+mimics a flame. It does this by iterating over each pixel on the
+screen and calculating the average color of the surrounding pixels. A
+small amount of randomness is added to this average to create a
+natural, flickering effect.
+</p>
+
<p class="responsive-img">
<img src="Yellow flame.png" alt="Yellow flame.png" class="responsive-img" />
<a href="Yellow flame.bas">Source code</a>
</p>
<div class="org-src-container">
-<pre class="src src-basic-qb45"><span style="color: #666677;">' </span><span style="color: #666677;">Yellow flame.</span>
-<span style="color: #666677;">'</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">This program is free software: released under Creative Commons Zero (CC0) license</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">by Svjatoslav Agejenko.</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Email: svjatoslav@svjatoslav.eu</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Homepage: http://www.svjatoslav.eu</span>
-<span style="color: #666677;">'</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">Changelog:</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">2003.12, Initial version</span>
-<span style="color: #666677;">' </span><span style="color: #666677;">2024.08, Improved program readability</span>
-
-
-<span style="color: #bb99ee;">DEFINT</span> A-Z <span style="color: #666677;">' </span><span style="color: #666677;">Define all variables as integers</span>
-<span style="color: #ee8899;">SCREEN</span> 13 <span style="color: #666677;">' </span><span style="color: #666677;">Set graphics mode to 320x200 with 256 colors</span>
-<span style="color: #ee8899;">RANDOMIZE</span> <span style="color: #ee8899;">TIMER</span> <span style="color: #666677;">' </span><span style="color: #666677;">Seed the random number generator</span>
-
-<span style="color: #666677;">' </span><span style="color: #666677;">Initialize palette registers with sine wave colors</span>
-<span style="color: #bb99ee;">FOR</span> paletteIndex = 0 <span style="color: #bb99ee;">TO</span> 255
- <span style="color: #ee8899;">OUT</span> &H3C8, paletteIndex
- <span style="color: #ee8899;">OUT</span> &H3C9, <span style="color: #88aaee;">INT</span>(<span style="color: #88aaee;">SIN</span>(paletteIndex / 21) * 30 + 30)
- <span style="color: #ee8899;">OUT</span> &H3C9, <span style="color: #88aaee;">INT</span>(<span style="color: #88aaee;">SIN</span>(paletteIndex / 34) * 30 + 30)
- <span style="color: #ee8899;">OUT</span> &H3C9, <span style="color: #88aaee;">INT</span>(<span style="color: #88aaee;">SIN</span>(paletteIndex / 10) * 30 + 30)
-<span style="color: #bb99ee;">NEXT</span> paletteIndex
-
-<span style="color: #666677;">' </span><span style="color: #666677;">Generate the surface pattern</span>
-<span style="color: #bb99ee;">FOR</span> y = 1 <span style="color: #bb99ee;">TO</span> 199
- <span style="color: #bb99ee;">FOR</span> x = 1 <span style="color: #bb99ee;">TO</span> 319
- prevPixel = <span style="color: #88aaee;">POINT</span>(x, y - 1)
- leftPixel = <span style="color: #88aaee;">POINT</span>(x - 1, y)
- diagPixel = <span style="color: #88aaee;">POINT</span>(x - 1, y - 1)
- left2Pixel = <span style="color: #88aaee;">POINT</span>(x - 2, y)
-
- <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the average of surrounding pixels and add some randomness</span>
- newColor = (prevPixel + leftPixel + diagPixel + left2Pixel) \ 4 + (<span style="color: #88aaee;">RND</span> * 5 - 2)
-
- <span style="color: #666677;">' </span><span style="color: #666677;">Clamp the color value within the valid range</span>
- <span style="color: #bb99ee;">IF</span> newColor < 0 <span style="color: #bb99ee;">THEN</span> newColor = 0
- <span style="color: #bb99ee;">IF</span> newColor > 63 <span style="color: #bb99ee;">THEN</span> newColor = 63
-
- <span style="color: #666677;">' </span><span style="color: #666677;">Set the pixel with the calculated color</span>
- <span style="color: #ee8899;">PSET</span> (x, y), newColor
- <span style="color: #bb99ee;">NEXT</span> x
-<span style="color: #bb99ee;">NEXT</span> y
-
-<span style="color: #666677;">' </span><span style="color: #666677;">Wait for user input to exit</span>
-userInput$ = <span style="color: #88aaee;">INPUT$</span>(1)
+<pre class="src src-basic-qb45"><span style="color: #6c7086;">' </span><span style="color: #6c7086;">Yellow flame.</span>
+<span style="color: #6c7086;">'</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">This program is free software: released under Creative Commons Zero (CC0) license</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">by Svjatoslav Agejenko.</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Email: svjatoslav@svjatoslav.eu</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Homepage: http://www.svjatoslav.eu</span>
+<span style="color: #6c7086;">'</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Changelog:</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">2003.12, Initial version</span>
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">2024.08, Improved program readability</span>
+
+
+<span style="color: #cba6f7;">DEFINT</span> A-Z <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Define all variables as integers</span>
+<span style="color: #f38ba8;">SCREEN</span> 13 <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set graphics mode to 320x200 with 256 colors</span>
+<span style="color: #f38ba8;">RANDOMIZE</span> <span style="color: #f38ba8;">TIMER</span> <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Seed the random number generator</span>
+
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Initialize palette registers with sine wave colors</span>
+<span style="color: #cba6f7;">FOR</span> paletteIndex = 0 <span style="color: #cba6f7;">TO</span> 255
+ <span style="color: #f38ba8;">OUT</span> &H3C8, paletteIndex
+ <span style="color: #f38ba8;">OUT</span> &H3C9, <span style="color: #89b4fa;">INT</span>(<span style="color: #89b4fa;">SIN</span>(paletteIndex / 21) * 30 + 30)
+ <span style="color: #f38ba8;">OUT</span> &H3C9, <span style="color: #89b4fa;">INT</span>(<span style="color: #89b4fa;">SIN</span>(paletteIndex / 34) * 30 + 30)
+ <span style="color: #f38ba8;">OUT</span> &H3C9, <span style="color: #89b4fa;">INT</span>(<span style="color: #89b4fa;">SIN</span>(paletteIndex / 10) * 30 + 30)
+<span style="color: #cba6f7;">NEXT</span> paletteIndex
+
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Generate the surface pattern</span>
+<span style="color: #cba6f7;">FOR</span> y = 1 <span style="color: #cba6f7;">TO</span> 199
+ <span style="color: #cba6f7;">FOR</span> x = 1 <span style="color: #cba6f7;">TO</span> 319
+ prevPixel = <span style="color: #89b4fa;">POINT</span>(x, y - 1)
+ leftPixel = <span style="color: #89b4fa;">POINT</span>(x - 1, y)
+ diagPixel = <span style="color: #89b4fa;">POINT</span>(x - 1, y - 1)
+ left2Pixel = <span style="color: #89b4fa;">POINT</span>(x - 2, y)
+
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the average of surrounding pixels and add some randomness</span>
+ newColor = (prevPixel + leftPixel + diagPixel + left2Pixel) \ 4 + (<span style="color: #89b4fa;">RND</span> * 5 - 2)
+
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Clamp the color value within the valid range</span>
+ <span style="color: #cba6f7;">IF</span> newColor < 0 <span style="color: #cba6f7;">THEN</span> newColor = 0
+ <span style="color: #cba6f7;">IF</span> newColor > 63 <span style="color: #cba6f7;">THEN</span> newColor = 63
+
+ <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set the pixel with the calculated color</span>
+ <span style="color: #f38ba8;">PSET</span> (x, y), newColor
+ <span style="color: #cba6f7;">NEXT</span> x
+<span style="color: #cba6f7;">NEXT</span> y
+
+<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Wait for user input to exit</span>
+userInput$ = <span style="color: #89b4fa;">INPUT$</span>(1)
</pre>
</div>
</div>
</div>
</div>
<div id="postamble" class="status">
-<p class="date">Created: 2025-07-28 ma 18:32</p>
+<p class="date">Created: 2025-07-29 ti 02:13</p>
<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
-#+TITLE: Fractals
+#+TITLE: Algorithmic textures
#+LANGUAGE: en
#+LATEX_HEADER: \usepackage[margin=1.0in]{geometry}
#+LATEX_HEADER: \usepackage{parskip}
#+end_export
* Circular waves
+
+This QBasic program creates visually captivating circular wave
+patterns by manipulating pixel colors based on sine function
+calculations. It's a simple yet effective demonstration of how
+mathematical functions can be used to generate complex visual
+patterns.
+
+The program uses two nested loops to iterate over each pixel on the
+screen. The outer loop handles the vertical axis (y-coordinate), and
+the inner loop handles the horizontal axis (x-coordinate).
+
+For each pixel, the program calculates a sine value based on the
+squared distance from the origin (0,0). This calculation involves the
+formula:
+
+: colorvalue = SIN((x^2 + y^2) / 10) * 10
+
+This program is a blend of mathematics and art, showcasing how simple
+algorithms can produce intricate and visually appealing results.
+
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Circular waves.png]]
#+INCLUDE: "Circular waves.bas" src basic-qb45
* Diamond square clouds
+
+This QBasic program demonstrates the Diamond-Square algorithm, a
+method used to generate fractal terrain or cloud surfaces. The
+algorithm is particularly useful for creating realistic landscapes or
+textures in computer graphics.
+
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Diamond square clouds.png]]
#+INCLUDE: "Diamond square clouds.bas" src basic-qb45
* Old paper
+
+This QBasic program generates a procedural texture that simulates the
+appearance of old paper.
+
+The program initializes the screen to a 320x200 resolution with 256
+colors (SCREEN 13 in QBasic) and sets up a grayscale color
+palette. Each color index from 0 to 63 is assigned a shade of gray,
+creating a smooth gradient.
+
+The program generates the texture by iterating over each pixel on the
+screen. For each pixel, it calculates a color value based on the color
+of the pixel directly above it, adding a small amount of random
+noise. This creates a smooth transition between pixels with controlled
+randomness, mimicking the fibrous texture of paper.
+
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Old paper.png]]
#+INCLUDE: "Old paper.bas" src basic-qb45
* Wood
+
+This QBasic program creates a visually appealing simulation of a wood
+surface. It is designed to generate a realistic wood grain texture
+using simple graphical techniques.
+
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Wood.png]]
#+INCLUDE: "Wood.bas" src basic-qb45
* Yellow flame
+
+"Yellow Flame" is a visually captivating program written in QBasic
+that generates a dynamic flame-like pattern on the screen.
+
+Program initializes the color palette using sine waves to create a
+smooth gradient of colors. This gradient is essential for the flame
+effect.
+
+The core of the program involves generating a surface pattern that
+mimics a flame. It does this by iterating over each pixel on the
+screen and calculating the average color of the surrounding pixels. A
+small amount of randomness is added to this average to create a
+natural, flickering effect.
+
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Yellow flame.png]]
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
-<!-- 2025-07-28 ma 18:33 -->
+<!-- 2025-07-29 ti 00:25 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>3D Synthezier</title>
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
-<li><a href="#orgb764358">1. Operating principle</a>
+<li><a href="#orgd62bb9f">1. Operating principle</a>
<ul>
-<li><a href="#org036baf2">1.1. Rectangular city</a></li>
-<li><a href="#org341b1c7">1.2. Hexagonal city</a></li>
+<li><a href="#org9578171">1.1. Rectangular city</a></li>
+<li><a href="#orgfd1e490">1.2. Hexagonal city</a></li>
</ul>
</li>
-<li><a href="#org9b1aae2">2. Scene description language</a>
+<li><a href="#org5e2e1e0">2. Scene description language</a>
<ul>
-<li><a href="#org316df2f">2.1. here</a></li>
-<li><a href="#org4bf4fc2">2.2. p</a></li>
-<li><a href="#org00e2046">2.3. f</a></li>
-<li><a href="#org0557bd0">2.4. warn</a></li>
-<li><a href="#org466d971">2.5. end</a></li>
-<li><a href="#org7919a34">2.6. mtl</a></li>
-<li><a href="#org0faf236">2.7. mtlrnd</a></li>
-<li><a href="#orgd82eebd">2.8. obj</a></li>
-<li><a href="#orgd7276b3">2.9. rnd</a></li>
-<li><a href="#orgdff1d90">2.10. #</a></li>
-<li><a href="#org01758ef">2.11. out</a></li>
-<li><a href="#org8b8db69">2.12. set</a></li>
-<li><a href="#org6fd0dfe">2.13. variables usage</a></li>
-<li><a href="#org8ec9431">2.14. cmp</a></li>
-<li><a href="#org4fee636">2.15. ?</a></li>
-<li><a href="#orgf2bfe2b">2.16. dum</a></li>
+<li><a href="#orge0b4b15">2.1. here</a></li>
+<li><a href="#org600b9d0">2.2. p</a></li>
+<li><a href="#org2db4d77">2.3. f</a></li>
+<li><a href="#org72c5573">2.4. warn</a></li>
+<li><a href="#org2396707">2.5. end</a></li>
+<li><a href="#orga14a0e7">2.6. mtl</a></li>
+<li><a href="#org255bfd9">2.7. mtlrnd</a></li>
+<li><a href="#org2cbc4f4">2.8. obj</a></li>
+<li><a href="#orga6c738d">2.9. rnd</a></li>
+<li><a href="#orgdc3ba6f">2.10. #</a></li>
+<li><a href="#orga2221a3">2.11. out</a></li>
+<li><a href="#org52c3a71">2.12. set</a></li>
+<li><a href="#org51240ca">2.13. variables usage</a></li>
+<li><a href="#orgd14d063">2.14. cmp</a></li>
+<li><a href="#orgb5a7638">2.15. ?</a></li>
+<li><a href="#orgbf3bead">2.16. dum</a></li>
</ul>
</li>
-<li><a href="#orgede2524">3. Installation</a>
+<li><a href="#org45936ae">3. Installation</a>
<ul>
-<li><a href="#org74398fb">3.1. System requirements</a></li>
-<li><a href="#org666d0f8">3.2. Directory layout</a></li>
+<li><a href="#org9091711">3.1. System requirements</a></li>
+<li><a href="#org747bfb4">3.2. Directory layout</a></li>
</ul>
</li>
-<li><a href="#org4832d2c">4. Usage</a></li>
+<li><a href="#org4b64769">4. Usage</a></li>
</ul>
</div>
</div>
</style>
-<div id="outline-container-orgb764358" class="outline-2">
-<h2 id="orgb764358"><span class="section-number-2">1.</span> Operating principle</h2>
+<div id="outline-container-orgd62bb9f" class="outline-2">
+<h2 id="orgd62bb9f"><span class="section-number-2">1.</span> Operating principle</h2>
<div class="outline-text-2" id="text-1">
<p>
Parses scene definition language and creates 3D world based on
</p>
</div>
-<div id="outline-container-org036baf2" class="outline-3">
-<h3 id="org036baf2"><span class="section-number-3">1.1.</span> Rectangular city</h3>
+<div id="outline-container-org9578171" class="outline-3">
+<h3 id="org9578171"><span class="section-number-3">1.1.</span> Rectangular city</h3>
<div class="outline-text-3" id="text-1-1">
-<div id="org9b68e77" class="figure">
+<div id="orgca7bec9" class="figure">
<p><img src="rectangular city, 1.jpeg" alt="rectangular city, 1.jpeg" class="responsive-img" />
</p>
</div>
-<div id="orgd559597" class="figure">
+<div id="orga8407e2" class="figure">
<p><img src="rectangular city, 2.jpeg" alt="rectangular city, 2.jpeg" class="responsive-img" />
</p>
</div>
-<div id="org7a8a12d" class="figure">
+<div id="org75af1d1" class="figure">
<p><img src="rectangular city, 3.jpeg" alt="rectangular city, 3.jpeg" class="responsive-img" />
</p>
</div>
</div>
</div>
-<div id="outline-container-org341b1c7" class="outline-3">
-<h3 id="org341b1c7"><span class="section-number-3">1.2.</span> Hexagonal city</h3>
+<div id="outline-container-orgfd1e490" class="outline-3">
+<h3 id="orgfd1e490"><span class="section-number-3">1.2.</span> Hexagonal city</h3>
<div class="outline-text-3" id="text-1-2">
-<div id="org578c9ea" class="figure">
+<div id="orga9cdd42" class="figure">
<p><img src="hexagonal city, 1.jpeg" alt="hexagonal city, 1.jpeg" class="responsive-img" />
</p>
</div>
-<div id="org49e589c" class="figure">
+<div id="org8a32cb5" class="figure">
<p><img src="hexagonal city, 2.jpeg" alt="hexagonal city, 2.jpeg" class="responsive-img" />
</p>
</div>
-<div id="orgd3dd815" class="figure">
+<div id="orgf7fce13" class="figure">
<p><img src="hexagonal city, 3.jpeg" alt="hexagonal city, 3.jpeg" class="responsive-img" />
</p>
</div>
</div>
</div>
</div>
-<div id="outline-container-org9b1aae2" class="outline-2">
-<h2 id="org9b1aae2"><span class="section-number-2">2.</span> Scene description language</h2>
+<div id="outline-container-org5e2e1e0" class="outline-2">
+<h2 id="org5e2e1e0"><span class="section-number-2">2.</span> Scene description language</h2>
<div class="outline-text-2" id="text-2">
<p>
See also examples.
</p>
</div>
-<div id="outline-container-org316df2f" class="outline-3">
-<h3 id="org316df2f"><span class="section-number-3">2.1.</span> here</h3>
+<div id="outline-container-orge0b4b15" class="outline-3">
+<h3 id="orge0b4b15"><span class="section-number-3">2.1.</span> here</h3>
<div class="outline-text-3" id="text-2-1">
<pre class="example">
here
</p>
</div>
</div>
-<div id="outline-container-org4bf4fc2" class="outline-3">
-<h3 id="org4bf4fc2"><span class="section-number-3">2.2.</span> p</h3>
+<div id="outline-container-org600b9d0" class="outline-3">
+<h3 id="org600b9d0"><span class="section-number-3">2.2.</span> p</h3>
<div class="outline-text-3" id="text-2-2">
<pre class="example">
p x y z
</p>
</div>
</div>
-<div id="outline-container-org00e2046" class="outline-3">
-<h3 id="org00e2046"><span class="section-number-3">2.3.</span> f</h3>
+<div id="outline-container-org2db4d77" class="outline-3">
+<h3 id="org2db4d77"><span class="section-number-3">2.3.</span> f</h3>
<div class="outline-text-3" id="text-2-3">
<pre class="example">
f p1 p2 p3 p4
</p>
</div>
</div>
-<div id="outline-container-org0557bd0" class="outline-3">
-<h3 id="org0557bd0"><span class="section-number-3">2.4.</span> warn</h3>
+<div id="outline-container-org72c5573" class="outline-3">
+<h3 id="org72c5573"><span class="section-number-3">2.4.</span> warn</h3>
<div class="outline-text-3" id="text-2-4">
<pre class="example">
warn <message>
</p>
</div>
</div>
-<div id="outline-container-org466d971" class="outline-3">
-<h3 id="org466d971"><span class="section-number-3">2.5.</span> end</h3>
+<div id="outline-container-org2396707" class="outline-3">
+<h3 id="org2396707"><span class="section-number-3">2.5.</span> end</h3>
<div class="outline-text-3" id="text-2-5">
<pre class="example">
end
</p>
</div>
</div>
-<div id="outline-container-org7919a34" class="outline-3">
-<h3 id="org7919a34"><span class="section-number-3">2.6.</span> mtl</h3>
+<div id="outline-container-orga14a0e7" class="outline-3">
+<h3 id="orga14a0e7"><span class="section-number-3">2.6.</span> mtl</h3>
<div class="outline-text-3" id="text-2-6">
<pre class="example">
mtl material
</p>
</div>
</div>
-<div id="outline-container-org0faf236" class="outline-3">
-<h3 id="org0faf236"><span class="section-number-3">2.7.</span> mtlrnd</h3>
+<div id="outline-container-org255bfd9" class="outline-3">
+<h3 id="org255bfd9"><span class="section-number-3">2.7.</span> mtlrnd</h3>
<div class="outline-text-3" id="text-2-7">
<pre class="example">
mtlrnd material ...
</p>
</div>
</div>
-<div id="outline-container-orgd82eebd" class="outline-3">
-<h3 id="orgd82eebd"><span class="section-number-3">2.8.</span> obj</h3>
+<div id="outline-container-org2cbc4f4" class="outline-3">
+<h3 id="org2cbc4f4"><span class="section-number-3">2.8.</span> obj</h3>
<div class="outline-text-3" id="text-2-8">
<pre class="example">
obj object xz45 xy20 x+3 y*2
</p>
-<div id="org6af6b77" class="figure">
+<div id="org1c3cdb9" class="figure">
<p><img src="rotation.png" alt="rotation.png" />
</p>
</div>
</div>
</div>
-<div id="outline-container-orgd7276b3" class="outline-3">
-<h3 id="orgd7276b3"><span class="section-number-3">2.9.</span> rnd</h3>
+<div id="outline-container-orga6c738d" class="outline-3">
+<h3 id="orga6c738d"><span class="section-number-3">2.9.</span> rnd</h3>
<div class="outline-text-3" id="text-2-9">
<pre class="example">
rnd p^1^2^3 p^7^2^1
</p>
</div>
</div>
-<div id="outline-container-orgdff1d90" class="outline-3">
-<h3 id="orgdff1d90"><span class="section-number-3">2.10.</span> #</h3>
+<div id="outline-container-orgdc3ba6f" class="outline-3">
+<h3 id="orgdc3ba6f"><span class="section-number-3">2.10.</span> #</h3>
<div class="outline-text-3" id="text-2-10">
<pre class="example">
# whatever text
</p>
</div>
</div>
-<div id="outline-container-org01758ef" class="outline-3">
-<h3 id="org01758ef"><span class="section-number-3">2.11.</span> out</h3>
+<div id="outline-container-orga2221a3" class="outline-3">
+<h3 id="orga2221a3"><span class="section-number-3">2.11.</span> out</h3>
<div class="outline-text-3" id="text-2-11">
<pre class="example">
out file
</p>
</div>
</div>
-<div id="outline-container-org8b8db69" class="outline-3">
-<h3 id="org8b8db69"><span class="section-number-3">2.12.</span> set</h3>
+<div id="outline-container-org52c3a71" class="outline-3">
+<h3 id="org52c3a71"><span class="section-number-3">2.12.</span> set</h3>
<div class="outline-text-3" id="text-2-12">
<pre class="example">
set variable contents
</p>
</div>
</div>
-<div id="outline-container-org6fd0dfe" class="outline-3">
-<h3 id="org6fd0dfe"><span class="section-number-3">2.13.</span> variables usage</h3>
+<div id="outline-container-org51240ca" class="outline-3">
+<h3 id="org51240ca"><span class="section-number-3">2.13.</span> variables usage</h3>
<div class="outline-text-3" id="text-2-13">
<pre class="example">
anycommand %1 anything
</p>
</div>
</div>
-<div id="outline-container-org8ec9431" class="outline-3">
-<h3 id="org8ec9431"><span class="section-number-3">2.14.</span> cmp</h3>
+<div id="outline-container-orgd14d063" class="outline-3">
+<h3 id="orgd14d063"><span class="section-number-3">2.14.</span> cmp</h3>
<div class="outline-text-3" id="text-2-14">
<pre class="example">
cmp flag string1 string2
</p>
</div>
</div>
-<div id="outline-container-org4fee636" class="outline-3">
-<h3 id="org4fee636"><span class="section-number-3">2.15.</span> ?</h3>
+<div id="outline-container-orgb5a7638" class="outline-3">
+<h3 id="orgb5a7638"><span class="section-number-3">2.15.</span> ?</h3>
<div class="outline-text-3" id="text-2-15">
<pre class="example">
?flag anycommand
</p>
</div>
</div>
-<div id="outline-container-orgf2bfe2b" class="outline-3">
-<h3 id="orgf2bfe2b"><span class="section-number-3">2.16.</span> dum</h3>
+<div id="outline-container-orgbf3bead" class="outline-3">
+<h3 id="orgbf3bead"><span class="section-number-3">2.16.</span> dum</h3>
<div class="outline-text-3" id="text-2-16">
<pre class="example">
dum
</div>
</div>
-<div id="outline-container-orgede2524" class="outline-2">
-<h2 id="orgede2524"><span class="section-number-2">3.</span> Installation</h2>
+<div id="outline-container-org45936ae" class="outline-2">
+<h2 id="org45936ae"><span class="section-number-2">3.</span> Installation</h2>
<div class="outline-text-2" id="text-3">
<p>
Edit <b>bin/3dparse.bas</b> file and update include path in there.
</p>
</div>
-<div id="outline-container-org74398fb" class="outline-3">
-<h3 id="org74398fb"><span class="section-number-3">3.1.</span> System requirements</h3>
+<div id="outline-container-org9091711" class="outline-3">
+<h3 id="org9091711"><span class="section-number-3">3.1.</span> System requirements</h3>
<div class="outline-text-3" id="text-3-1">
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
</div>
</div>
-<div id="outline-container-org666d0f8" class="outline-3">
-<h3 id="org666d0f8"><span class="section-number-3">3.2.</span> Directory layout</h3>
+<div id="outline-container-org747bfb4" class="outline-3">
+<h3 id="org747bfb4"><span class="section-number-3">3.2.</span> Directory layout</h3>
<div class="outline-text-3" id="text-3-2">
<dl class="org-dl">
<dt>bin</dt><dd><dl class="org-dl">
</div>
</div>
-<div id="outline-container-org4832d2c" class="outline-2">
-<h2 id="org4832d2c"><span class="section-number-2">4.</span> Usage</h2>
+<div id="outline-container-org4b64769" class="outline-2">
+<h2 id="org4b64769"><span class="section-number-2">4.</span> Usage</h2>
<div class="outline-text-2" id="text-4">
<p>
Make sure you have QB binaries in your PATH. Execute
</div>
</div>
<div id="postamble" class="status">
-<p class="date">Created: 2025-07-28 ma 18:33</p>
+<p class="date">Created: 2025-07-29 ti 00:25</p>
<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
-<!-- 2025-07-28 ma 18:33 -->
+<!-- 2025-07-29 ti 00:25 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Miscellaneous 3D graphics demos</title>
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
-<li><a href="#orgc121154">1. Rotating exclamation mark</a></li>
-<li><a href="#orgaabd00a">2. 3D bouncing ball</a></li>
-<li><a href="#orgdfff0f8">3. 3D text in a room</a></li>
-<li><a href="#orgdc9fdc9">4. 3D bouncing cubes on grid floor</a></li>
-<li><a href="#org6cda93d">5. Matrix math for rotation in 3D space</a></li>
-<li><a href="#org544f5f6">6. Maze explorer</a></li>
-<li><a href="#orgb85d045">7. Tank animation</a></li>
-<li><a href="#orgb9c728a">8. Tiled room</a></li>
+<li><a href="#org99dc38f">1. Rotating exclamation mark</a></li>
+<li><a href="#org5031e81">2. 3D bouncing ball</a></li>
+<li><a href="#orgb787adc">3. 3D text in a room</a></li>
+<li><a href="#orge396a31">4. 3D bouncing cubes on grid floor</a></li>
+<li><a href="#org0dfb16f">5. Matrix math for rotation in 3D space</a></li>
+<li><a href="#org428e42e">6. Maze explorer</a></li>
+<li><a href="#org0f0266a">7. Tank animation</a></li>
+<li><a href="#orgdd0d5ff">8. Tiled room</a></li>
</ul>
</div>
</div>
}
</style>
-<div id="outline-container-orgc121154" class="outline-2">
-<h2 id="orgc121154"><span class="section-number-2">1.</span> Rotating exclamation mark</h2>
+<div id="outline-container-org99dc38f" class="outline-2">
+<h2 id="org99dc38f"><span class="section-number-2">1.</span> Rotating exclamation mark</h2>
<div class="outline-text-2" id="text-1">
<p>
Wireframe 3D model of a rotating exclamation mark.
</div>
-<div id="outline-container-orgaabd00a" class="outline-2">
-<h2 id="orgaabd00a"><span class="section-number-2">2.</span> 3D bouncing ball</h2>
+<div id="outline-container-org5031e81" class="outline-2">
+<h2 id="org5031e81"><span class="section-number-2">2.</span> 3D bouncing ball</h2>
<div class="outline-text-2" id="text-2">
<p>
3D ball made of point cloud.
</div>
-<div id="outline-container-orgdfff0f8" class="outline-2">
-<h2 id="orgdfff0f8"><span class="section-number-2">3.</span> 3D text in a room</h2>
+<div id="outline-container-orgb787adc" class="outline-2">
+<h2 id="orgb787adc"><span class="section-number-2">3.</span> 3D text in a room</h2>
<div class="outline-text-2" id="text-3">
<p>
Wireframe 3D text hanging in a wireframe 3D room. User can look and
</div>
-<div id="outline-container-orgdc9fdc9" class="outline-2">
-<h2 id="orgdc9fdc9"><span class="section-number-2">4.</span> 3D bouncing cubes on grid floor</h2>
+<div id="outline-container-orge396a31" class="outline-2">
+<h2 id="orge396a31"><span class="section-number-2">4.</span> 3D bouncing cubes on grid floor</h2>
<div class="outline-text-2" id="text-4">
<p>
3D wireframe cubes bouncing on a grid floor, creating an immersive and
</div>
-<div id="outline-container-org6cda93d" class="outline-2">
-<h2 id="org6cda93d"><span class="section-number-2">5.</span> Matrix math for rotation in 3D space</h2>
+<div id="outline-container-org0dfb16f" class="outline-2">
+<h2 id="org0dfb16f"><span class="section-number-2">5.</span> Matrix math for rotation in 3D space</h2>
<div class="outline-text-2" id="text-5">
<p>
Instead of combining simple 2D rotors, pixels in this 3D space are
</div>
-<div id="outline-container-org544f5f6" class="outline-2">
-<h2 id="org544f5f6"><span class="section-number-2">6.</span> Maze explorer</h2>
+<div id="outline-container-org428e42e" class="outline-2">
+<h2 id="org428e42e"><span class="section-number-2">6.</span> Maze explorer</h2>
<div class="outline-text-2" id="text-6">
<p>
TODO: add description
</p>
-<div id="orgf647c59" class="figure">
+<div id="orgb0cf3ab" class="figure">
<p><a href="Maze%20explorer.bas" class="responsive-img"><img src="Maze%20explorer.png" alt="Maze%20explorer.png" class="responsive-img" /></a>
</p>
</div>
</div>
</div>
-<div id="outline-container-orgb85d045" class="outline-2">
-<h2 id="orgb85d045"><span class="section-number-2">7.</span> Tank animation</h2>
+<div id="outline-container-org0f0266a" class="outline-2">
+<h2 id="org0f0266a"><span class="section-number-2">7.</span> Tank animation</h2>
<div class="outline-text-2" id="text-7">
<p>
Animated tank driving through the bridge back and forward. User can
</div>
-<div id="outline-container-orgb9c728a" class="outline-2">
-<h2 id="orgb9c728a"><span class="section-number-2">8.</span> Tiled room</h2>
+<div id="outline-container-orgdd0d5ff" class="outline-2">
+<h2 id="orgdd0d5ff"><span class="section-number-2">8.</span> Tiled room</h2>
<div class="outline-text-2" id="text-8">
<p>
Room with some tiles on the wall and on the floor. User can freely fly
</div>
</div>
<div id="postamble" class="status">
-<p class="date">Created: 2025-07-28 ma 18:33</p>
+<p class="date">Created: 2025-07-29 ti 00:25</p>
<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
[[file:!.bas][Source code]]
-
* 3D bouncing ball
-3D ball made of point cloud.
+This QBasic program creates a visually engaging 3D animation of a
+point-cloud ball bouncing around the screen. The program is an example
+of early computer graphics techniques.
#+begin_export html
<div class="flex-center">
[[file:3D%20ball.bas][Source code]]
-
* 3D text in a room
Wireframe 3D text hanging in a wireframe 3D room. User can look and
[[file:3D%20text.bas][Source code]]
-
* 3D bouncing cubes on grid floor
3D wireframe cubes bouncing on a grid floor, creating an immersive and
[[file:3D%20GFX/Bouncing%20cubes.bas][Source code]]
-
* Matrix math for rotation in 3D space
Instead of combining simple 2D rotors, pixels in this 3D space are
[[file:Matrix%20math.bas][Source code]]
-
* Maze explorer
-TODO: add description
+The Evolving 3D Maze Explorer is a QBasic program that generates and
+navigates through a dynamically evolving 3D maze. This program is an
+excellent example of early 3D graphics programming and provides an
+interactive experience where users can explore a maze that grows and
+changes as they navigate through it.
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Tank.bas][Source code]]
-
* Tiled room
Room with some tiles on the wall and on the floor. User can freely fly
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
-<!-- 2025-07-28 ma 18:33 -->
+<!-- 2025-07-29 ti 00:25 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Space themed 3D graphics</title>
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
-<li><a href="#org0c63944">1. Galaxy explorer</a></li>
-<li><a href="#orgde9c8ca">2. Rocket simulator</a></li>
-<li><a href="#org00ddd52">3. Stars</a></li>
-<li><a href="#orgb62b8b3">4. Universe explorer</a></li>
+<li><a href="#org62db6cb">1. Galaxy explorer</a></li>
+<li><a href="#org9ea0324">2. Rocket simulator</a></li>
+<li><a href="#org16bf836">3. Stars</a></li>
+<li><a href="#orga3aeb9c">4. Universe explorer</a></li>
</ul>
</div>
</div>
}
</style>
-<div id="outline-container-org0c63944" class="outline-2">
-<h2 id="org0c63944"><span class="section-number-2">1.</span> Galaxy explorer</h2>
+<div id="outline-container-org62db6cb" class="outline-2">
+<h2 id="org62db6cb"><span class="section-number-2">1.</span> Galaxy explorer</h2>
<div class="outline-text-2" id="text-1">
<p>
TODO: add description
</p>
-<div id="orgb4e6a2d" class="figure">
+<div id="org78f3755" class="figure">
<p><a href="Galaxy%20explorer.bas" class="responsive-img"><img src="Galaxy%20explorer.png" alt="Galaxy%20explorer.png" class="responsive-img" /></a>
</p>
</div>
</div>
-<div id="outline-container-orgde9c8ca" class="outline-2">
-<h2 id="orgde9c8ca"><span class="section-number-2">2.</span> Rocket simulator</h2>
+<div id="outline-container-org9ea0324" class="outline-2">
+<h2 id="org9ea0324"><span class="section-number-2">2.</span> Rocket simulator</h2>
<div class="outline-text-2" id="text-2">
<p>
TODO: add description
</div>
-<div id="outline-container-org00ddd52" class="outline-2">
-<h2 id="org00ddd52"><span class="section-number-2">3.</span> Stars</h2>
+<div id="outline-container-org16bf836" class="outline-2">
+<h2 id="org16bf836"><span class="section-number-2">3.</span> Stars</h2>
<div class="outline-text-2" id="text-3">
<p>
TODO: add description
</div>
</div>
-<div id="outline-container-orgb62b8b3" class="outline-2">
-<h2 id="orgb62b8b3"><span class="section-number-2">4.</span> Universe explorer</h2>
+<div id="outline-container-orga3aeb9c" class="outline-2">
+<h2 id="orga3aeb9c"><span class="section-number-2">4.</span> Universe explorer</h2>
<div class="outline-text-2" id="text-4">
<p>
TODO: add description
</p>
-<div id="orgc4aa7cd" class="figure">
+<div id="org29b02e4" class="figure">
<p><a href="Universe%20explorer/Universe%20explorer.bas" class="responsive-img"><img src="Universe%20explorer/1.png" alt="1.png" class="responsive-img" /></a>
</p>
</div>
-<div id="org91d3014" class="figure">
+<div id="org84b010b" class="figure">
<p><a href="Universe%20explorer/Universe%20explorer.bas" class="responsive-img"><img src="Universe%20explorer/2.png" alt="2.png" class="responsive-img" /></a>
</p>
</div>
-<div id="org015c7f5" class="figure">
+<div id="org04a7c40" class="figure">
<p><a href="Universe%20explorer/Universe%20explorer.bas" class="responsive-img"><img src="Universe%20explorer/3.png" alt="3.png" class="responsive-img" /></a>
</p>
</div>
</div>
</div>
<div id="postamble" class="status">
-<p class="date">Created: 2025-07-28 ma 18:33</p>
+<p class="date">Created: 2025-07-29 ti 00:25</p>
<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
</body>
* Galaxy explorer
-TODO: add description
+This QBasic program renders a navigable 3D point cloud galaxy,
+allowing users to explore a virtual galaxy using mouse or keyboard
+controls. The program creates a visually engaging simulation of a
+galaxy with stars distributed in a spiral pattern.
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:!.bas][Source code]]
-
* Rocket simulator
-TODO: add description
+QBasic program that simulates the takeoff and flight of a rocket from
+the surface of a planet. This program provides a simple yet engaging
+3D visualization of a rocket's journey, allowing users to navigate and
+observe the rocket's trajectory from various angles.
#+begin_export html
<div class="flex-center">
[[file:Rocket simulator.bas][Source code]]
-
* Stars
-TODO: add description
+The 3D Starfield Simulation is a QBasic program that creates a
+visually captivating simulation of a starfield in three
+dimensions. This program is designed to render stars moving in space,
+giving the illusion of flying through a galaxy.
+
+How the Program Works:
+
+- Camera Rotation :: The camera's rotation is calculated to give a
+ dynamic view of the starfield.
+- Star Movement :: Each star's position is updated to simulate
+ movement through space. Stars that get too close to the viewer are
+ repositioned to the far distance to create an infinite starfield
+ effect.
+- Projection :: The 3D coordinates of each star are projected onto a
+ 2D screen using perspective projection, which scales the stars based
+ on their distance from the viewer.
+- Brightness and Color :: The brightness of each star is adjusted
+ based on its distance, with closer stars appearing brighter.
#+begin_export html
<div class="flex-center">
* Universe explorer
-TODO: add description
+This QBasic program that simulates a navigable 3D universe. Users can
+freely fly through a dynamically generated universe composed of galaxy
+clusters, galaxies, and stars. The program employs a clever algorithm
+to manage the level of detail, dynamically increasing or decreasing
+the complexity of the universe regions based on the user's
+position. This ensures a reasonable quantity of stars is rendered at
+any given time, optimizing performance and visual experience.
+
+What's in it for the Reader?
+
+- Algorithm Insight :: The program provides a practical example of
+ dynamic level-of-detail algorithms, which can be useful for anyone
+ interested in computer graphics, game development, or simulation
+ programming.
+
+- 3D Navigation :: It demonstrates how to implement a 3D navigation
+ system using basic input devices like a mouse and keyboard, offering
+ insights into handling user inputs for movement and interaction in a
+ 3D space.
+
+- Procedural Generation :: The universe is procedurally generated,
+ showcasing how to create complex structures like galaxies and star
+ systems algorithmically.
+
+- Performance Optimization :: The program highlights techniques for
+ optimizing performance in resource-intensive applications, such as
+ limiting the number of rendered objects based on distance.
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
** Miscellaneous
*** Hello friend
-TODO: description goes here ...
+This QBasic program is a simple yet engaging demonstration of 2D
+graphics capabilities. It showcases various graphical techniques such
+as pixel manipulation, geometric shapes, and simple animations.
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
*** People
-TODO: description goes here ...
+This QBasic program is a slideshow presentation tool that includes
+animated transitions and effects.
#+begin_export html
<div class="flex-center">
*** Stroboscope
-TODO: description goes here ...
+This QBasic program is an educational presentation on how to build a
+stroboscope. It uses graphical animations and text to illustrate the
+schematics involved in constructing a stroboscope. The program is
+designed to be visually engaging, with animated transitions and
+diagrams.
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
*** Truncated cone
-TODO: description goes here ...
+This QBasic program is designed to draw a 3D representation of a
+truncated cone, which consists of three main parts: a top cylinder
+with diagonal hatching, a middle frustum (truncated cone), and a
+bottom smaller cylinder. The primary goal of this program is to test
+the viability of generating images of 3D shapes using code.
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
** Checkers
-TODO: add description
+This program is implementation of the game of Checkers, written in
+QBasic. It provides a mostly functional two-player experience on a
+10x10 grid, where players can move and capture pieces according to the
+traditional rules of Checkers. User is playing against AI. AI is quite
+primitive. It has many hard-coded patterns that it tries to detect and
+utilize when possible.
[[file:Games/checkers.bas][Source code]]
** Checkers 2
-Play checkers against the computer with any board size and any amount
-of caps. Does thinking by recursively testing many possible scenarios
-with any depth.
+This more advanced implementation of checkers. User can play checkers
+against the AI. AI does not have hard-coded patterns anymore. Instead
+it does recursive lookahead for possible own moves and following
+possible opponent moves up to determined cut-off depth. While
+crunching through all possible moves (up-to fixed depth), it chooses
+the best possible move for itself.
-Since it is slow QBasic implementation, it isn't practical to play
-with many caps or big thinking depth, for reasonable responce time.
-
-
-TODO: add description
+Board size is reduced to 6x6 grid to gain reasonable AI
+performance. Possible combinations count exponentially explodes with
+larder board size.
[[file:Games/checkers2.bas][Source code]]
:END:
** Game of life animation
+This QBasic program creates a visually engaging 3D animation that
+combines elements of cellular automata with dynamic graphics. The
+program simulates a rotating 3D scene composed of cubes that appear
+and disappear according to Conway's Game of Life rules. This classic
+algorithm models the life cycles of cells on a grid, where each cell
+can live, die, or reproduce based on its neighbors.
+
+The Game of Life is a zero-player game, meaning that its evolution is
+determined by its initial state, requiring no further input.
+
+The main loop of the program continuously updates the camera position
+and rotation angles, generating a dynamic view of the 3D scene. Cubes
+are drawn based on the current state of the Game of Life grid, and the
+scene is rendered frame by frame.
+
#+begin_export html
<div class="flex-center">
<video controls loop autoplay>
[[file:Math/Game%20of%20life%20in%203D.bas][Source code]]
-
** Game of life studio
-TODO: add description
+Game of life studio. One interacts with the Game of Life by creating
+an initial configuration and observing how it evolves. This program
+provides a platform to simulate, edit, and save different
+configurations of the Game of Life.
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[https://www2.svjatoslav.eu/gitweb/?p=qbasicapps.git;a=tree;f=Math/Game+of+life;hb=HEAD][Source code]]
-
** Math functions plot
+Collection of programs that produce 2D and 3D plots of mathematical
+functions.
+
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Math/Plotting/index.html][file:Math/Plotting/logo.png]]
** Simulations
+Collection of programs that implement simulations of various
+mathematical and physical effects.
+
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Math/Simulation/index.html][file:Math/Simulation/logo.png]]
[[file:Math/Simulation/index.html][See entire collection of simulations]]
-
** Truth table calculator
+Program allows user to input logical equation. Thereafter program
+computes and displays all possible states for equation (aka. truth
+table).
+
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Math/Truth%20table/index.html][file:Math/Truth%20table/img/screenshot,%202.png]]
[[file:Math/Truth%20table/index.html][Read more about truth table calculator]]
-
** Multiplication trainer
-TODO: add description
+This QBasic program is an educational tool designed to help users
+practice and test their multiplication skills. It is particularly
+useful for students learning basic arithmetic or anyone looking to
+brush up on their multiplication tables.
+
+The program generates random multiplication questions by selecting two
+numbers between 0 and 9.
+
+The user is prompted to enter the product of the two numbers. The
+program validates the input and provides immediate feedback.
+
+The program keeps track of correct and incorrect answers. After the
+specified number of questions, it calculates the user's score and
+assigns a grade based on the percentage of correct answers.
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Math/Multiplication%20trainer.bas][Source code]]
-
** Alternative sine calculator
Here simple and finite function was invented to compute sine
** Lottery analysis
-TODO: add description
+This QBasic program is designed to analyze historical lottery data,
+providing various graphical representations and statistical
+insights. It is a useful tool for anyone interested in exploring
+patterns and trends in lottery numbers over time. The program reads
+data from a text file and offers multiple visualization options to
+help users understand the data better.
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
-[[file:Math/Lottery/Lottery%20analysis.bas][file:Math/Lottery/screenshot,%201.png]]
+[[file:Math/Lottery/Lottery%20analysis.bas][file:Math/Lottery/screenshot,%203.png]]
+
+Graphical Representations:
+
+- Dot Graph :: Displays lottery numbers as dots on a graph, with
+ vertical lines representing each draw. This visualization helps in
+ identifying the frequency and distribution of numbers.
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Math/Lottery/Lottery%20analysis.bas][file:Math/Lottery/screenshot,%202.png]]
+- Line Graph :: Shows a dynamic line graph connecting consecutive
+ lottery numbers, providing a visual representation of number trends
+ over time. This can be useful for spotting trends or anomalies in
+ the data.
+
+- Combinatorics Graph :: This graph fits the data to every possible
+ resolution, making it easier to spot patterns that might not be
+ visible at a single resolution. This feature introduces the concept
+ of combinatorics and pattern recognition in data visualization.
+
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
-[[file:Math/Lottery/Lottery%20analysis.bas][file:Math/Lottery/screenshot,%203.png]]
+[[file:Math/Lottery/Lottery%20analysis.bas][file:Math/Lottery/screenshot,%201.png]]
[[file:Math/Lottery/Lottery%20analysis.bas][Source code]]
** Alien font
-TODO: add description
+This QBasic program is a creative attempt to generate and display an
+imaginary alien script. The program constructs characters by
+subdividing a square into four triangles, creating an abstract and
+visually intriguing text pattern. It is an artistic exploration that
+can inspire those interested in procedural generation, graphics, and
+abstract art.
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
** Custom palette
-TODO: add description
+This QBasic program generates a universally reusable color palette
+designed for a 256-color limit, which was a common constraint in older
+computer graphics. The program demonstrates how to create a diverse
+set of colors by varying the red, green, and blue components and then
+uses these colors to draw patterns on the screen.
+
+Each component is varied from 0 to 5, and the resulting RGB values are
+output to the palette registers, creating a total of 216 unique colors
+(6x6x6).
+
+After generating the color palette, the program draws a grid of
+colored squares. Each square is filled with a color from the generated
+palette, providing a visual representation of all available colors:
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
#+attr_latex: :width 1000px
[[file:Miscellaneous/Custom%20palette.bas][file:Miscellaneous/Custom%20palette,%202.png]]
+The dithering process helps to mitigate the limitations of the
+256-color palette, making the gradients appear smoother to the eye:
+
#+attr_html: :class responsive-img
#+attr_latex: :width 1000px
[[file:Miscellaneous/Custom%20palette.bas][file:Miscellaneous/Custom%20palette,%203.png]]
projects / qbasicapps.git / commitdiff