--- /dev/null
+<?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>
+<!-- 2025-04-23 ke 23:27 -->
+<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Graphics demos</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>
+<style type="text/css">
+ body {
+ max-width: 35cm !important;
+ }
+ #content {
+ max-width: 80em !important;
+ width: 90%;
+ }
+ </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">Graphics demos</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="#orge24ed2d">1. Bump mapping</a></li>
+<li><a href="#org1519f0a">2. Tree</a></li>
+<li><a href="#orgea69339">3. Rotation in 2D space using trigonometry functions</a></li>
+<li><a href="#orga7b79a7">4. Various text mode animation effects</a></li>
+<li><a href="#orge1518a0">5. Snowfall</a></li>
+<li><a href="#org97574dd">6. Screensaver</a></li>
+<li><a href="#org55ef0d7">7. Screensaver - flying hand fans</a></li>
+<li><a href="#orgd0d1a37">8. Polygon rendering</a></li>
+<li><a href="#orgf3b0873">9. Textured polygon rendering</a></li>
+<li><a href="#org702bd23">10. Yin and yang animation</a></li>
+<li><a href="#org9515bd5">11. Orbiting particles</a></li>
+<li><a href="#org9116890">12. DNA animation</a></li>
+<li><a href="#org1b880ca">13. Matrix</a></li>
+<li><a href="#orgd17436f">14. Hacker</a></li>
+</ul>
+</div>
+</div>
+<style>
+ .flex-center {
+ display: flex; /* activate flexbox */
+ justify-content: center; /* horizontally center anything inside */
+ }
+
+ .flex-center video {
+ width: min(90%, 1000px); /* whichever is smaller wins */
+ height: auto; /* preserve aspect ratio */
+ }
+
+ .responsive-img {
+ width: min(100%, 1000px);
+ height: auto;
+ }
+</style>
+
+
+<div id="outline-container-orge24ed2d" class="outline-2">
+<h2 id="orge24ed2d"><span class="section-number-2">1.</span> Bump mapping</h2>
+<div class="outline-text-2" id="text-1">
+<p>
+Light source moves around. Based on light source location, different
+parts of the surface become illuminated.
+</p>
+
+<div class="flex-center">
+ <video width="300" controls loop autoplay>
+ <source src="Bump mapping.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="Bump mapping.bas">Source code</a>
+</p>
+</div>
+</div>
+
+<div id="outline-container-org1519f0a" class="outline-2">
+<h2 id="org1519f0a"><span class="section-number-2">2.</span> Tree</h2>
+<div class="outline-text-2" id="text-2">
+<p>
+Tree grows and branches out.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="Tree.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="Tree.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> setPalette ()
+<span style="color: #666677;">' </span><span style="color: #666677;">Render tree that starts with single root and then branches out.</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;">2001, Initial version</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">2024.08, Improved program readability using AI</span>
+
+
+<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> start ()
+<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> show (d%)
+<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> setpal ()
+<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> showpal ()
+<span style="color: #bb99ee;">DEFINT</span> A-Y
+
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> x(1 <span style="color: #bb99ee;">TO</span> 500)
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> y(1 <span style="color: #bb99ee;">TO</span> 500)
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> s(1 <span style="color: #bb99ee;">TO</span> 500)
+
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> x4(1 <span style="color: #bb99ee;">TO</span> 500)
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> y4(1 <span style="color: #bb99ee;">TO</span> 500)
+
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> z(1 <span style="color: #bb99ee;">TO</span> 500)
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> mitu
+
+
+start
+
+<span style="color: #eeaa77;">1</span>
+mitu = 1
+
+x4(1) = -1
+y4(1) = -1
+x(1) = 420
+y(1) = 340
+s(1) = 70 * 100
+z(1) = 1
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Main loop to render the tree branches</span>
+<span style="color: #bb99ee;">FOR</span> tr = 1 <span style="color: #bb99ee;">TO</span> 6
+ <span style="color: #bb99ee;">FOR</span> b = 1 <span style="color: #bb99ee;">TO</span> 50
+ <span style="color: #bb99ee;">FOR</span> a = 1 <span style="color: #bb99ee;">TO</span> mitu
+ show a
+ <span style="color: #bb99ee;">NEXT</span> a
+ <span style="color: #bb99ee;">NEXT</span> b
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Duplicate existing branches and add randomness</span>
+ <span style="color: #bb99ee;">FOR</span> a = 1 <span style="color: #bb99ee;">TO</span> mitu
+ x(mitu + a) = x(a)
+ y(mitu + a) = y(a)
+ s(mitu + a) = s(a)
+ z(mitu + a) = z(a)
+ x4(mitu + a) = <span style="color: #88aaee;">RND</span> * 4 - 2
+ y4(mitu + a) = <span style="color: #88aaee;">RND</span> * 4 - 2
+ <span style="color: #bb99ee;">NEXT</span> a
+ mitu = mitu * 2
+
+<span style="color: #bb99ee;">NEXT</span> tr
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Exit application if any key was pressed by user</span>
+<span style="color: #bb99ee;">IF</span> <span style="color: #88aaee;">INKEY$</span> <> <span style="color: #99dd99;">""</span> <span style="color: #bb99ee;">THEN</span> <span style="color: #bb99ee;">SYSTEM</span>
+
+
+<span style="color: #bb99ee;">SLEEP</span> 2
+<span style="color: #ee8899;">CLS</span>
+<span style="color: #bb99ee;">GOTO</span> <span style="color: #eeaa77;">1</span>
+
+<span style="color: #bb99ee;">SUB</span> setPalette
+ <span style="color: #666677;">' </span><span style="color: #666677;">Set the palette colors to grayscale</span>
+ <span style="color: #bb99ee;">FOR</span> a = 0 <span style="color: #bb99ee;">TO</span> 16
+ <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 * 4
+ <span style="color: #ee8899;">OUT</span> &H3C9, a * 4
+ <span style="color: #bb99ee;">NEXT</span>
+<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">SUB</span>
+
+<span style="color: #bb99ee;">SUB</span> show (d)
+ <span style="color: #666677;">' </span><span style="color: #666677;">Retrieve current branch properties</span>
+ x1 = x(d)
+ y1 = y(d)
+ s1 = s(d)
+ z1 = z(d)
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate color based on angle</span>
+ c = <span style="color: #88aaee;">SIN</span>(z1) * 7 + 9
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw and fill the circle representing the branch</span>
+ <span style="color: #ee8899;">CIRCLE</span> (x1, y1), s1 / 100, c
+ <span style="color: #ee8899;">PAINT</span> (x1, y1), c
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Update position based on current angle and size</span>
+ x(d) = x(d) + (<span style="color: #88aaee;">SIN</span>(z1) * 1000) / (s1 + 15)
+ y(d) = y(d) + (<span style="color: #88aaee;">COS</span>(z1) * 1000) / (s1 + 15)
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Decay the size slightly</span>
+ s(d) = s(d) / 1.01
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Update angle based on direction</span>
+ <span style="color: #bb99ee;">IF</span> x4(d) >= 0 <span style="color: #bb99ee;">THEN</span> z(d) = z(d) + .1 <span style="color: #bb99ee;">ELSE</span> z(d) = z(d) - .1
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Move branch in its random direction</span>
+ x(d) = x(d) + x4(d)
+ y(d) = y(d) + y4(d)
+<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">SUB</span>
+
+<span style="color: #bb99ee;">SUB</span> start
+ <span style="color: #ee8899;">SCREEN</span> 12
+ 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>
+</pre>
+</div>
+</div>
+</div>
+
+<div id="outline-container-orgea69339" class="outline-2">
+<h2 id="orgea69339"><span class="section-number-2">3.</span> Rotation in 2D space using trigonometry functions</h2>
+<div class="outline-text-2" id="text-3">
+<p>
+Grid of dots is rotated on the screen.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="2D rotation.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="2D rotation.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;">This program showcases the rotation of points on an X-Y coordinate</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">system using trigonometric functions, specifically sine and cosine. By</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">simulating the effect of rotating a collection of grid points around</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">the origin, it demonstrates the mathematical principles behind 2D</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">rotation.</span>
+<span style="color: #666677;">'</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;">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, Improved program readability using AI</span>
+
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> pointXCoordinates(1000) <span style="color: #666677;">' </span><span style="color: #666677;">Array to store x coordinates of points</span>
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> pointYCoordinates(1000) <span style="color: #666677;">' </span><span style="color: #666677;">Array to store y coordinates of points</span>
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> oldPointXCoordinates(1000) <span style="color: #666677;">' </span><span style="color: #666677;">Array to store previous x coordinates of points</span>
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> oldPointYCoordinates(1000) <span style="color: #666677;">' </span><span style="color: #666677;">Array to store previous y coordinates of points</span>
+
+<span style="color: #ee8899;">SCREEN</span> 13
+
+numPoints = 0 <span style="color: #666677;">' </span><span style="color: #666677;">Initialize the number of points</span>
+<span style="color: #bb99ee;">FOR</span> pointXVal = -10 <span style="color: #bb99ee;">TO</span> 10
+ <span style="color: #bb99ee;">FOR</span> pointYVal = -10 <span style="color: #bb99ee;">TO</span> 10
+ numPoints = numPoints + 1
+ pointXCoordinates(numPoints) = pointXVal
+ pointYCoordinates(numPoints) = pointYVal
+ <span style="color: #bb99ee;">NEXT</span> pointYVal
+<span style="color: #bb99ee;">NEXT</span> pointXVal
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Main rotation loop</span>
+rotationAngle = 0 <span style="color: #666677;">' </span><span style="color: #666677;">Initialize the rotation angle to 0</span>
+
+<span style="color: #eeaa77;">1</span>
+ rotationAngle = rotationAngle + .01 <span style="color: #666677;">' </span><span style="color: #666677;">Increment the rotation angle by 0.01 radians</span>
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the sine and cosine of the current rotation angle</span>
+ sineOfRotationAngle = <span style="color: #88aaee;">SIN</span>(rotationAngle)
+ cosineOfRotationAngle = <span style="color: #88aaee;">COS</span>(rotationAngle)
+
+ <span style="color: #bb99ee;">FOR</span> pointIndex = 1 <span style="color: #bb99ee;">TO</span> numPoints
+ <span style="color: #ee8899;">PSET</span> (oldPointXCoordinates(pointIndex), oldPointYCoordinates(pointIndex)), 0 <span style="color: #666677;">' </span><span style="color: #666677;">Clear the previous position</span>
+
+ xCoordinate = pointXCoordinates(pointIndex)
+ yCoordinate = pointYCoordinates(pointIndex)
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the new x and y coordinate after rotation</span>
+ newXCoordinate = xCoordinate * sineOfRotationAngle + yCoordinate * cosineOfRotationAngle
+ newYCoordinate = xCoordinate * cosineOfRotationAngle - yCoordinate * sineOfRotationAngle
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Scale and translate the new x and y coordinates to the center of the screen</span>
+ newXCoordinate = newXCoordinate * 7 + 160
+ newYCoordinate = newYCoordinate * 7 + 100
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Store x and y on-screen coordinates for clearing on next iteration</span>
+ oldPointXCoordinates(pointIndex) = newXCoordinate
+ oldPointYCoordinates(pointIndex) = newYCoordinate
+
+ <span style="color: #ee8899;">PSET</span> (newXCoordinate, newYCoordinate), 15 <span style="color: #666677;">' </span><span style="color: #666677;">Draw the point at the new position</span>
+ <span style="color: #bb99ee;">NEXT</span> pointIndex
+
+<span style="color: #bb99ee;">IF</span> <span style="color: #88aaee;">INKEY$</span> = <span style="color: #99dd99;">""</span> <span style="color: #bb99ee;">THEN</span> <span style="color: #bb99ee;">GOTO</span> <span style="color: #eeaa77;">1</span> <span style="color: #666677;">' </span><span style="color: #666677;">Continue rotating if no key is pressed</span>
+</pre>
+</div>
+</div>
+</div>
+
+<div id="outline-container-orga7b79a7" class="outline-2">
+<h2 id="orga7b79a7"><span class="section-number-2">4.</span> Various text mode animation effects</h2>
+<div class="outline-text-2" id="text-4">
+<p>
+Program demonstrates various animation effects that can be
+accomplished using text-mode rendering.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="text mode animation.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="text mode animation.bas">Source code</a>
+</p>
+</div>
+</div>
+
+<div id="outline-container-orge1518a0" class="outline-2">
+<h2 id="orge1518a0"><span class="section-number-2">5.</span> Snowfall</h2>
+<div class="outline-text-2" id="text-5">
+<p>
+Program simulates falling of snow particles. Particles fall towards
+the ground because of the gravity. Once particle falls on the surface,
+it tries to skid around a bit, bit ultimately freezes in-place.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="Snowfall.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="Snowfall.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;">Svjatoslav Agejenko 2003.04</span>
+
+<span style="color: #bb99ee;">DEFINT</span> A-Z
+<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> fall (particleIndex)
+<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> start ()
+
+amo = 500
+
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> fx(1 <span style="color: #bb99ee;">TO</span> amo)
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> fy(1 <span style="color: #bb99ee;">TO</span> amo)
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Initialize particle positions</span>
+<span style="color: #bb99ee;">FOR</span> a = 1 <span style="color: #bb99ee;">TO</span> amo
+ fx(a) = <span style="color: #88aaee;">RND</span> * 300 + 10
+ fy(a) = <span style="color: #88aaee;">RND</span> * 100 + 10
+<span style="color: #bb99ee;">NEXT</span> a
+
+start
+
+<span style="color: #eeaa77;">1</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">Main loop to simulate snowfall</span>
+<span style="color: #bb99ee;">FOR</span> b = 1 <span style="color: #bb99ee;">TO</span> 100
+ a = <span style="color: #88aaee;">INT</span>(<span style="color: #88aaee;">RND</span> * amo) + 1
+ fall a
+<span style="color: #bb99ee;">NEXT</span> b
+<span style="color: #ee8899;">SOUND</span> 0, .1
+<span style="color: #bb99ee;">IF</span> <span style="color: #88aaee;">INKEY$</span> <> <span style="color: #99dd99;">""</span> <span style="color: #bb99ee;">THEN</span> <span style="color: #bb99ee;">SYSTEM</span>
+<span style="color: #bb99ee;">GOTO</span> <span style="color: #eeaa77;">1</span>
+
+<span style="color: #bb99ee;">SUB</span> fall (particleIndex)
+
+t = 0
+<span style="color: #eeaa77;">2</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">Draw the particle at its current position</span>
+<span style="color: #ee8899;">PSET</span> (fx(particleIndex), fy(particleIndex)), 0
+
+ny = fy(particleIndex) + 1
+nx = fx(particleIndex) + <span style="color: #88aaee;">INT</span>(<span style="color: #88aaee;">RND</span> * 3) - 1
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Check for collision with another particle</span>
+<span style="color: #bb99ee;">IF</span> <span style="color: #88aaee;">POINT</span>(nx, ny) > 0 <span style="color: #bb99ee;">THEN</span>
+ <span style="color: #666677;">' </span><span style="color: #666677;">If collision detected and t is less than 10, increment t and retry</span>
+ <span style="color: #bb99ee;">IF</span> t < 10 <span style="color: #bb99ee;">THEN</span>
+ t = t + 1
+ <span style="color: #bb99ee;">GOTO</span> <span style="color: #eeaa77;">2</span>
+ <span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">IF</span>
+ <span style="color: #666677;">' </span><span style="color: #666677;">If collision persists, change particle color to indicate collision</span>
+ <span style="color: #ee8899;">PSET</span> (fx(particleIndex), fy(particleIndex)), 15
+ nx = <span style="color: #88aaee;">RND</span> * 300 + 10
+ ny = 1
+<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">IF</span>
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Check if the particle has reached the bottom of the screen</span>
+<span style="color: #bb99ee;">IF</span> fy(particleIndex) > 198 <span style="color: #bb99ee;">THEN</span>
+ <span style="color: #ee8899;">PSET</span> (fx(particleIndex), fy(particleIndex)), 15
+ nx = <span style="color: #88aaee;">RND</span> * 300 + 10
+ ny = 1
+<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">IF</span>
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Update particle position</span>
+fx(particleIndex) = nx
+fy(particleIndex) = ny
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Draw the particle at its new position</span>
+<span style="color: #ee8899;">PSET</span> (fx(particleIndex), fy(particleIndex)), 15
+
+<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">SUB</span>
+
+<span style="color: #bb99ee;">DEFSNG</span> A-Z
+<span style="color: #bb99ee;">SUB</span> start
+<span style="color: #ee8899;">SCREEN</span> 13
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Create nice and curvy surface for snow particles to fall onto.</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">Here we draw "SNOW" with big and wobbly letters to the screen</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">to serve as an obstacle for snow particles.</span>
+
+<span style="color: #ee8899;">LOCATE</span> 1, 1
+<span style="color: #ee8899;">PRINT</span> <span style="color: #99dd99;">"SNOW"</span>
+
+<span style="color: #bb99ee;">FOR</span> y = 0 <span style="color: #bb99ee;">TO</span> 15 <span style="color: #bb99ee;">STEP</span> .2
+ xp = <span style="color: #88aaee;">SIN</span>(y / 1) * 3 + 65
+ <span style="color: #bb99ee;">FOR</span> x = 0 <span style="color: #bb99ee;">TO</span> 30 <span style="color: #bb99ee;">STEP</span> .1
+ ys = 4 + <span style="color: #88aaee;">COS</span>(x / 5)
+ yp = <span style="color: #88aaee;">COS</span>(x / 4 + 3) * 5 + 130
+ c = <span style="color: #88aaee;">POINT</span>(x, y)
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw a line if the point is not black</span>
+ <span style="color: #bb99ee;">IF</span> c > 0 <span style="color: #bb99ee;">THEN</span>
+ <span style="color: #ee8899;">LINE</span> (x * 6 + xp, y * ys + yp)-(x * 6 + xp + 1, y * ys + yp + 1), 11, BF
+ <span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">IF</span>
+ <span style="color: #bb99ee;">NEXT</span> x
+<span style="color: #bb99ee;">NEXT</span> y
+
+<span style="color: #ee8899;">LOCATE</span> 1, 1
+<span style="color: #ee8899;">PRINT</span> <span style="color: #99dd99;">" "</span>
+
+<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">SUB</span>
+</pre>
+</div>
+</div>
+</div>
+
+<div id="outline-container-org97574dd" class="outline-2">
+<h2 id="org97574dd"><span class="section-number-2">6.</span> Screensaver</h2>
+<div class="outline-text-2" id="text-6">
+<p>
+Application of trigonometry functions is explored here to calculate
+line coordinates.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="Screensaver.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="Screensaver.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;">Mystery screensaver</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;">2004.01, Initial version</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">2024.08, Improved program readability using AI</span>
+
+<span style="color: #ee8899;">SCREEN</span> 7, , , 1
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Main loop for animation</span>
+<span style="color: #bb99ee;">DO</span>
+ <span style="color: #666677;">' </span><span style="color: #666677;">Increment frame counter</span>
+ frameCounter = frameCounter + 1
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate scaling factor based on frame counter</span>
+ scaleFactor = (<span style="color: #88aaee;">SIN</span>(frameCounter / 100) + 1.1) * 2
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw lines to create animation effect</span>
+ <span style="color: #bb99ee;">FOR</span> s = 1 <span style="color: #bb99ee;">TO</span> 20 <span style="color: #bb99ee;">STEP</span> .1
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate x and y coordinates for the first point</span>
+ x = <span style="color: #88aaee;">SIN</span>(s / 1 + frameCounter / 7) * 100
+ y = <span style="color: #88aaee;">COS</span>(s / 1 + frameCounter / 10) * 100
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate x and y coordinates for the second point</span>
+ x1 = <span style="color: #88aaee;">SIN</span>(s / 1 - frameCounter / 8) * 100
+ y1 = <span style="color: #88aaee;">COS</span>(s / 1 + frameCounter / 15) * 100
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw a line between the two points with varying thickness</span>
+ <span style="color: #ee8899;">LINE</span> (x + 160, y + 100)-(x1 + 160, y1 + 100), s <span style="color: #88aaee;">MOD</span> 15
+ <span style="color: #bb99ee;">NEXT</span> s
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Copy screen buffer to display the animation</span>
+ <span style="color: #ee8899;">PCOPY</span> 0, 1
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Generate a sound effect</span>
+ <span style="color: #ee8899;">SOUND</span> 0, 1
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Clear the screen for the next frame</span>
+ <span style="color: #ee8899;">CLS</span>
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Check if a key is pressed and exit if so</span>
+ <span style="color: #bb99ee;">IF</span> <span style="color: #88aaee;">INKEY$</span> <> <span style="color: #99dd99;">""</span> <span style="color: #bb99ee;">THEN</span> <span style="color: #bb99ee;">SYSTEM</span>
+<span style="color: #bb99ee;">LOOP</span>
+</pre>
+</div>
+</div>
+</div>
+
+<div id="outline-container-org55ef0d7" class="outline-2">
+<h2 id="org55ef0d7"><span class="section-number-2">7.</span> Screensaver - flying hand fans</h2>
+<div class="outline-text-2" id="text-7">
+<p>
+Quick implementation for colorful flying hand fans.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="Screensaver, flying hand fans.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="Screensaver, flying hand fans.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;">Screensaver</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.04, Initial version</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">2024.08, Improved program readability using AI</span>
+
+
+<span style="color: #ee8899;">SCREEN</span> 7, , , 1
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Main animation loop</span>
+<span style="color: #eeaa77;">1</span> :
+ <span style="color: #666677;">' </span><span style="color: #666677;">Adjust frame counter if it exceeds a certain threshold</span>
+ <span style="color: #bb99ee;">IF</span> frameCounter > 10000 <span style="color: #bb99ee;">THEN</span> frameCounter = -10000
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Update the positions of six points based on the frame counter</span>
+ <span style="color: #bb99ee;">FOR</span> pointIndex = 1 <span style="color: #bb99ee;">TO</span> 6
+ <span style="color: #ee8899;">OUT</span> &H3C8, pointIndex
+ <span style="color: #ee8899;">OUT</span> &H3C9, <span style="color: #88aaee;">SIN</span>(pointIndex + frameCounter * 3) * 30 + 31
+ <span style="color: #ee8899;">OUT</span> &H3C9, <span style="color: #88aaee;">COS</span>(pointIndex * 1 + frameCounter * 5) * 30 + 31
+ <span style="color: #ee8899;">OUT</span> &H3C9, <span style="color: #88aaee;">SIN</span>(pointIndex * .7 + frameCounter * 2.23) * 30 + 31
+ <span style="color: #bb99ee;">NEXT</span> pointIndex
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Increment the frame counter for the next iteration</span>
+ frameCounter = frameCounter + .01
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Render lines connecting points</span>
+ <span style="color: #bb99ee;">FOR</span> objectIndex = 1 <span style="color: #bb99ee;">TO</span> 10
+ <span style="color: #666677;">' </span><span style="color: #666677;">Determine the color based on the remainder of objectIndex divided by 6</span>
+ pointColor = (objectIndex <span style="color: #88aaee;">MOD</span> 6) + 1
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the X coordinate for the starting point of the line</span>
+ xCoordinate = <span style="color: #88aaee;">SIN</span>(objectIndex + frameCounter) * 100 + 150
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the Y coordinate for the starting point of the line</span>
+ yCoordinate = <span style="color: #88aaee;">COS</span>(objectIndex * 1.2 + frameCounter * 1.81) * 80 + 100
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the sine component for the line's angle</span>
+ xSineComponent = <span style="color: #88aaee;">SIN</span>(objectIndex * frameCounter * 2.3)
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw lines from the starting point with varying lengths and angles</span>
+ <span style="color: #bb99ee;">FOR</span> xPositionOffset = -50 <span style="color: #bb99ee;">TO</span> 50 <span style="color: #bb99ee;">STEP</span> 10
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the cosine component for the line's angle based on xPositionOffset</span>
+ yCosineComponent = <span style="color: #88aaee;">COS</span>(xPositionOffset / 60 + frameCounter * 1 + objectIndex) * 50
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw a line segment with varying thickness and color</span>
+ <span style="color: #ee8899;">LINE</span> (xCoordinate, yCoordinate)-(xCoordinate + xPositionOffset * xSineComponent, yCoordinate - yCosineComponent), pointColor
+ <span style="color: #bb99ee;">NEXT</span> xPositionOffset
+ <span style="color: #bb99ee;">NEXT</span> objectIndex
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Copy the graphics from the hidden page to the visible page</span>
+ <span style="color: #ee8899;">PCOPY</span> 0, 1
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Clear the screen for the next frame</span>
+ <span style="color: #ee8899;">CLS</span>
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Play a sound at a specific frequency and duration</span>
+ <span style="color: #ee8899;">SOUND</span> 0, .4
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Check if any key is pressed; if so, exit the program</span>
+ <span style="color: #bb99ee;">IF</span> <span style="color: #88aaee;">INKEY$</span> <> <span style="color: #99dd99;">""</span> <span style="color: #bb99ee;">THEN</span> <span style="color: #bb99ee;">SYSTEM</span>
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Loop back to the start of the animation</span>
+<span style="color: #bb99ee;">GOTO</span> <span style="color: #eeaa77;">1</span>
+</pre>
+</div>
+</div>
+</div>
+
+<div id="outline-container-orgd0d1a37" class="outline-2">
+<h2 id="orgd0d1a37"><span class="section-number-2">8.</span> Polygon rendering</h2>
+<div class="outline-text-2" id="text-8">
+<p>
+Algorithm to demonstrate rendering or polygons across arbitrary
+coordinates.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="Polygon.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="Polygon.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 polygons at random locations and random colors.</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;">Changelog:</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">2001, Initial version</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">2024, Improved program readability using AI</span>
+
+<span style="color: #bb99ee;">DEFINT</span> A-Z
+<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> fillPolygon (x1, y1, x2, y2, x3, y3, c)
+<span style="color: #ee8899;">SCREEN</span> 13
+
+<span style="color: #eeaa77;">MainLoop:</span>
+ <span style="color: #666677;">' </span><span style="color: #666677;">Generate random coordinates for the first vertex</span>
+ x1 = <span style="color: #88aaee;">RND</span> * 318 + 1
+ y1 = <span style="color: #88aaee;">RND</span> * 198 + 1
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Generate random coordinates for the second vertex</span>
+ x2 = <span style="color: #88aaee;">RND</span> * 318 + 1
+ y2 = <span style="color: #88aaee;">RND</span> * 198 + 1
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Generate random coordinates for the third vertex</span>
+ x3 = <span style="color: #88aaee;">RND</span> * 318 + 1
+ y3 = <span style="color: #88aaee;">RND</span> * 198 + 1
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Fill the polygon with a random color</span>
+ fillPolygon x1, y1, x2, y2, x3, y3, <span style="color: #88aaee;">RND</span> * 255
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Add delay</span>
+ <span style="color: #ee8899;">SOUND</span> 0, 1
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Check if any key is pressed to exit the loop</span>
+ <span style="color: #bb99ee;">IF</span> <span style="color: #88aaee;">INKEY$</span> <> <span style="color: #99dd99;">""</span> <span style="color: #bb99ee;">THEN</span> <span style="color: #bb99ee;">SYSTEM</span>
+<span style="color: #bb99ee;">GOTO</span> MainLoop
+
+<span style="color: #bb99ee;">SUB</span> fillPolygon (x1, y1, x2, y2, x3, y3, c)
+ <span style="color: #666677;">' </span><span style="color: #666677;">Buffer array to store x-coordinates for each y-index</span>
+ <span style="color: #bb99ee;">DIM</span> yBuffer(-10 <span style="color: #bb99ee;">TO</span> 210)
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw the line between the first and second vertices</span>
+ tempX1 = x1
+ tempY1 = y1
+ tempX2 = x2
+ tempY2 = y2
+ <span style="color: #bb99ee;">GOSUB</span> makeLine
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw the line between the first and third vertices</span>
+ tempX1 = x1
+ tempY1 = y1
+ tempX2 = x3
+ tempY2 = y3
+ <span style="color: #bb99ee;">GOSUB</span> makeLine
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw the line between the second and third vertices</span>
+ tempX1 = x3
+ tempY1 = y3
+ tempX2 = x2
+ tempY2 = y2
+ <span style="color: #bb99ee;">GOSUB</span> makeLine
+
+<span style="color: #bb99ee;">GOTO</span> FillEnd
+
+<span style="color: #eeaa77;">makeLine:</span>
+ <span style="color: #666677;">' </span><span style="color: #666677;">Ensure that the start point is always below the end point</span>
+ <span style="color: #bb99ee;">IF</span> tempY2 < tempY1 <span style="color: #bb99ee;">THEN</span> <span style="color: #ee8899;">SWAP</span> tempY1, tempY2: <span style="color: #ee8899;">SWAP</span> tempX1, tempX2
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Loop through each y-index from the start to the end</span>
+ <span style="color: #bb99ee;">FOR</span> yIndex = tempY1 <span style="color: #bb99ee;">TO</span> tempY2 - 1
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the x-position for the current y-index</span>
+ xPos = tempX1 + (tempX2 - tempX1) * ((yIndex - tempY1) / (tempY2 - tempY1))
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">If the buffer is empty, store the x-position</span>
+ <span style="color: #bb99ee;">IF</span> yBuffer(yIndex) = 0 <span style="color: #bb99ee;">THEN</span>
+ yBuffer(yIndex) = xPos
+ <span style="color: #bb99ee;">ELSE</span>
+ <span style="color: #666677;">' </span><span style="color: #666677;">Otherwise, draw a line between the stored and calculated positions</span>
+ <span style="color: #ee8899;">LINE</span> (xPos, yIndex)-(yBuffer(yIndex), yIndex), c
+ <span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">IF</span>
+ <span style="color: #bb99ee;">NEXT</span> yIndex
+<span style="color: #bb99ee;">RETURN</span>
+
+<span style="color: #eeaa77;">FillEnd:</span>
+<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">SUB</span>
+</pre>
+</div>
+</div>
+</div>
+
+<div id="outline-container-orgf3b0873" class="outline-2">
+<h2 id="orgf3b0873"><span class="section-number-2">9.</span> Textured polygon rendering</h2>
+<div class="outline-text-2" id="text-9">
+<p>
+Algorithm to demonstrate rendering or textured polygons across
+arbitrary coordinates.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="Polygon textured.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="Polygon textured.bas">Source code</a>
+</p>
+</div>
+</div>
+
+<div id="outline-container-org702bd23" class="outline-2">
+<h2 id="org702bd23"><span class="section-number-2">10.</span> Yin and yang animation</h2>
+<div class="outline-text-2" id="text-10">
+<p>
+Yin and yang is a concept that originated in Chinese philosophy,
+describing an opposite but interconnected, self-perpetuating
+cycle. Yin and yang can be thought of as complementary and at the same
+time opposing forces that interact to form a dynamic system in which
+the whole is greater than the assembled parts and the parts are
+important for cohesion of the whole.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="Yin and yang.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="Yin and yang.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;">Yin and yang animation</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;">2000, Initial version</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">2024.08, Improved program readability using AI</span>
+
+<span style="color: #bb99ee;">DECLARE</span> <span style="color: #bb99ee;">SUB</span> Cir (x!, y!, r!, c!)
+<span style="color: #ee8899;">SCREEN</span> 13
+pi = 3.141592599999999#
+<span style="color: #ee8899;">PAINT</span> (1, 1), 1
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Main animation loop</span>
+<span style="color: #bb99ee;">DO</span>
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the x and y positions for both circles using sine and cosine functions</span>
+ x = <span style="color: #88aaee;">SIN</span>(a) * 40 + 160
+ x1 = <span style="color: #88aaee;">SIN</span>(a + pi) * 40 + 160
+ y = <span style="color: #88aaee;">COS</span>(a) * 34 + 100
+ y1 = <span style="color: #88aaee;">COS</span>(a + pi) * 34 + 100
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw the first circle with color 0 (black)</span>
+ Cir x, y, 40, 0
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw the second circle with color 1 (blue)</span>
+ Cir x1, y1, 40, 1
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Increment the angle to animate the circles</span>
+ a = a + .05
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Check for user input to exit the program</span>
+ <span style="color: #bb99ee;">IF</span> <span style="color: #88aaee;">INKEY$</span> <> <span style="color: #99dd99;">""</span> <span style="color: #bb99ee;">THEN</span> <span style="color: #bb99ee;">SYSTEM</span>
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">delay to slow down animation</span>
+ <span style="color: #ee8899;">SOUND</span> 0, 1
+<span style="color: #bb99ee;">LOOP</span>
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Subroutine to draw a circle with specified center (x, y), radius r, and color c</span>
+<span style="color: #bb99ee;">SUB</span> Cir (x, y, r, c)
+ <span style="color: #666677;">' </span><span style="color: #666677;">Define colors for the circle outline</span>
+ cc1 = 0 <span style="color: #666677;">' </span><span style="color: #666677;">Black</span>
+ cc2 = 15 <span style="color: #666677;">' </span><span style="color: #666677;">White</span>
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Swap colors if the second color is desired for the inner part of the circle</span>
+ <span style="color: #bb99ee;">IF</span> c = 1 <span style="color: #bb99ee;">THEN</span> <span style="color: #ee8899;">SWAP</span> cc1, cc2
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw the circle from radius 1 to r</span>
+ <span style="color: #bb99ee;">FOR</span> a = 1 <span style="color: #bb99ee;">TO</span> r
+ <span style="color: #666677;">' </span><span style="color: #666677;">Determine the color for the current circle segment</span>
+ <span style="color: #bb99ee;">IF</span> a < r / 2 <span style="color: #bb99ee;">THEN</span> c1 = cc1 <span style="color: #bb99ee;">ELSE</span> c1 = cc2
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw the circle segment with the determined color</span>
+ <span style="color: #ee8899;">CIRCLE</span> (x, y), a, c1
+ <span style="color: #bb99ee;">NEXT</span> a
+<span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">SUB</span>
+</pre>
+</div>
+</div>
+</div>
+
+<div id="outline-container-org9515bd5" class="outline-2">
+<h2 id="org9515bd5"><span class="section-number-2">11.</span> Orbiting particles</h2>
+<div class="outline-text-2" id="text-11">
+<p>
+Trivial to implement but interesting looking effect. Various particles
+are orbiting central point. Each particle is connected to the center.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="Orbiting particles.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="Orbiting particles.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;">Projects animated particles in orbit around a central point.</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;">Changelog:</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">?, Initial version</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">2024, Improved program readability using AI</span>
+
+<span style="color: #ee8899;">SCREEN</span> 7, , , 1
+<span style="color: #ee8899;">RANDOMIZE</span> <span style="color: #ee8899;">TIMER</span>
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Declare shared arrays to store particles</span>
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> particleColor(1 <span style="color: #bb99ee;">TO</span> 100)
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> particleX(1 <span style="color: #bb99ee;">TO</span> 100)
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> particleAngle(1 <span style="color: #bb99ee;">TO</span> 100)
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Initialize the arrays with random values</span>
+<span style="color: #bb99ee;">FOR</span> a = 1 <span style="color: #bb99ee;">TO</span> 100
+ particleColor(a) = <span style="color: #88aaee;">RND</span> * 15
+ particleX(a) = <span style="color: #88aaee;">RND</span> * 100
+ particleAngle(a) = <span style="color: #88aaee;">RND</span> * 100
+<span style="color: #bb99ee;">NEXT</span> a
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Main loop to draw the animated particles</span>
+<span style="color: #eeaa77;">1</span>
+<span style="color: #ee8899;">CLS</span>
+<span style="color: #bb99ee;">FOR</span> a = 1 <span style="color: #bb99ee;">TO</span> 50
+ <span style="color: #666677;">' </span><span style="color: #666677;">Get current segment data</span>
+ currentColor = particleColor(a)
+ currentParticleX = particleX(a)
+ currentparticleAngle = particleAngle(a)
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate the x and y coordinates for the current segment</span>
+ xCoordinate = <span style="color: #88aaee;">SIN</span>(currentparticleAngle) * 25
+ yCoordinate = <span style="color: #88aaee;">SIN</span>(currentParticleX) * 20
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Scale the coordinates</span>
+ scaleFactor = (<span style="color: #88aaee;">COS</span>(currentparticleAngle) + 2) * 2
+ xCoordinate = xCoordinate * scaleFactor
+ yCoordinate = yCoordinate * scaleFactor
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw the current particle as a circle</span>
+ <span style="color: #ee8899;">CIRCLE</span> (xCoordinate + 160, yCoordinate + 100), scaleFactor, currentColor
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Fill the inside of the circle with color</span>
+ <span style="color: #ee8899;">PAINT</span> (xCoordinate + 160, yCoordinate + 100), currentColor
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw a line from the center to the current particle</span>
+ <span style="color: #ee8899;">LINE</span> (160, 100)-(xCoordinate + 160, yCoordinate + 100), currentColor
+
+ <span style="color: #666677;">' </span><span style="color: #666677;">Rotate particle by small amount for next frame</span>
+ particleAngle(a) = particleAngle(a) + .1
+<span style="color: #bb99ee;">NEXT</span> a
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Copy screen buffer 0 to screen buffer 1</span>
+<span style="color: #ee8899;">PCOPY</span> 0, 1
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Check for user input and exit if any key is pressed</span>
+<span style="color: #bb99ee;">IF</span> <span style="color: #88aaee;">INKEY$</span> <> <span style="color: #99dd99;">""</span> <span style="color: #bb99ee;">THEN</span> <span style="color: #bb99ee;">SYSTEM</span>
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Use sound function with inaudible 0 Hz but fixed delay to slow down animation</span>
+<span style="color: #ee8899;">SOUND</span> 0, 1
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Go back to the main loop</span>
+<span style="color: #bb99ee;">GOTO</span> <span style="color: #eeaa77;">1</span>
+</pre>
+</div>
+</div>
+</div>
+
+<div id="outline-container-org9116890" class="outline-2">
+<h2 id="org9116890"><span class="section-number-2">12.</span> DNA animation</h2>
+<div class="outline-text-2" id="text-12">
+<p>
+Animated DNA. Nowhere close to being anatomically correct, but
+resembles animation as seen in the movies :)
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="DNA.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="DNA.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 animated DNA as seen in the movies.</span>
+<span style="color: #666677;">'</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;">?, Initial version</span>
+<span style="color: #666677;">' </span><span style="color: #666677;">2024, Improved program readability using AI</span>
+
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> xCoordinates(1 <span style="color: #bb99ee;">TO</span> 100)
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> yCoordinates(1 <span style="color: #bb99ee;">TO</span> 100)
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> zCoordinates(1 <span style="color: #bb99ee;">TO</span> 100)
+<span style="color: #bb99ee;">DIM</span> <span style="color: #ee8899;">SHARED</span> colorCodes(1 <span style="color: #bb99ee;">TO</span> 100)
+
+<span style="color: #ee8899;">SCREEN</span> 7, , , 1
+
+<span style="color: #eeaa77;">1</span>:
+b = 0
+rotationAngle = rotationAngle + 0.1
+<span style="color: #bb99ee;">FOR</span> a = 1 <span style="color: #bb99ee;">TO</span> 20
+ b = b + 1
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate x-coordinate using sine function and add to array</span>
+ xCoordinates(b) = <span style="color: #88aaee;">SIN</span>(a / 2 + rotationAngle) * 30 + 150
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate z-coordinate using sine function and add to array</span>
+ zCoordinates(b) = <span style="color: #88aaee;">SIN</span>(a / 2 + rotationAngle + 1.6) * 2 + 2
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate y-coordinate by multiplying a with 8 and adding z-coordinate</span>
+ yCoordinates(b) = a * 8 + zCoordinates(b)
+ <span style="color: #666677;">' </span><span style="color: #666677;">Assign color code to the current point</span>
+ colorCodes(b) = 3
+
+ b = b + 1
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate x-coordinate using sine function and add to array</span>
+ xCoordinates(b) = <span style="color: #88aaee;">SIN</span>(a / 2 + rotationAngle + 2.5) * 30 + 150
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate z-coordinate using sine function and add to array</span>
+ zCoordinates(b) = <span style="color: #88aaee;">SIN</span>(a / 2 + rotationAngle + 1.6 + 2.5) * 2 + 2
+ <span style="color: #666677;">' </span><span style="color: #666677;">Calculate y-coordinate by multiplying a with 8 and adding z-coordinate</span>
+ yCoordinates(b) = a * 8 + zCoordinates(b)
+ <span style="color: #666677;">' </span><span style="color: #666677;">Assign color code to the current point</span>
+ colorCodes(b) = 4
+<span style="color: #bb99ee;">NEXT</span> a
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Clear the screen</span>
+<span style="color: #ee8899;">CLS</span>
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Draw lines and circles based on z-coordinate</span>
+<span style="color: #bb99ee;">FOR</span> b = 0 <span style="color: #bb99ee;">TO</span> 4
+ <span style="color: #bb99ee;">IF</span> b = 1 <span style="color: #bb99ee;">THEN</span>
+ <span style="color: #bb99ee;">FOR</span> a = 1 <span style="color: #bb99ee;">TO</span> 40 <span style="color: #bb99ee;">STEP</span> 2
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw line between consecutive points</span>
+ <span style="color: #ee8899;">LINE</span> (xCoordinates(a), yCoordinates(a))-(xCoordinates(a + 1), yCoordinates(a + 1)), 15
+ <span style="color: #bb99ee;">NEXT</span> a
+ <span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">IF</span>
+
+ <span style="color: #bb99ee;">FOR</span> a = 1 <span style="color: #bb99ee;">TO</span> 40
+ <span style="color: #666677;">' </span><span style="color: #666677;">Check if the current z-coordinate matches the loop variable b</span>
+ <span style="color: #bb99ee;">IF</span> <span style="color: #88aaee;">int</span>(zCoordinates(a)) = b <span style="color: #bb99ee;">THEN</span>
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw circle with specified color code</span>
+ <span style="color: #ee8899;">CIRCLE</span> (xCoordinates(a), yCoordinates(a)), b + 5, colorCodes(a)
+ <span style="color: #ee8899;">PAINT</span> (xCoordinates(a), yCoordinates(a)), colorCodes(a)
+ <span style="color: #666677;">' </span><span style="color: #666677;">Draw an black outline of the circle</span>
+ <span style="color: #ee8899;">CIRCLE</span> (xCoordinates(a), yCoordinates(a)), b + 5, 0
+ <span style="color: #bb99ee;">END</span> <span style="color: #bb99ee;">IF</span>
+ <span style="color: #bb99ee;">NEXT</span> a
+<span style="color: #bb99ee;">NEXT</span> b
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Copy the screen to buffer and clear the screen</span>
+<span style="color: #ee8899;">PCOPY</span> 0, 1
+<span style="color: #ee8899;">CLS</span>
+
+<span style="color: #666677;">' </span><span style="color: #666677;">Check if any key is pressed</span>
+<span style="color: #bb99ee;">IF</span> <span style="color: #88aaee;">INKEY$</span> = <span style="color: #99dd99;">""</span> <span style="color: #bb99ee;">THEN</span> <span style="color: #bb99ee;">GOTO</span> <span style="color: #eeaa77;">1</span>
+
+<span style="color: #666677;">' </span><span style="color: #666677;">End the program</span>
+<span style="color: #bb99ee;">SYSTEM</span>
+</pre>
+</div>
+</div>
+</div>
+
+<div id="outline-container-org1b880ca" class="outline-2">
+<h2 id="org1b880ca"><span class="section-number-2">13.</span> Matrix</h2>
+<div class="outline-text-2" id="text-13">
+<p>
+Effect inspired by "The Matrix" movie.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="matrix.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="matrix.bas">Source code</a>
+</p>
+</div>
+</div>
+
+<div id="outline-container-orgd17436f" class="outline-2">
+<h2 id="orgd17436f"><span class="section-number-2">14.</span> Hacker</h2>
+<div class="outline-text-2" id="text-14">
+<p>
+Ultra-realistic hacker screen simulator! Behold da glory of a true
+hacker's terminal, brimming wif mystical green text that cascades like
+a waterfall of knowledge across thy monitor.
+</p>
+
+<div class="flex-center">
+ <video width="1000" controls loop autoplay>
+ <source src="hacker.webm" type="video/webm">
+ Your browser does not support the video tag.
+ </video>
+</div>
+
+<p>
+<a href="hacker.bas">Source code</a>
+</p>
+</div>
+</div>
+</div>
+<div id="postamble" class="status">
+<p class="date">Created: 2025-04-23 ke 23:27</p>
+<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
+</div>
+</body>
+</html>
projects / qbasicapps.git / commitdiff