mirror of
https://github.com/skoelle/moonweb-site.git
synced 2026-09-17 17:00:25 +00:00
348 lines
13 KiB
HTML
Executable File
348 lines
13 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TranceMission Archive - Pascal PC Intros from 1992-1995 - Graphics, Animation, and Sound</title>
|
|
<meta name="description" content="Explore three Pascal demo programs showcasing graphics, animation, and sound capabilities using Turbo Pascal and assembler. Learn about text and graphics animation, sound integration, and user interaction in Pascal programming.">
|
|
<link rel="canonical" href="https://www.moonweb.org/tcm/" />
|
|
<style>
|
|
@font-face {
|
|
font-family: 'VT323';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('fonts/vt323-latin.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Press Start 2P';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('fonts/pressstart2p-latin.woff2') format('woff2');
|
|
}
|
|
body {
|
|
background-color: black;
|
|
color: #FFF741;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
font-family: 'VT323', monospace;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 20px;
|
|
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
|
}
|
|
h1, h2 {
|
|
font-family: 'Press Start 2P', cursive;
|
|
font-size: 1em;
|
|
}
|
|
.container {
|
|
text-align: center;
|
|
max-width: 1000px;
|
|
width: 100%;
|
|
padding: 20px;
|
|
}
|
|
.logo {
|
|
margin-bottom: 20px;
|
|
}
|
|
.intro {
|
|
margin-bottom: 40px;
|
|
}
|
|
.program {
|
|
margin-bottom: 40px;
|
|
}
|
|
.screenshots {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.screenshots a {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
.screenshots img {
|
|
max-width: 300px;
|
|
height: auto;
|
|
}
|
|
.youtube-logo {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
a {
|
|
color: #E76D00;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
a:hover {
|
|
color: #CB4D00;
|
|
text-decoration: underline;
|
|
}
|
|
/* Lightbox CSS */
|
|
.lightbox {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 999;
|
|
padding-top: 60px;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0,0,0,0.9);
|
|
}
|
|
.lightbox-content {
|
|
margin: auto;
|
|
display: block;
|
|
width: 80%;
|
|
max-width: 700px;
|
|
height: 450px;
|
|
}
|
|
.lightbox-close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 35px;
|
|
color: #f1f1f1;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
transition: 0.3s;
|
|
}
|
|
.lightbox-close:hover,
|
|
.lightbox-close:focus {
|
|
color: #bbb;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
th, td {
|
|
text-align:left;
|
|
vertical-align: top;
|
|
padding-right: 20px;
|
|
overflow-wrap: break-word;
|
|
}
|
|
@media (max-width: 768px) {
|
|
#logo {
|
|
width:100%
|
|
}
|
|
table tr {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 0.8em;
|
|
}
|
|
table td {
|
|
padding-right: 0;
|
|
}
|
|
table td:first-child {
|
|
margin-bottom: 0.2em;
|
|
}
|
|
}
|
|
.footer {
|
|
font-size: 0.9em;
|
|
text-align: center;
|
|
padding: 20px;
|
|
background-color: #333;
|
|
color: #f0f0f0;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="logo">
|
|
<img id="logo" src="logo.png" alt="TranceMission Logo">
|
|
</div>
|
|
<h1>TranceMission Archive</h1>
|
|
<div class="intro">
|
|
<p>TranceMission is a group known for creating demos and intros, primarily in the early 1990s. These demos often showcased advanced graphics, sound, and programming techniques using Turbo Pascal and assembler. The group was led by Stefan Koelle, who was responsible for coding, graphics, and music. TranceMission's work was characterized by creative animations, sound effects, and interactive elements, making it a notable name in the demo scene of that era. Their productions were designed to run on DOS-based PCs, often pushing the hardware capabilities of the time.</p>
|
|
<p>Source code can be found on GitHub <a href="https://github.com/skoelle/dos-tcm-intros" target="_blank">https://github.com/skoelle/dos-tcm-intros</a>.</p>
|
|
</div>
|
|
<div class="program">
|
|
<img src="headline-star-intro.png" alt="Star Intro">
|
|
<div class="screenshots">
|
|
<a href="star-intro.png" onclick="openLightbox('star-intro.png'); return false;"><img src="star-intro.png" alt="Screenshot 1"></a>
|
|
<a href="https://www.youtube.com/embed/qdtqDdSPuG8?autoplay=1" onclick="openLightboxVideo(this.href); return false;">
|
|
<img src="https://img.youtube.com/vi/qdtqDdSPuG8/hqdefault.jpg" alt="Video Thumbnail">
|
|
<img src="play.png" alt="YouTube Logo" class="youtube-logo">
|
|
</a>
|
|
</div>
|
|
<p>This Pascal program is a demo that displays animated stars and text on the screen and plays sound effects.</p>
|
|
<table>
|
|
<tr>
|
|
<td><b>Initialization</b></td>
|
|
<td>Sets up graphics mode and clears the screen.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Text Display</b></td>
|
|
<td>Uses the writeline procedure to display text.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Animation</b></td>
|
|
<td>Animates stars moving across the screen.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Sound</b></td>
|
|
<td>Plays sound if a SoundBlaster card is detected.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>User Interaction</b></td>
|
|
<td>Waits for a key press to exit the demo.</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="program">
|
|
<img src="headline-logo-intro.png" alt="Logo Intro">
|
|
<div class="screenshots">
|
|
<a href="logo-intro2.png" onclick="openLightbox('logo-intro2.png'); return false;"><img src="logo-intro2.png" alt="Screenshot 1"></a>
|
|
<a href="logo-intro.png" onclick="openLightbox('logo-intro.png'); return false;"><img src="logo-intro.png" alt="Screenshot 2"></a>
|
|
<a href="https://www.youtube.com/embed/i4UOuAOxkn4?autoplay=1" onclick="openLightboxVideo(this.href); return false;">
|
|
<img src="https://img.youtube.com/vi/i4UOuAOxkn4/hqdefault.jpg" alt="Video Thumbnail">
|
|
<img src="play.png" alt="YouTube Logo" class="youtube-logo">
|
|
</a>
|
|
</div>
|
|
<p>This Pascal program is a demo that displays animated text and graphics with sound effects.</p>
|
|
<table>
|
|
<tr>
|
|
<td><b>Initialization</b></td>
|
|
<td>Sets up graphics mode and clears the screen.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Text Display</b></td>
|
|
<td>Uses the writeline and writeline2 procedures to display text.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Animation</b></td>
|
|
<td>Animates text using a sine wave effect. Speed is controlled by 'S' and 'A' keys.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Sound</b></td>
|
|
<td>Plays sound if a SoundBlaster card is detected. Volume is controlled by '+' and '-' keys.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>User Interaction</b></td>
|
|
<td>Exits when ESC, Enter, or Space is pressed.</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="program">
|
|
<img src="headline-menu-intro.png" alt="Menu Intro">
|
|
<div class="screenshots">
|
|
<a href="menu-intro1.png" onclick="openLightbox('menu-intro1.png'); return false;"><img src="menu-intro1.png" alt="Screenshot 1"></a>
|
|
<!--<a href="menu-intro2.png" onclick="openLightbox('menu-intro2.png'); return false;"><img src="menu-intro2.png" alt="Screenshot 2"></a>-->
|
|
<a href="menu-intro3.png" onclick="openLightbox('menu-intro3.png'); return false;"><img src="menu-intro3.png" alt="Screenshot 3"></a>
|
|
<a href="https://www.youtube.com/embed/BvKIsfDLH48?autoplay=1" onclick="openLightboxVideo(this.href); return false;">
|
|
<img src="https://img.youtube.com/vi/BvKIsfDLH48/hqdefault.jpg" alt="Video Thumbnail">
|
|
<img src="play.png" alt="YouTube Logo" class="youtube-logo">
|
|
</a>
|
|
|
|
</div>
|
|
<p>This Pascal program is a demo that displays a menu with animated text and graphics and plays sound effects.</p>
|
|
<table>
|
|
<tr>
|
|
<td><b>Initialization</b></td>
|
|
<td>Sets up graphics mode and clears the screen.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Text Display</b></td>
|
|
<td>Uses the writeline procedure to display text.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Animation</b></td>
|
|
<td>Animates a logo and text with a wobble effect.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>Sound</b></td>
|
|
<td>Plays sound if a SoundBlaster card is detected.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>User Interaction</b></td>
|
|
<td>Allows navigation through a menu using the keyboard and exits the demo on the exit menu point.</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="footer">
|
|
Stefan Koelle 1992 - 1995<br>
|
|
Part of <a href="/">moonweb.org</a> · <a href="/retro/">Retro Corner</a> · <a href="/impressum/">Legal Notice</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lightbox HTML -->
|
|
<div id="lightbox" class="lightbox" onclick="closeLightbox(event)">
|
|
<span class="lightbox-close" onclick="closeLightbox()">×</span>
|
|
<img class="lightbox-content" id="lightbox-img" src="">
|
|
<iframe class="lightbox-content" id="lightbox-video" width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
|
</div>
|
|
|
|
<canvas id="starfield" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;"></canvas>
|
|
<script>
|
|
(function() {
|
|
const canvas = document.getElementById('starfield');
|
|
const ctx = canvas.getContext('2d');
|
|
let w, h, scrollY = 0;
|
|
function resize() { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; }
|
|
resize();
|
|
window.addEventListener('resize', resize);
|
|
window.addEventListener('scroll', function() { scrollY = window.scrollY; }, { passive: true });
|
|
|
|
const layers = [
|
|
{ count: 80, speed: 0.3, sizeMin: 0.5, sizeMax: 1.2, alpha: 0.4 },
|
|
{ count: 50, speed: 0.7, sizeMin: 1.0, sizeMax: 2.0, alpha: 0.6 },
|
|
{ count: 25, speed: 1.5, sizeMin: 1.5, sizeMax: 3.0, alpha: 0.9 },
|
|
];
|
|
const stars = [];
|
|
for (const layer of layers) {
|
|
for (let i = 0; i < layer.count; i++) {
|
|
stars.push({
|
|
x: Math.random() * w,
|
|
y: Math.random() * h,
|
|
speed: layer.speed + Math.random() * 0.3,
|
|
size: layer.sizeMin + Math.random() * (layer.sizeMax - layer.sizeMin),
|
|
alpha: layer.alpha * (0.7 + Math.random() * 0.3),
|
|
});
|
|
}
|
|
}
|
|
|
|
function draw() {
|
|
ctx.clearRect(0, 0, w, h);
|
|
for (const s of stars) {
|
|
s.x += s.speed;
|
|
if (s.x > w + 5) { s.x = -5; s.y = Math.random() * h; }
|
|
const y = ((s.y - scrollY * 0.02) % h + h) % h;
|
|
ctx.beginPath();
|
|
ctx.arc(s.x, y, s.size, 0, Math.PI * 2);
|
|
ctx.fillStyle = 'rgba(255,255,255,' + s.alpha + ')';
|
|
ctx.fill();
|
|
}
|
|
requestAnimationFrame(draw);
|
|
}
|
|
draw();
|
|
})();
|
|
</script>
|
|
<script>
|
|
function openLightbox(src) {
|
|
document.getElementById('lightbox-img').src = src;
|
|
document.getElementById('lightbox-img').style.display = 'block';
|
|
document.getElementById('lightbox-video').style.display = 'none';
|
|
document.getElementById('lightbox').style.display = 'block';
|
|
}
|
|
|
|
function openLightboxVideo(src) {
|
|
document.getElementById('lightbox-video').src = src;
|
|
document.getElementById('lightbox-video').style.display = 'block';
|
|
document.getElementById('lightbox-img').style.display = 'none';
|
|
document.getElementById('lightbox').style.display = 'block';
|
|
}
|
|
|
|
function closeLightbox(event) {
|
|
if (event.target.id === 'lightbox' || event.target.className === 'lightbox-close') {
|
|
document.getElementById('lightbox').style.display = 'none';
|
|
document.getElementById('lightbox-video').src = '';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |