Better page homepage layout
authorSvjatoslav Agejenko <svjatoslav@svjatoslav.eu>
Wed, 23 Apr 2025 00:13:06 +0000 (03:13 +0300)
committerSvjatoslav Agejenko <svjatoslav@svjatoslav.eu>
Wed, 23 Apr 2025 00:13:06 +0000 (03:13 +0300)
Graphics/Spirals/index.html [deleted file]
Graphics/Spirals/index.org
index.org
tools/update web site

diff --git a/Graphics/Spirals/index.html b/Graphics/Spirals/index.html
deleted file mode 100644 (file)
index 36a3931..0000000
+++ /dev/null
@@ -1,897 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-<head>
-<!-- 2024-11-16 la 20:26 -->
-<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>
-<meta name="generator" content="Org Mode" />
-<style>
-  #content { max-width: 60em; margin: auto; }
-  .title  { text-align: center;
-             margin-bottom: .2em; }
-  .subtitle { text-align: center;
-              font-size: medium;
-              font-weight: bold;
-              margin-top:0; }
-  .todo   { font-family: monospace; color: red; }
-  .done   { font-family: monospace; color: green; }
-  .priority { font-family: monospace; color: orange; }
-  .tag    { background-color: #eee; font-family: monospace;
-            padding: 2px; font-size: 80%; font-weight: normal; }
-  .timestamp { color: #bebebe; }
-  .timestamp-kwd { color: #5f9ea0; }
-  .org-right  { margin-left: auto; margin-right: 0px;  text-align: right; }
-  .org-left   { margin-left: 0px;  margin-right: auto; text-align: left; }
-  .org-center { margin-left: auto; margin-right: auto; text-align: center; }
-  .underline { text-decoration: underline; }
-  #postamble p, #preamble p { font-size: 90%; margin: .2em; }
-  p.verse { margin-left: 3%; }
-  pre {
-    border: 1px solid #e6e6e6;
-    border-radius: 3px;
-    background-color: #f2f2f2;
-    padding: 8pt;
-    font-family: monospace;
-    overflow: auto;
-    margin: 1.2em;
-  }
-  pre.src {
-    position: relative;
-    overflow: auto;
-  }
-  pre.src:before {
-    display: none;
-    position: absolute;
-    top: -8px;
-    right: 12px;
-    padding: 3px;
-    color: #555;
-    background-color: #f2f2f299;
-  }
-  pre.src:hover:before { display: inline; margin-top: 14px;}
-  /* Languages per Org manual */
-  pre.src-asymptote:before { content: 'Asymptote'; }
-  pre.src-awk:before { content: 'Awk'; }
-  pre.src-authinfo::before { content: 'Authinfo'; }
-  pre.src-C:before { content: 'C'; }
-  /* pre.src-C++ doesn't work in CSS */
-  pre.src-clojure:before { content: 'Clojure'; }
-  pre.src-css:before { content: 'CSS'; }
-  pre.src-D:before { content: 'D'; }
-  pre.src-ditaa:before { content: 'ditaa'; }
-  pre.src-dot:before { content: 'Graphviz'; }
-  pre.src-calc:before { content: 'Emacs Calc'; }
-  pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
-  pre.src-fortran:before { content: 'Fortran'; }
-  pre.src-gnuplot:before { content: 'gnuplot'; }
-  pre.src-haskell:before { content: 'Haskell'; }
-  pre.src-hledger:before { content: 'hledger'; }
-  pre.src-java:before { content: 'Java'; }
-  pre.src-js:before { content: 'Javascript'; }
-  pre.src-latex:before { content: 'LaTeX'; }
-  pre.src-ledger:before { content: 'Ledger'; }
-  pre.src-lisp:before { content: 'Lisp'; }
-  pre.src-lilypond:before { content: 'Lilypond'; }
-  pre.src-lua:before { content: 'Lua'; }
-  pre.src-matlab:before { content: 'MATLAB'; }
-  pre.src-mscgen:before { content: 'Mscgen'; }
-  pre.src-ocaml:before { content: 'Objective Caml'; }
-  pre.src-octave:before { content: 'Octave'; }
-  pre.src-org:before { content: 'Org mode'; }
-  pre.src-oz:before { content: 'OZ'; }
-  pre.src-plantuml:before { content: 'Plantuml'; }
-  pre.src-processing:before { content: 'Processing.js'; }
-  pre.src-python:before { content: 'Python'; }
-  pre.src-R:before { content: 'R'; }
-  pre.src-ruby:before { content: 'Ruby'; }
-  pre.src-sass:before { content: 'Sass'; }
-  pre.src-scheme:before { content: 'Scheme'; }
-  pre.src-screen:before { content: 'Gnu Screen'; }
-  pre.src-sed:before { content: 'Sed'; }
-  pre.src-sh:before { content: 'shell'; }
-  pre.src-sql:before { content: 'SQL'; }
-  pre.src-sqlite:before { content: 'SQLite'; }
-  /* additional languages in org.el's org-babel-load-languages alist */
-  pre.src-forth:before { content: 'Forth'; }
-  pre.src-io:before { content: 'IO'; }
-  pre.src-J:before { content: 'J'; }
-  pre.src-makefile:before { content: 'Makefile'; }
-  pre.src-maxima:before { content: 'Maxima'; }
-  pre.src-perl:before { content: 'Perl'; }
-  pre.src-picolisp:before { content: 'Pico Lisp'; }
-  pre.src-scala:before { content: 'Scala'; }
-  pre.src-shell:before { content: 'Shell Script'; }
-  pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
-  /* additional language identifiers per "defun org-babel-execute"
-       in ob-*.el */
-  pre.src-cpp:before  { content: 'C++'; }
-  pre.src-abc:before  { content: 'ABC'; }
-  pre.src-coq:before  { content: 'Coq'; }
-  pre.src-groovy:before  { content: 'Groovy'; }
-  /* additional language identifiers from org-babel-shell-names in
-     ob-shell.el: ob-shell is the only babel language using a lambda to put
-     the execution function name together. */
-  pre.src-bash:before  { content: 'bash'; }
-  pre.src-csh:before  { content: 'csh'; }
-  pre.src-ash:before  { content: 'ash'; }
-  pre.src-dash:before  { content: 'dash'; }
-  pre.src-ksh:before  { content: 'ksh'; }
-  pre.src-mksh:before  { content: 'mksh'; }
-  pre.src-posh:before  { content: 'posh'; }
-  /* Additional Emacs modes also supported by the LaTeX listings package */
-  pre.src-ada:before { content: 'Ada'; }
-  pre.src-asm:before { content: 'Assembler'; }
-  pre.src-caml:before { content: 'Caml'; }
-  pre.src-delphi:before { content: 'Delphi'; }
-  pre.src-html:before { content: 'HTML'; }
-  pre.src-idl:before { content: 'IDL'; }
-  pre.src-mercury:before { content: 'Mercury'; }
-  pre.src-metapost:before { content: 'MetaPost'; }
-  pre.src-modula-2:before { content: 'Modula-2'; }
-  pre.src-pascal:before { content: 'Pascal'; }
-  pre.src-ps:before { content: 'PostScript'; }
-  pre.src-prolog:before { content: 'Prolog'; }
-  pre.src-simula:before { content: 'Simula'; }
-  pre.src-tcl:before { content: 'tcl'; }
-  pre.src-tex:before { content: 'TeX'; }
-  pre.src-plain-tex:before { content: 'Plain TeX'; }
-  pre.src-verilog:before { content: 'Verilog'; }
-  pre.src-vhdl:before { content: 'VHDL'; }
-  pre.src-xml:before { content: 'XML'; }
-  pre.src-nxml:before { content: 'XML'; }
-  /* add a generic configuration mode; LaTeX export needs an additional
-     (add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
-  pre.src-conf:before { content: 'Configuration File'; }
-
-  table { border-collapse:collapse; }
-  caption.t-above { caption-side: top; }
-  caption.t-bottom { caption-side: bottom; }
-  td, th { vertical-align:top;  }
-  th.org-right  { text-align: center;  }
-  th.org-left   { text-align: center;   }
-  th.org-center { text-align: center; }
-  td.org-right  { text-align: right;  }
-  td.org-left   { text-align: left;   }
-  td.org-center { text-align: center; }
-  dt { font-weight: bold; }
-  .footpara { display: inline; }
-  .footdef  { margin-bottom: 1em; }
-  .figure { padding: 1em; }
-  .figure p { text-align: center; }
-  .equation-container {
-    display: table;
-    text-align: center;
-    width: 100%;
-  }
-  .equation {
-    vertical-align: middle;
-  }
-  .equation-label {
-    display: table-cell;
-    text-align: right;
-    vertical-align: middle;
-  }
-  .inlinetask {
-    padding: 10px;
-    border: 2px solid gray;
-    margin: 10px;
-    background: #ffffcc;
-  }
-  #org-div-home-and-up
-   { text-align: right; font-size: 70%; white-space: nowrap; }
-  textarea { overflow-x: auto; }
-  .linenr { font-size: smaller }
-  .code-highlighted { background-color: #ffff00; }
-  .org-info-js_info-navigation { border-style: none; }
-  #org-info-js_console-label
-    { font-size: 10px; font-weight: bold; white-space: nowrap; }
-  .org-info-js_search-highlight
-    { background-color: #ffff00; color: #000000; font-weight: bold; }
-  .org-svg { }
-</style>
-<link rel="stylesheet" type="text/css" href="https://thomasf.github.io/solarized-css/solarized-dark.min.css" />
-</head>
-<body>
-<div id="content" class="content">
-<h1 class="title">Spiral series</h1>
-<div id="table-of-contents" role="doc-toc">
-<h2>Table of Contents</h2>
-<div id="text-table-of-contents" role="doc-toc">
-<ul>
-<li><a href="#org61c0a65">1. Spiral with increasing density</a></li>
-<li><a href="#orgb5e02b7">2. Spiral with varying height</a></li>
-<li><a href="#org990f44e">3. Shaded spiral</a></li>
-<li><a href="#org11b9eb4">4. Sphere forming spiral</a></li>
-<li><a href="#org2cd8822">5. Textured spherical spiral</a></li>
-<li><a href="#org7ab0050">6. Textured and shaded spherical spiral</a></li>
-</ul>
-</div>
-</div>
-
-<div id="outline-container-org61c0a65" class="outline-2">
-<h2 id="org61c0a65"><span class="section-number-2">1.</span> Spiral with increasing density</h2>
-<div class="outline-text-2" id="text-1">
-
-<div id="org757fcc9" class="figure">
-<p><img src="spiral.png" alt="spiral.png" width="800px" />
-</p>
-</div>
-
-<p>
-From every point in the spiral, subdivided line is traced. Line
-segments are connected between the neighbors. Line segment count
-progressively increases towards the center.
-</p>
-
-<p>
-<a href="spiral.bas">spiral.bas</a>
-</p>
-
-<div class="org-src-container">
-<pre class="src src-basic-qb45"><span style="color: #cba6f7;">DECLARE</span> <span style="color: #cba6f7;">SUB</span> DrawLine (startX <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>, startY <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>, endX <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>, endY <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>, col <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>)
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Program to render fancy looking spiral.</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 using AI</span>
-
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> lineVertexX(1 <span style="color: #cba6f7;">TO</span> 100) <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> lineVertexY(1 <span style="color: #cba6f7;">TO</span> 100) <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> depth <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> tempDepth <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
-<span style="color: #f38ba8;">SCREEN</span> 12
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Initialize the scale factor for the spiral</span>
-spiralScaleFactor = 200
-depth = 0
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Generate the spiral by iterating through angles and scaling appropriately</span>
-<span style="color: #cba6f7;">FOR</span> angle = 1 <span style="color: #cba6f7;">TO</span> 30 <span style="color: #cba6f7;">STEP</span> .1
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the current scale based on the remaining distance to the center</span>
-    spiralScaleFactor = (30 - angle) * 7
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Convert polar coordinates to cartesian for the current point</span>
-    xPosition = <span style="color: #89b4fa;">SIN</span>(angle) * spiralScaleFactor + 200
-    yPosition = <span style="color: #89b4fa;">COS</span>(angle) * spiralScaleFactor + 200
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Store the current depth (z-axis value)</span>
-    tempDepth = angle
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw a line from the previous point to the current point with a color based on depth</span>
-    DrawLine xPosition + (xPosition / 2) + (angle * 3), (yPosition - (xPosition / 3)) + (angle * 3), xPosition + 25, yPosition + 25 - (angle * 3), depth
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set the color for the next segment</span>
-    depth = 15
-<span style="color: #cba6f7;">NEXT</span> angle
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Wait for user input to close the program</span>
-userInput$ = <span style="color: #89b4fa;">INPUT$</span>(1)
-
-<span style="color: #cba6f7;">SUB</span> DrawLine (startX <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>, startY <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>, endX <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>, endY <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>, col <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>)
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the step increments for x and y based on the depth</span>
-    deltaX = (endX - startX) / tempDepth
-    deltaY = (endY - startY) / tempDepth
-
-    <span style="color: #cba6f7;">FOR</span> segmentIndex = 1 <span style="color: #cba6f7;">TO</span> tempDepth
-        <span style="color: #6c7086;">' </span><span style="color: #6c7086;">If there is a previous vertex, draw a line to the new starting point</span>
-        <span style="color: #cba6f7;">IF</span> lineVertexX(segmentIndex) &gt; 0 <span style="color: #cba6f7;">THEN</span> <span style="color: #f38ba8;">LINE</span> (lineVertexX(segmentIndex), lineVertexY(segmentIndex))-(startX, startY), col
-        <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Store the current starting point as the next vertex</span>
-        lineVertexX(segmentIndex) = startX
-        lineVertexY(segmentIndex) = startY
-        <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Increment the starting point by the calculated deltas</span>
-        startX = startX + deltaX
-        startY = startY + deltaY
-        <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw a line from the stored vertex to the new starting point</span>
-        <span style="color: #f38ba8;">LINE</span> (lineVertexX(segmentIndex), lineVertexY(segmentIndex))-(startX, startY), col
-    <span style="color: #cba6f7;">NEXT</span> segmentIndex
-<span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">SUB</span>
-</pre>
-</div>
-</div>
-</div>
-
-<div id="outline-container-orgb5e02b7" class="outline-2">
-<h2 id="orgb5e02b7"><span class="section-number-2">2.</span> Spiral with varying height</h2>
-<div class="outline-text-2" id="text-2">
-
-<div id="org44a2fbe" class="figure">
-<p><img src="spiral, 2.png" alt="spiral, 2.png" width="800px" />
-</p>
-</div>
-
-<p>
-From every point in the spiral, subdivided line is traced. Line
-segments are connected between the neighbors. This creates effect
-where lines run from edges towards the center. Center is vertically
-displaced by sinus function where input is the distance to the center.
-</p>
-
-<p>
-<a href="spiral, 2.bas">spiral, 2.bas</a>
-</p>
-
-<div class="org-src-container">
-<pre class="src src-basic-qb45"><span style="color: #6c7086;">' </span><span style="color: #6c7086;">Program to render fancy looking spiral.</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 using AI</span>
-
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> spiralX(1 <span style="color: #cba6f7;">TO</span> 10000) <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">SINGLE</span> <span style="color: #6c7086;">' </span><span style="color: #6c7086;">X coordinates of the spiral points</span>
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> spiralY(1 <span style="color: #cba6f7;">TO</span> 10000) <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">SINGLE</span> <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Y coordinates of the spiral points</span>
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> pointCount <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span> <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Total number of points plotted</span>
-<span style="color: #f38ba8;">SCREEN</span> 12 <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set screen resolution to 640x480 with 16 colors</span>
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Initialize the scale factor for the spiral</span>
-scaleFactor = 200
-pointCount = 0
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate and plot each point on the spiral</span>
-<span style="color: #cba6f7;">FOR</span> angle = 1 <span style="color: #cba6f7;">TO</span> 100 <span style="color: #cba6f7;">STEP</span> .05
-    pointCount = pointCount + 1
-    scaleFactor = 100 - angle <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Update the scaling factor as the loop progresses</span>
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the X and Y coordinates based on the sine and cosine of the angle</span>
-    spiralX(pointCount) = <span style="color: #89b4fa;">SIN</span>(angle) * scaleFactor * 3 + 320
-    spiralY(pointCount) = <span style="color: #89b4fa;">COS</span>(angle) * scaleFactor + 300
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Apply a vertical displacement to create a more dynamic effect</span>
-    spiralY(pointCount) = spiralY(pointCount) + (<span style="color: #89b4fa;">SIN</span>((angle + 20) / 10) * angle)
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Plot the point on the screen</span>
-    <span style="color: #f38ba8;">PSET</span> (spiralX(pointCount), spiralY(pointCount)), 15
-<span style="color: #cba6f7;">NEXT</span> angle
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw lines between points to create the spiral effect</span>
-<span style="color: #cba6f7;">FOR</span> segmentStart = 1 <span style="color: #cba6f7;">TO</span> pointCount - 125
-    <span style="color: #f38ba8;">LINE</span> (spiralX(segmentStart), spiralY(segmentStart)) - _
-         (spiralX(segmentStart + 125), spiralY(segmentStart + 125)), 15
-<span style="color: #cba6f7;">NEXT</span> segmentStart
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Wait for user input before exiting</span>
-a$ = <span style="color: #89b4fa;">INPUT$</span>(1)
-<span style="color: #cba6f7;">END</span> <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Exit the program</span>
-</pre>
-</div>
-</div>
-</div>
-
-<div id="outline-container-org990f44e" class="outline-2">
-<h2 id="org990f44e"><span class="section-number-2">3.</span> Shaded spiral</h2>
-<div class="outline-text-2" id="text-3">
-
-<div id="org4ed6ff5" class="figure">
-<p><img src="spiral, 3.png" alt="spiral, 3.png" width="800px" />
-</p>
-</div>
-
-<p>
-Similar to previous spiral, Line segments are connected between the
-neighbors and sinus from the center decides vertical
-displacement. Attempt of shading is made where brighter areas have
-more detail.
-</p>
-
-<p>
-<a href="spiral, 3.bas">spiral, 3.bas</a>
-</p>
-
-<div class="org-src-container">
-<pre class="src src-basic-qb45"><span style="color: #6c7086;">' </span><span style="color: #6c7086;">Program to render fancy looking spiral with shaded surface.</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 using AI</span>
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Declare shared arrays for storing coordinates and sine values</span>
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> spiralX(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> spiralY(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> sineValue1(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> sineValue2(1 <span style="color: #cba6f7;">TO</span> 10000)
-
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set the screen mode to 640x480 with 16 colors</span>
-<span style="color: #f38ba8;">SCREEN</span> 12
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Initialize the spiral rotation parameter</span>
-<span style="color: #cba6f7;">DIM</span> spiralRotation <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">SINGLE</span>
-spiralRotation = 0
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Generate and draw the spiral points</span>
-<span style="color: #cba6f7;">FOR</span> angle = 0 <span style="color: #cba6f7;">TO</span> 150 <span style="color: #cba6f7;">STEP</span> .05
-    spiralRotation = spiralRotation + 1
-    scaleFactor = 150 - angle
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the X and Y coordinates for the current point</span>
-    spiralX(spiralRotation) = <span style="color: #89b4fa;">SIN</span>(angle) * scaleFactor * 3 + 320
-    spiralY(spiralRotation) = <span style="color: #89b4fa;">COS</span>(angle) * scaleFactor + 300
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Apply additional vertical displacement based on a secondary sine function</span>
-    spiralY(spiralRotation) = spiralY(spiralRotation) + (<span style="color: #89b4fa;">SIN</span>((angle + 20) / 10) * (angle / 5 + 1))
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Store the current sine values for later use</span>
-    sineValue1(spiralRotation) = <span style="color: #89b4fa;">SIN</span>(angle)
-    sineValue2(spiralRotation) = <span style="color: #89b4fa;">SIN</span>((angle + 20) / 10)
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw the current point on the screen</span>
-    <span style="color: #f38ba8;">PSET</span> (spiralX(spiralRotation), spiralY(spiralRotation)), 15
-<span style="color: #cba6f7;">NEXT</span> angle
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Connect the points to form a continuous line</span>
-<span style="color: #cba6f7;">FOR</span> index = 1 <span style="color: #cba6f7;">TO</span> spiralRotation - 127
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw a line segment between points 126 steps apart</span>
-    <span style="color: #f38ba8;">LINE</span> (spiralX(index), spiralY(index))-(spiralX(index + 126), spiralY(index + 126)), 15
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Initialize the line drawing flag</span>
-    <span style="color: #cba6f7;">DIM</span> drawLine <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">INTEGER</span>
-    drawLine = 1
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Check conditions to determine if a line segment should be drawn</span>
-    <span style="color: #cba6f7;">IF</span> sineValue1(index) &gt; .8 <span style="color: #89b4fa;">AND</span> sineValue2(index) &lt; sineValue2(index + 125) <span style="color: #cba6f7;">THEN</span> drawLine = 0
-    <span style="color: #cba6f7;">IF</span> sineValue1(index) &lt; -.2 <span style="color: #89b4fa;">AND</span> (sineValue2(index) - .4) &gt; sineValue2(index + 125) <span style="color: #cba6f7;">THEN</span> drawLine = 0
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw a line segment if the conditions are met</span>
-    <span style="color: #cba6f7;">IF</span> drawLine = 1 <span style="color: #cba6f7;">THEN</span> <span style="color: #f38ba8;">LINE</span> (spiralX(index), spiralY(index))-(spiralX(index + 1), spiralY(index + 1)), 15
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Reset the line drawing flag and check for different conditions</span>
-    drawLine = 0
-    <span style="color: #cba6f7;">IF</span> sineValue1(index) &gt; .8 <span style="color: #89b4fa;">AND</span> sineValue2(index) &gt; sineValue2(index + 125) <span style="color: #cba6f7;">THEN</span> drawLine = 1
-    <span style="color: #cba6f7;">IF</span> sineValue1(index) &lt; -.2 <span style="color: #89b4fa;">AND</span> sineValue2(index) &lt; sineValue2(index + 125) <span style="color: #cba6f7;">THEN</span> drawLine = 1
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw a line segment if the conditions are met</span>
-    <span style="color: #cba6f7;">IF</span> drawLine = 1 <span style="color: #cba6f7;">THEN</span> <span style="color: #f38ba8;">LINE</span> (spiralX(index), spiralY(index))-(spiralX(index + 127), spiralY(index + 127)), 15
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Reset the line drawing flag and check for another set of conditions</span>
-    drawLine = 0
-    <span style="color: #cba6f7;">IF</span> sineValue1(index) &gt; .9 <span style="color: #89b4fa;">AND</span> sineValue2(index) &gt; sineValue2(index + 125) <span style="color: #cba6f7;">THEN</span> drawLine = 1
-    <span style="color: #cba6f7;">IF</span> sineValue1(index) &lt; -.5 <span style="color: #89b4fa;">AND</span> sineValue2(index) &lt; sineValue2(index + 125) <span style="color: #cba6f7;">THEN</span> drawLine = 1
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw a line segment if the conditions are met</span>
-    <span style="color: #cba6f7;">IF</span> drawLine = 1 <span style="color: #cba6f7;">THEN</span> <span style="color: #f38ba8;">LINE</span> (spiralX(index), spiralY(index))-(spiralX(index + 125), spiralY(index + 125)), 15
-<span style="color: #cba6f7;">NEXT</span> index
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Wait for a key press before exiting</span>
-a$ = <span style="color: #89b4fa;">INPUT$</span>(1)
-</pre>
-</div>
-</div>
-</div>
-
-
-<div id="outline-container-org11b9eb4" class="outline-2">
-<h2 id="org11b9eb4"><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
-neighbors. Spiral height and width are calculated such that they form
-multiple linked spherical shapes. Initially point cloud in shown:
-</p>
-
-
-<div id="org20cd869" class="figure">
-<p><img src="spiral, 4, 1.png" alt="spiral, 4, 1.png" width="800px" />
-</p>
-</div>
-
-<p>
-In the next step, points are connected using lines:
-</p>
-
-
-<div id="org7653aa0" class="figure">
-<p><img src="spiral, 4, 2.png" alt="spiral, 4, 2.png" width="800px" />
-</p>
-</div>
-
-
-<p>
-<a href="spiral, 4.bas">spiral, 4.bas</a>
-</p>
-
-<div class="org-src-container">
-<pre class="src src-basic-qb45"><span style="color: #6c7086;">' </span><span style="color: #6c7086;">Program to render fancy looking spiral.</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 using AI</span>
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Declare shared arrays to hold the x and y coordinates of the spiral</span>
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> spiralX(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> spiralY(1 <span style="color: #cba6f7;">TO</span> 10000)
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Initialize the screen to a graphics mode with 640x480 resolution and 16 colors</span>
-<span style="color: #f38ba8;">SCREEN</span> 12
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Constants for the initial size and the starting value of the index</span>
-<span style="color: #f38ba8;">CONST</span> InitialSize = 100
-<span style="color: #f38ba8;">CONST</span> StartIndex = 0
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Variable to keep track of the current position in the spiral arrays</span>
-<span style="color: #cba6f7;">DIM</span> torusIndex <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>
-torusIndex = StartIndex
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Loop parameters</span>
-<span style="color: #cba6f7;">DIM</span> angle <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>
-<span style="color: #cba6f7;">DIM</span> scaleFactor <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Generate the first arm of the spiral</span>
-<span style="color: #cba6f7;">FOR</span> angle = 0 <span style="color: #cba6f7;">TO</span> 97.35 <span style="color: #cba6f7;">STEP</span> .15
-    torusIndex = torusIndex + 1
-    scaleFactor = <span style="color: #89b4fa;">SIN</span>(angle / 31) * InitialSize
-    spiralX(torusIndex) = <span style="color: #89b4fa;">SIN</span>(angle) * scaleFactor * 3 + 320
-    spiralY(torusIndex) = <span style="color: #89b4fa;">COS</span>(angle) * scaleFactor + 250
-    spiralY(torusIndex) = spiralY(torusIndex) - (<span style="color: #89b4fa;">COS</span>(angle / 31) * 200)
-    <span style="color: #f38ba8;">PSET</span> (spiralX(torusIndex), spiralY(torusIndex)), 15
-<span style="color: #cba6f7;">NEXT</span> angle
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Generate the second arm of the spiral</span>
-<span style="color: #cba6f7;">FOR</span> angle = 97.35 <span style="color: #cba6f7;">TO</span> 0 <span style="color: #cba6f7;">STEP</span> -.15
-    torusIndex = torusIndex + 1
-    scaleFactor = <span style="color: #89b4fa;">SIN</span>(angle / 31) * (InitialSize / 2)
-    spiralX(torusIndex) = <span style="color: #89b4fa;">SIN</span>(angle) * scaleFactor * 3 + 320
-    spiralY(torusIndex) = <span style="color: #89b4fa;">COS</span>(angle) * scaleFactor + 350
-    spiralY(torusIndex) = spiralY(torusIndex) - (<span style="color: #89b4fa;">COS</span>(angle / 31) * 100)
-    <span style="color: #f38ba8;">PSET</span> (spiralX(torusIndex), spiralY(torusIndex)), 15
-<span style="color: #cba6f7;">NEXT</span> angle
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Generate the third arm of the spiral</span>
-<span style="color: #cba6f7;">FOR</span> angle = 0 <span style="color: #cba6f7;">TO</span> 97.35 <span style="color: #cba6f7;">STEP</span> .15
-    torusIndex = torusIndex + 1
-    scaleFactor = <span style="color: #89b4fa;">SIN</span>(angle / 31) * (InitialSize / 4)
-    spiralX(torusIndex) = <span style="color: #89b4fa;">SIN</span>(angle) * scaleFactor * 3 + 320
-    spiralY(torusIndex) = <span style="color: #89b4fa;">COS</span>(angle) * scaleFactor + 300
-    spiralY(torusIndex) = spiralY(torusIndex) - (<span style="color: #89b4fa;">COS</span>(angle / 31) * 50)
-    <span style="color: #f38ba8;">PSET</span> (spiralX(torusIndex), spiralY(torusIndex)), 15
-<span style="color: #cba6f7;">NEXT</span> angle
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Generate the fourth arm of the spiral</span>
-<span style="color: #cba6f7;">FOR</span> angle = 97.35 <span style="color: #cba6f7;">TO</span> 0 <span style="color: #cba6f7;">STEP</span> -.15
-    torusIndex = torusIndex + 1
-    scaleFactor = <span style="color: #89b4fa;">SIN</span>(angle / 31) * (InitialSize / 8)
-    spiralX(torusIndex) = <span style="color: #89b4fa;">SIN</span>(angle) * scaleFactor * 3 + 320
-    spiralY(torusIndex) = <span style="color: #89b4fa;">COS</span>(angle) * scaleFactor + 325
-    spiralY(torusIndex) = spiralY(torusIndex) - (<span style="color: #89b4fa;">COS</span>(angle / 31) * 25)
-    <span style="color: #f38ba8;">PSET</span> (spiralX(torusIndex), spiralY(torusIndex)), 15
-<span style="color: #cba6f7;">NEXT</span> angle
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the number of lines to draw based on the current index</span>
-<span style="color: #cba6f7;">DIM</span> totalSegments <span style="color: #cba6f7;">AS</span> <span style="color: #f9e2af;">DOUBLE</span>
-totalSegments = (torusIndex - 42) / 4
-
-a$ = <span style="color: #89b4fa;">INPUT$</span>(1)
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Clear the screen before drawing the lines</span>
-<span style="color: #f38ba8;">CLS</span>
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw the lines between points in the spiral</span>
-<span style="color: #cba6f7;">FOR</span> angle = 1 <span style="color: #cba6f7;">TO</span> totalSegments * 4
-    <span style="color: #f38ba8;">LINE</span> (spiralX(angle), spiralY(angle))-(spiralX(angle + 42), spiralY(angle + 42)), 15
-    <span style="color: #f38ba8;">LINE</span> (spiralX(angle), spiralY(angle))-(spiralX(angle + 1), spiralY(angle + 1)), 15
-<span style="color: #cba6f7;">NEXT</span> angle
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Wait for the user to press a key before exiting</span>
-a$ = <span style="color: #89b4fa;">INPUT$</span>(1)
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">End of program</span>
-<span style="color: #cba6f7;">SYSTEM</span>
-</pre>
-</div>
-</div>
-</div>
-
-
-<div id="outline-container-org2cd8822" class="outline-2">
-<h2 id="org2cd8822"><span class="section-number-2">5.</span> Textured spherical spiral</h2>
-<div class="outline-text-2" id="text-5">
-
-<div id="org1d51488" class="figure">
-<p><img src="spiral, 5.png" alt="spiral, 5.png" width="800px" />
-</p>
-</div>
-
-<p>
-Similar to previous spiral, Line segments are connected between the
-neighbors. Spiral height and width are calculated such that sphere is
-formed. Sphere is textured. Texture is loaded from file:
-<a href="texture.dat">texture.dat</a> .Invisible surface detection and removal is
-attempted.
-</p>
-
-<p>
-<a href="spiral, 5.bas">spiral, 5.bas</a>
-</p>
-
-<div class="org-src-container">
-<pre class="src src-basic-qb45"><span style="color: #6c7086;">' </span><span style="color: #6c7086;">Program to render fancy looking spiral.</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 using AI</span>
-
-<span style="color: #cba6f7;">DECLARE</span> <span style="color: #cba6f7;">SUB</span> FillSegment (x1, y1, x2, y2, xx1, yy1, xx2, yy2)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> spiralX(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> spiralY(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> angles(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> phaseAngles(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> spiralLength
-<span style="color: #f38ba8;">SCREEN</span> 12
-stepUnit = 200
-spiralLength = 0
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Generate the spiral points</span>
-<span style="color: #cba6f7;">FOR</span> angleIndex = 1 <span style="color: #cba6f7;">TO</span> 97 <span style="color: #cba6f7;">STEP</span> .15
-    spiralLength = spiralLength + 1
-    stepUnit = <span style="color: #89b4fa;">SIN</span>(angleIndex / 31) * 100
-    xPos = <span style="color: #89b4fa;">SIN</span>(angleIndex) * stepUnit * 3 + 320
-    yPos = <span style="color: #89b4fa;">COS</span>(angleIndex) * stepUnit + 250
-    yPos = yPos - (<span style="color: #89b4fa;">COS</span>(angleIndex / 31) * 200)
-    angles(spiralLength) = angleIndex
-    phaseAngles(spiralLength) = angleIndex / 31
-    spiralX(spiralLength) = xPos
-    spiralY(spiralLength) = yPos
-    <span style="color: #f38ba8;">PSET</span> (xPos, yPos), 15
-<span style="color: #cba6f7;">NEXT</span> angleIndex
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Load texture data from file</span>
-<span style="color: #f38ba8;">OPEN</span> <span style="color: #a6e3a1;">"texture.dat"</span> <span style="color: #cba6f7;">FOR</span> <span style="color: #f38ba8;">INPUT</span> <span style="color: #cba6f7;">AS</span> #1
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> textureData$(1 <span style="color: #cba6f7;">TO</span> 1000)
-textureIndex = 0
-<span style="color: #fab387;">1</span>
-    <span style="color: #f38ba8;">LINE</span> <span style="color: #f38ba8;">INPUT</span> #1, textureLine$
-    <span style="color: #cba6f7;">IF</span> <span style="color: #89b4fa;">LEFT$</span>(textureLine$, 3) = <span style="color: #a6e3a1;">"END"</span> <span style="color: #cba6f7;">THEN</span> <span style="color: #cba6f7;">GOTO</span> <span style="color: #fab387;">2</span>
-    textureIndex = textureIndex + 1
-    textureData$(textureIndex) = textureLine$
-<span style="color: #cba6f7;">GOTO</span> <span style="color: #fab387;">1</span>
-<span style="color: #fab387;">2</span>
-<span style="color: #f38ba8;">CLS</span>
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Apply texture to the spiral</span>
-textureIndex = 1
-<span style="color: #cba6f7;">FOR</span> charIndex = 1 <span style="color: #cba6f7;">TO</span> 20
-    <span style="color: #cba6f7;">FOR</span> textCharIndex = 1 <span style="color: #cba6f7;">TO</span> <span style="color: #89b4fa;">LEN</span>(textureData$(charIndex))
-        textureChar$ = <span style="color: #89b4fa;">RIGHT$</span>(<span style="color: #89b4fa;">LEFT$</span>(textureData$(charIndex), textCharIndex), 1)
-        textureIndex = textureIndex + 1
-        <span style="color: #cba6f7;">IF</span> textureIndex &gt; spiralLength - 43 <span style="color: #cba6f7;">THEN</span> <span style="color: #cba6f7;">GOTO</span> DONE
-        teeVal = <span style="color: #89b4fa;">SIN</span>(angles(textureIndex + 32)) - <span style="color: #89b4fa;">COS</span>(phaseAngles(textureIndex))
-
-        <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw lines if the condition is met</span>
-        <span style="color: #cba6f7;">IF</span> teeVal &lt;= 0 <span style="color: #cba6f7;">THEN</span>
-            <span style="color: #f38ba8;">LINE</span> (spiralX(textureIndex), spiralY(textureIndex))-(spiralX(textureIndex + 1), spiralY(textureIndex + 1)), 15
-            <span style="color: #f38ba8;">LINE</span> (spiralX(textureIndex), spiralY(textureIndex))-(spiralX(textureIndex + 42), spiralY(textureIndex + 42)), 15
-            <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Fill the segment if the character matches</span>
-            <span style="color: #cba6f7;">IF</span> textureChar$ = <span style="color: #a6e3a1;">"M"</span> <span style="color: #cba6f7;">THEN</span>
-                <span style="color: #cba6f7;">CALL</span> FillSegment(spiralX(textureIndex), spiralY(textureIndex), spiralX(textureIndex + 1), spiralY(textureIndex + 1), spiralX(textureIndex + 42), spiralY(textureIndex + 42), spiralX(textureIndex + 43), spiralY(textureIndex + 43))
-            <span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">IF</span>
-        <span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">IF</span>
-    <span style="color: #cba6f7;">NEXT</span> textCharIndex
-<span style="color: #cba6f7;">NEXT</span> charIndex
-<span style="color: #fab387;">DONE:</span>
-a$ = <span style="color: #89b4fa;">INPUT$</span>(1)
-<span style="color: #cba6f7;">SYSTEM</span>
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Subroutine to fill a segment with lines</span>
-<span style="color: #cba6f7;">SUB</span> FillSegment (x1, y1, x2, y2, xx1, yy1, xx2, yy2)
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Assign input parameters to local variables</span>
-    xStart = x1
-    yStart = y1
-    xEnd = x2
-    yEnd = y2
-    xxStart = xx1
-    yyStart = yy1
-    xxEnd = xx2
-    yyEnd = yy2
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate step increments</span>
-    j = 10
-    xStep = (xEnd - xStart) / j
-    yStep = (yEnd - yStart) / j
-    xxStep = (xxEnd - xxStart) / j
-    yyStep = (yyEnd - yyStart) / j
-
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw lines between the points</span>
-    <span style="color: #cba6f7;">FOR</span> a = 1 <span style="color: #cba6f7;">TO</span> j
-        xStart = xStart + xStep
-        yStart = yStart + yStep
-        xxStart = xxStart + xxStep
-        yyStart = yyStart + yyStep
-        <span style="color: #f38ba8;">LINE</span> (xStart, yStart)-(xxStart, yyStart), 15
-    <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-org7ab0050" class="outline-2">
-<h2 id="org7ab0050"><span class="section-number-2">6.</span> Textured and shaded spherical spiral</h2>
-<div class="outline-text-2" id="text-6">
-
-<div id="orgc0552e4" class="figure">
-<p><img src="spiral, 6.png" alt="spiral, 6.png" width="800px" />
-</p>
-</div>
-
-<p>
-Similar to previous spiral, Line segments are connected between the
-neighbors. Spiral height and width are calculated such that sphere is
-formed. Sphere is textured. Texture is loaded from file:
-<a href="texture1.dat">texture1.dat</a> . Invisible surface detection and removal is
-attempted. Sphere is shaded.
-</p>
-
-<p>
-<a href="spiral, 6.bas">spiral, 6.bas</a>
-</p>
-
-<div class="org-src-container">
-<pre class="src src-basic-qb45"><span style="color: #6c7086;">' </span><span style="color: #6c7086;">Program to render fancy looking textured and shaded spiral. Texture is loaded from file.</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.10, Improved program readability using AI</span>
-
-<span style="color: #cba6f7;">DECLARE</span> <span style="color: #cba6f7;">SUB</span> fill(x1, y1, x2, y2, xx1, yy1, xx2, yy2, hel)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> torux(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> toruy(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> sin1(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> cos1(1 <span style="color: #cba6f7;">TO</span> 10000)
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> tor
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set the screen mode to 12</span>
-<span style="color: #f38ba8;">SCREEN</span> 12
-su = 200
-tor = 0
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate points for the spiral</span>
-<span style="color: #cba6f7;">FOR</span> a = 1 <span style="color: #cba6f7;">TO</span> 97 <span style="color: #cba6f7;">STEP</span> .15
-    tor = tor + 1
-    su = <span style="color: #89b4fa;">SIN</span>(a / 31) * 100
-    x = <span style="color: #89b4fa;">SIN</span>(a) * su * 3 + 320
-    y = <span style="color: #89b4fa;">COS</span>(a) * su + 250
-    y = y - (<span style="color: #89b4fa;">COS</span>(a / 31) * 200)
-    sin1(tor) = a
-    cos1(tor) = a / 31
-    torux(tor) = x
-    toruy(tor) = y
-    <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Set the pixel at (x, y) to color 15</span>
-    <span style="color: #f38ba8;">PSET</span> (x, y), 15
-<span style="color: #cba6f7;">NEXT</span> a
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Open the text file for input</span>
-<span style="color: #f38ba8;">OPEN</span> <span style="color: #a6e3a1;">"texture1.dat"</span> <span style="color: #cba6f7;">FOR</span> <span style="color: #f38ba8;">INPUT</span> <span style="color: #cba6f7;">AS</span> #1
-<span style="color: #cba6f7;">DIM</span> <span style="color: #f38ba8;">SHARED</span> text$(1 <span style="color: #cba6f7;">TO</span> 1000)
-
-a = 0
-<span style="color: #fab387;">1</span>
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Read a line from the file</span>
-<span style="color: #f38ba8;">LINE</span> <span style="color: #f38ba8;">INPUT</span> #1, a$
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Check if the line is the end marker</span>
-<span style="color: #cba6f7;">IF</span> <span style="color: #89b4fa;">LEFT$</span>(a$, 3) = <span style="color: #a6e3a1;">"END"</span> <span style="color: #cba6f7;">THEN</span> <span style="color: #cba6f7;">GOTO</span> <span style="color: #fab387;">2</span>
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Increment the counter and store the line in the text array</span>
-a = a + 1
-text$(a) = a$
-<span style="color: #cba6f7;">GOTO</span> <span style="color: #fab387;">1</span>
-<span style="color: #fab387;">2</span>
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Close the file</span>
-<span style="color: #f38ba8;">CLOSE</span> #1
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Clear the screen</span>
-<span style="color: #f38ba8;">CLS</span>
-a = 1
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Loop through each character in the text</span>
-<span style="color: #cba6f7;">FOR</span> c = 1 <span style="color: #cba6f7;">TO</span> 20
-    <span style="color: #cba6f7;">FOR</span> b = 1 <span style="color: #cba6f7;">TO</span> <span style="color: #89b4fa;">LEN</span>(text$(c))
-        <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Get the current character</span>
-        a$ = <span style="color: #89b4fa;">RIGHT$</span>(<span style="color: #89b4fa;">LEFT$</span>(text$(c), b), 1)
-
-        <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Increment the counter</span>
-        a = a + 1
-        <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Check if we have reached the end of the points array</span>
-        <span style="color: #cba6f7;">IF</span> a &gt; tor - 43 <span style="color: #cba6f7;">THEN</span> <span style="color: #cba6f7;">GOTO</span> <span style="color: #fab387;">3</span>
-
-        <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the angle for the current point</span>
-        tee = <span style="color: #89b4fa;">SIN</span>(sin1(a + 32))
-        tee = tee - <span style="color: #89b4fa;">COS</span>(cos1(a))
-
-        <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw lines based on the calculated angle</span>
-        <span style="color: #cba6f7;">IF</span> tee &lt;= 0 <span style="color: #cba6f7;">THEN</span>
-            <span style="color: #f38ba8;">LINE</span> (torux(a), toruy(a))-(torux(a + 1), toruy(a + 1)), 15
-            <span style="color: #f38ba8;">LINE</span> (torux(a), toruy(a))-(torux(a + 42), toruy(a + 42)), 15
-            hel = 10
-            hel1 = <span style="color: #89b4fa;">COS</span>(cos1(a) - 1) + .5
-            hel2 = <span style="color: #89b4fa;">SIN</span>(sin1(a) + 1) + 1
-            <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Adjust brightness based on the angles</span>
-            <span style="color: #cba6f7;">IF</span> hel2 &gt; 1 <span style="color: #89b4fa;">AND</span> hel1 &gt; 1 <span style="color: #cba6f7;">THEN</span>
-                hel3 = (hel2 - 1) * (hel1 - 1) * 8
-                hel = hel / (hel3 + 1)
-            <span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">IF</span>
-
-            <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Adjust brightness if the character is "M"</span>
-            <span style="color: #cba6f7;">IF</span> a$ = <span style="color: #a6e3a1;">"M"</span> <span style="color: #cba6f7;">THEN</span> hel = hel / 3
-
-            <span style="color: #6c7086;">' </span><span style="color: #6c7086;">Fill the shape with the calculated brightness</span>
-            fill torux(a), toruy(a), torux(a + 1), toruy(a + 1), torux(a + 42), toruy(a + 42), torux(a + 43), toruy(a + 43), hel
-        <span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">IF</span>
-    <span style="color: #cba6f7;">NEXT</span> b
-<span style="color: #cba6f7;">NEXT</span> c
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Wait for user input</span>
-<span style="color: #fab387;">3</span>
-a$ = <span style="color: #89b4fa;">INPUT$</span>(1)
-<span style="color: #cba6f7;">SYSTEM</span>
-
-<span style="color: #cba6f7;">SUB</span> fill(zx1, zy1, zx2, zy2, zxx1, zyy1, zxx2, zyy2, hel)
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">This subroutine fills a shape defined by four points with a specified brightness</span>
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">x1,y1  ----------------   xx1,yy1         hel - brightness</span>
-<span style="color: #6c7086;">'        </span><span style="color: #6c7086;">|              |</span>
-<span style="color: #6c7086;">'        </span><span style="color: #6c7086;">|              |</span>
-<span style="color: #6c7086;">'        </span><span style="color: #6c7086;">|              |</span>
-<span style="color: #6c7086;">'  </span><span style="color: #6c7086;">x2,y2 ----------------   xx2,yy2</span>
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Assign local variables for clarity</span>
-x1 = zx1
-y1 = zy1
-x2 = zx2
-y2 = zy2
-xx1 = zxx1
-yy1 = zyy1
-xx2 = zxx2
-yy2 = zyy2
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the differences and distances between points</span>
-j1 = x1 - x2
-j2 = y1 - y2
-j3 = <span style="color: #89b4fa;">SQR</span>((j1 * j1) + (j2 * j2))
-
-j4 = xx1 - xx2
-j5 = yy1 - yy2
-j6 = <span style="color: #89b4fa;">SQR</span>((j4 * j4) + (j5 * j5))
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the average distance and adjust for brightness</span>
-j7 = (j3 + j6) / 2
-j = j7 / hel
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Calculate the step sizes for each axis</span>
-x3 = (x2 - x1) / j
-y3 = (y2 - y1) / j
-xx3 = (xx2 - xx1) / j
-yy3 = (yy2 - yy1) / j
-
-<span style="color: #6c7086;">' </span><span style="color: #6c7086;">Draw lines between the points with the specified brightness</span>
-<span style="color: #cba6f7;">FOR</span> a = 1 <span style="color: #cba6f7;">TO</span> j
-    x1 = x1 + x3
-    y1 = y1 + y3
-    xx1 = xx1 + xx3
-    yy1 = yy1 + yy3
-    <span style="color: #f38ba8;">LINE</span> (x1, y1)-(xx1, yy1), 15
-<span style="color: #cba6f7;">NEXT</span> a
-<span style="color: #cba6f7;">END</span> <span style="color: #cba6f7;">SUB</span>
-</pre>
-</div>
-</div>
-</div>
-</div>
-<div id="postamble" class="status">
-<p class="date">Created: 2024-11-16 la 20:26</p>
-<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
-</div>
-</body>
-</html>
index 53e660f..21cd241 100644 (file)
@@ -8,8 +8,8 @@
 #+OPTIONS: author:nil
 
 * Spiral with increasing density
-#+attr_html: :width 800px
-#+attr_latex: :width 800px
+#+attr_html: :width 1000px
+#+attr_latex: :width 1000px
 [[file:spiral.png]]
 
 From every point in the spiral, subdivided line is traced. Line
@@ -21,8 +21,8 @@ progressively increases towards the center.
 #+INCLUDE: "spiral.bas" src basic-qb45
 
 * Spiral with varying height
-#+attr_html: :width 800px
-#+attr_latex: :width 800px
+#+attr_html: :width 1000px
+#+attr_latex: :width 1000px
 [[file:spiral, 2.png]]
 
 From every point in the spiral, subdivided line is traced. Line
@@ -55,14 +55,14 @@ Similar to previous spiral, Line segments are connected between the
 neighbors. Spiral height and width are calculated such that they form
 multiple linked spherical shapes. Initially point cloud in shown:
 
-#+attr_html: :width 800px
-#+attr_latex: :width 800px
+#+attr_html: :width 1000px
+#+attr_latex: :width 1000px
 [[file:spiral, 4, 1.png]]
 
 In the next step, points are connected using lines:
 
-#+attr_html: :width 800px
-#+attr_latex: :width 800px
+#+attr_html: :width 1000px
+#+attr_latex: :width 1000px
 [[file:spiral, 4, 2.png]]
 
 
@@ -72,8 +72,8 @@ In the next step, points are connected using lines:
 
 * Textured spherical spiral
 
-#+attr_html: :width 800px
-#+attr_latex: :width 800px
+#+attr_html: :width 1000px
+#+attr_latex: :width 1000px
 [[file:spiral, 5.png]]
 
 Similar to previous spiral, Line segments are connected between the
@@ -88,8 +88,8 @@ attempted.
 
 * Textured and shaded spherical spiral
 
-#+attr_html: :width 800px
-#+attr_latex: :width 800px
+#+attr_html: :width 1000px
+#+attr_latex: :width 1000px
 [[file:spiral, 6.png]]
 
 Similar to previous spiral, Line segments are connected between the
index 2902d06..1d652c9 100644 (file)
--- a/index.org
+++ b/index.org
@@ -8,6 +8,16 @@
 #+OPTIONS: H:20 num:20
 #+OPTIONS: author:nil
 
+#+begin_export html
+<style>
+  .flex-center {
+    display: flex;            /* activate flexbox */
+    justify-content: center;  /* horizontally center anything inside   */
+  }
+</style>
+#+end_export
+
+
 * Applications
 This collection contains lots of toy applications:
 
@@ -34,8 +44,8 @@ with many caps or big thinking depth, for reasonable responce time.
 
 [[file:Games/Checkers 2/checkers2.bas][Source code]]
 
-#+attr_html: :width 600px
-#+attr_latex: :width 600px
+#+attr_html: :width 1000px
+#+attr_latex: :width 1000px
 [[file:Games/Checkers 2/checkers2.bas][file:Games/Checkers%202/screenshot.png]]
 
 ** 2D graphics demos and animations
@@ -44,8 +54,8 @@ Collection of various 2D animations. Good for demonstrating various
 algorithms and getting fun looking results quite easily.
 
 #+begin_export html
-<a href="Graphics/">
-  <video width="600" controls loop autoplay>
+<a href="Graphics/" class="flex-center">
+  <video width="1000" controls loop autoplay>
     <source src="Graphics/text mode animation.webm" type="video/webm">
     Your browser does not support the video tag.
   </video>
@@ -63,10 +73,12 @@ limited amount of lives. When worm runs into the wall or another worm,
 it loses one life.
 
 #+begin_export html
-<video width="600" controls loop autoplay>
-  <source src="Games/Worm/screencast.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="Games/Worm/screencast.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Games/Worm/worm.bas][Source code]]
@@ -78,8 +90,8 @@ editor.
 
 *Fractal of circles*
 
-#+attr_html: :width 600px
-#+attr_latex: :width 600px
+#+attr_html: :width 1000px
+#+attr_latex: :width 1000px
 [[file:Fractals/fractal circles.bas][file:Fractals/fractal%20circles.png]]
 
 [[file:Fractals/fractal circles.bas][Source code]]
@@ -87,10 +99,12 @@ editor.
 *Fractal of squares*
 
 #+begin_export html
-<video width="600" controls loop autoplay>
-  <source src="Fractals/fractal squares.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay>
+    <source src="Fractals/fractal squares.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Fractals/fractal squares.bas][Source code]]
@@ -98,10 +112,12 @@ editor.
 *Fractal of trees*
 
 #+begin_export html
-<video width="600" controls loop autoplay>
-  <source src="Fractals/fractal trees.webm" type="video/webm">
-  Your browser does not support the video tag.
-</video>
+<div class="flex-center">
+  <video width="1000" controls loop autoplay class="flex-center">
+    <source src="Fractals/fractal trees.webm" type="video/webm">
+    Your browser does not support the video tag.
+  </video>
+</div>
 #+end_export
 
 [[file:Fractals/fractal trees.bas][Source code]]
@@ -115,12 +131,12 @@ visualized using external renderer.
 See directory:
 : graphics/3D/3D Synthezier
 
-#+attr_html: :width 600px
-#+attr_latex: :width 600px
+#+attr_html: :width 1000px
+#+attr_latex: :width 1000px
 [[file:Graphics/3D/3D Synthezier/doc/index.html][file:Graphics/3D/3D%20Synthezier/doc/hexagonal%20city,%202.jpeg]]
 
-#+attr_html: :width 600px
-#+attr_latex: :width 600px
+#+attr_html: :width 1000px
+#+attr_latex: :width 1000px
 [[file:Graphics/3D/3D Synthezier/doc/index.html][file:Graphics/3D/3D%20Synthezier/doc/rectangular%20city,%203.jpeg]]
 
 [[file:Graphics/3D/3D Synthezier/doc/index.html][Read more]]
@@ -131,8 +147,8 @@ Small collection of programs that are result of exploratory
 programming, for fun. It started out from drawing spiral on the
 screen. Every iteration built upon previous result.
 
-#+attr_html: :width 600px
-#+attr_latex: :width 600px
+#+attr_html: :width 1000px
+#+attr_latex: :width 1000px
 [[file:Graphics/Spirals/index.html][file:Graphics/Spirals/logo.png]]
 
 [[file:Graphics/Spirals/index.html][Read more]]
@@ -156,16 +172,16 @@ Zero (CC0) license.*
 There are various ways to run legacy QBasic applications under Debian
 GNU/Linux:
 
-- Full system virtualization :: One way would be to use full system
-  virtualization with [[https://www.qemu.org/][QEMU]], [[https://www.virtualbox.org/][VirtualBox]] or [[https://www.vmware.com/products/desktop-hypervisor.html][VMware Workstation or
-  Player]]. After creating virtual machine, you need to obtain and
-  install some distribution of DOS like [[https://en.wikipedia.org/wiki/MS-DOS][MS-DOS]] or [[https://www.freedos.org/][FreeDOS]]. Within DOS
-  you can then use either Microsoft *QBasic* or Microsoft
-  *QuickBasic*. QBasic is already included in Microsoft DOS by
-  default. QuickBasic is more capable but must be obtained separately.
++ Full system virtualization :: One way would be to use full system
+virtualization with [[https://www.qemu.org/][QEMU]], [[https://www.virtualbox.org/][VirtualBox]] or [[https://www.vmware.com/products/desktop-hypervisor.html][VMware Workstation or
+Player]]. After creating virtual machine, you need to obtain and
+install some distribution of DOS like [[https://en.wikipedia.org/wiki/MS-DOS][MS-DOS]] or [[https://www.freedos.org/][FreeDOS]]. Within DOS
+you can then use either Microsoft *QBasic* or Microsoft
+*QuickBasic*. QBasic is already included in Microsoft DOS by
+default. QuickBasic is more capable but must be obtained separately.
 
 - QB64 :: [[https://qb64.com][QB64]] is mostly compatible with Microsoft BASIC variants and
 can be used too.
+ can be used too.
 
 - [[id:97ea6094-ade6-4c7d-aea9-9874acf9dc86][DOSBox + MS BASIC]] :: Easy to install and good compatibility.
 
@@ -287,3 +303,12 @@ This is how I accomplished it in DOSBox:
 
 3. Save the changes and restart DOSBox for the configuration to take
    effect.
+* See also
+
+- Programs found in the March 1975 3rd printing of David Ahl's 101
+  BASIC Computer Games, published by Digital Equipment Corp:
+  https://github.com/maurymarkowitz/101-BASIC-Computer-Games
+
+- QB64 is a modern extended BASIC programming language that retains
+  QBasic/QuickBASIC 4.5 compatibility and compiles native binaries for
+  Windows, Linux, and macOS: https://qb64.com/
index 214164e..cfbb583 100755 (executable)
@@ -14,6 +14,12 @@ cd "${0%/*}"; if [ "$1" != "T" ]; then gnome-terminal -e "'$0' T"; exit; fi;
         emacs --batch -l ~/.emacs --visit=index.org --funcall=org-html-export-to-html --kill
     )
 
+    (
+        cd "cd Graphics/Spirals"
+        rm -f index.html
+        emacs --batch -l ~/.emacs --visit=index.org --funcall=org-html-export-to-html --kill
+    )
+
     # Upload project homepage to the server.
     rsync -avz --delete  -e 'ssh -p 10006' ./ \
           --include="*/" \