<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/favicon.ico">
<style>
body {
font-family: monospace;
background-color: black;
color: white;
margin-bottom: 100px;
}
a:link {
color: cyan;
}
a:visited {
color: magenta;
}
h1 {
color: white;
text-shadow: 0px 0px 30px purple;
}
.head {
margin-bottom: -2em;
}
.head h1 {
display: inline-block;
margin-right: 1ex;
vertical-align: top;
}
.head div {
display: inline-block;
margin-top: 2em;
vertical-align: top;
}
.head img {
margin-top: -10px;
margin-bottom: -5px;
float: right;
}
.demo {
width: 300px;
height: 169px;
border: 1px solid transparent;
}
.demo:hover {
border: 1px solid white;
}
.section {
display: relative;
min-height: 20ex;
margin-bottom: 3em;
}
.section .label {
transform: rotate(-90deg) translate(-10ex,-10ex);
width: 20ex;
margin-left: 0.5em;
margin-top: 1em;
background-color: purple;
text-align: center;
}
.section .label a:link, .section .label a:visited {
color: white;
text-decoration: none;
}
.section .sublabel {
background-color: teal;
color: purple;
}
.section .content {
margin-left: 1.5em;
}
.section .content .project {
display: inline-block;
width: 200px;
text-align: center;
margin-bottom: 1em;
margin-top: -9px;
border: 1px solid transparent;
padding-top: 10px;
padding-bottom: 10px;
}
.section .content .project:hover {
border-color: white;
}
.section .content .project .img {
display: inline-block;
width: 200px;
height: 100px;
}
.br {
margin-bottom: 1em;
}

</style>
</head>
<body>

<div class="head">
<h1>substack</h1>
<img src="images/substack.png" width="70" height="70">
</div>

<div style="float:clear;"></div>

<a name="art"></a>
<div class="section">
<div class="label"><a href="#art">art</a></div>
<div class="content">

<a href="palmdrive.html"
><img class="demo" loading="lazy" src="images/palmdrive.jpg"></a>

<a href="clouds/"
><img class="demo" loading="lazy" src="images/clouds.png"></a>

<a href="waves.html"
><img class="demo" loading="lazy" src="images/waves.jpg"></a>

<a href="tv/"
><img class="demo" loading="lazy" src="images/tv.jpg"></a>

<a href="wip/ftp3.html"
><img class="demo" loading="lazy" src="images/ftp.jpg"></a>

<a href="vine.html"
><img class="demo" loading="lazy" src="images/vine.jpg"></a>

<a href="nightscape.html"
><img class="demo" loading="lazy" src="images/nightscape.jpg"></a>

<a href="wip/train4.html"
><img class="demo" loading="lazy" src="images/train.jpg"></a>

<a href="gate.html"
><img class="demo" loading="lazy" src="images/gate.jpg"></a>

<a href="spacewalk/"
><img class="demo" loading="lazy" src="images/spacewalk.jpg"></a>

<a href="kyiv/escalator.html"
><img class="demo" loading="lazy" src="images/escalator.jpg"></a>

<a href="kyiv/bridge-glitch.html"
><img class="demo" loading="lazy" src="images/bridge-glitch.jpg"></a>

<a href="wip/building4.html"
><img class="demo" loading="lazy" src="images/building.png"></a>

<a href="igen/"
><img class="demo" loading="lazy" src="images/igen.jpg"></a>

<a href="progress/tilemesh/0.html"
><img class="demo" loading="lazy" src="images/peermaps-progress0.jpg"></a>

<a href="dialog.exe/index.html"
><img class="demo" loading="lazy" src="images/dialog.exe.jpg"></a>

<a href="vhs/azimuth.html"
><img class="demo" loading="lazy" src="images/azimuth.png"></a>

<a href="seamount/index.html"
><img class="demo" loading="lazy" src="images/seamount-hawaii.jpg"></a>

<a href="wip/chicken1.html"
><img class="demo" loading="lazy" src="images/chicken.jpg"></a>

<a href="wip/windmill1.html"
><img class="demo" loading="lazy" src="images/windmill.png"></a>

<a href="wip/wifi1.html"
><img class="demo" loading="lazy" src="images/wifi.png"></a>

<a href="septapalm.html"
><img class="demo" loading="lazy" src="images/septapalm.jpg"></a>

<a href="brickworld.html"
><img class="demo" loading="lazy" src="images/brickworld.png"></a>

<a href="dolphinwalk/"
><img class="demo" loading="lazy" src="images/dolphinwalk.jpg"></a>

<a href="mixmap/demos/ne2swr-cities.html"
><img class="demo" loading="lazy" src="images/mixmap-ne2swr-cities.jpg"></a>

<a href="wip/viewport3.html"
><img class="demo" loading="lazy" src="images/viewport.png"></a>

<a href="mixmap/demos/zoom.html"
><img class="demo" loading="lazy" src="images/mixmap-zoom.jpg"></a>

<a href="burn-barrel.html"
><img class="demo" loading="lazy" src="images/burn-barrel.png"></a>

<a href="wip/rewind11.html"
><img class="demo" loading="lazy" src="images/a.jpg"></a>

<a href="zine/luxury.html"
><img class="demo" loading="lazy" src="images/luxury.jpg"></a>

<a href="zine/meet-death.html"
><img class="demo" loading="lazy" src="images/meet-death.jpg"></a>

<a href="zine/this-is-ikea.html"
><img class="demo" loading="lazy" src="images/this-is-ikea.jpg"></a>

<a href="zine/exercise-exactly-4-minutes-per-day.html"
><img class="demo" loading="lazy" src="images/exercise-exactly-4-minutes-per-day.jpg"></a>

<a href="wip/dog1.html"
><img class="demo" loading="lazy" src="images/dog.png"></a>

<a href="wip/suntown0.html#cats"
><img class="demo" loading="lazy" src="images/suntown.jpg"></a>

<a href="wire-points-teapot.html"
><img class="demo" loading="lazy" src="images/wire-points-teapot.jpg"></a>

<a href="galaxytube.html"
><img class="demo" loading="lazy" src="images/galaxytube.jpg"></a>

<a href="wip/plant1.html"
><img class="demo" loading="lazy" src="images/plant.jpg"></a>

<a href="atomic-surgery/index.html"
><img class="demo" loading="lazy" src="images/atomic-surgery.jpg"></a>

<a href="flooded/cruiser.html"
><img class="demo" loading="lazy" src="images/flooded-cruiser.jpg"></a>

<a href="briefcase/index.html"
><img class="demo" loading="lazy" src="images/briefcase.jpg"></a>

<a href="wip/gears3.html"
><img class="demo" loading="lazy" src="images/bike-chain.png"></a>

<a href="shapecreatures.html"
><img class="demo" loading="lazy" src="images/shapecreatures.jpg"></a>

<a href="undersea-cables/index.html"
><img class="demo" loading="lazy" src="images/undersea-cables.png"></a>

<a href="stellar-disc.html"
><img class="demo" loading="lazy" src="images/stellar-disc.jpg"></a>

<a href="neon-alley.html"
><img class="demo" loading="lazy" src="images/neon-alley.jpg"></a>

<a href="example/scene-geometry-fast.html"
><img class="demo" loading="lazy" src="images/cameras.png"></a>

<a href="gears.html"
><img class="demo" loading="lazy" src="images/gears.jpg"></a>

<a href="horseshoe.html"
><img class="demo" loading="lazy" src="images/horseshoe.jpg"></a>

<a href="morphgrid.html"
><img class="demo" loading="lazy" src="images/morphgrid.jpg"></a>

<a href="spiral.html"
><img class="demo" loading="lazy" src="images/spiral.jpg"></a>

<a href="wip/squiggles0.html"
><img class="demo" loading="lazy" src="images/squiggles.png"></a>

<a href="turnspike.html"
><img class="demo" loading="lazy" src="images/turnspike.jpg"></a>

<a href="warpspace.html"
><img class="demo" loading="lazy" src="images/warpspace.jpg"></a>

<a href="feedbarf/index.html"
><img class="demo" loading="lazy" src="images/feedbarf.jpg"></a>

<a href="conhart-swirl.html"
><img class="demo" loading="lazy" src="images/conhart-swirl.jpg"></a>

<a href="spooky.html"
><img class="demo" loading="lazy" src="images/spooky.jpg"></a>

<a href="termokiss.html"
><img class="demo" loading="lazy" src="images/termokiss.jpg"></a>

<a href="projres/index.html#64"
><img class="demo" loading="lazy" src="images/projres.jpg"></a>

<a href="°ŗÅñġ€Ŧəá/"
><img class="demo" loading="lazy" src="images/orangetea.jpg"></a>

<a href="earth/7.html"
><img class="demo" loading="lazy" src="images/earth.jpg"></a>

<a href="illuminatibunny/index.html"
><img class="demo" loading="lazy" src="images/illuminatibunny.jpg"></a>

<a href="shardcore.html"
><img class="demo" loading="lazy" src="images/shardcore.jpg"></a>

<a href="skelly-inside/index.html"
><img class="demo" loading="lazy" src="images/skelly-inside.jpg"></a>

<a href="itsssttime.html"
><img class="demo" loading="lazy" src="images/itsssttime.jpg"></a>

<a href="retrolux.html"
><img class="demo" loading="lazy" src="images/retrolux.jpg"></a>

<a href="vectro.html"
><img class="demo" loading="lazy" src="images/vectro.jpg"></a>

<a href="blobby.html"
><img class="demo" loading="lazy" src="images/blobby.jpg"></a>

<a href="cybersprite.html"
><img class="demo" loading="lazy" src="images/cybersprite.jpg"></a>

<a href="eye.html"
><img class="demo" loading="lazy" src="images/eye.jpg"></a>

<a href="cacto.html"
><img class="demo" loading="lazy" src="images/cacto.jpg"></a>

<a href="dance/0.html#100"
><img class="demo" loading="lazy" src="images/dance.jpg"></a>

<a href="sundial.html"
><img class="demo" loading="lazy" src="images/sundial.jpg"></a>

<a href="catparty.html"
><img class="demo" loading="lazy" src="images/catparty.jpg"></a>

<a href="candle.html"
><img class="demo" loading="lazy" src="images/candle.jpg"></a>

<a href="col/index.html"
><img class="demo" loading="lazy" src="images/col.jpg"></a>

<a href="volcano/3.html"
><img class="demo" loading="lazy" src="images/volcano.jpg"></a>

<a href="atmoblink.html"
><img class="demo" loading="lazy" src="images/atmoblink.jpg"></a>

<a href="reconfigure.html"
><img class="demo" loading="lazy" src="images/reconfigure.jpg"></a>

<a href="orb.html"
><img class="demo" loading="lazy" src="images/orb.jpg"></a>

<a href="birds.html"
><img class="demo" loading="lazy" src="images/birds.jpg"></a>

<a href="sunbeam.html"
><img class="demo" loading="lazy" src="images/sunbeam.jpg"></a>

<a href="blobcat/"
><img class="demo" loading="lazy" src="images/blobcat.jpg"></a>

<a href="spacebubble.html"
><img class="demo" loading="lazy" src="images/spacebubble.jpg"></a>

<a href="pxr.html"
><img class="demo" loading="lazy" src="images/pxr.jpg"></a>

<a href="ebunny.html"
><img class="demo" loading="lazy" src="images/ebunny.jpg"></a>

<a href="cybertea.html"
><img class="demo" loading="lazy" src="images/cybertea.jpg"></a>

<a href="wip/paddle0.html"
><img class="demo" loading="lazy" src="images/paddle0.jpg"></a>

<a href="redgrid.html"
><img class="demo" loading="lazy" src="images/redgrid.jpg"></a>

<a href="rovercube/index.html"
><img class="demo" loading="lazy" src="images/rovercube.jpg"></a>

<a href="meowave/"
><img class="demo" loading="lazy" src="images/meowave.jpg"></a>
</div>
</div>

<div>
email: substack@gmail.com
</div>

<div class="br"></div>

<div>
<a href="https://neocities.org/site/substack">follow me on neocities</a>
</div>

<script>
var images = document.querySelectorAll('img')
for (var i = 0; i < images.length; i++) {
images[i].addEventListener('error', function () {
this.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAAD'
+ 'EUlfTAAAALUlEQVQYV2P8b2//n/HgQUYGNAAWB4mhK4Dx4TpgAsgKUYxDN4GwTpx24nM'
+ 'tAFEYMQA8p7M4AAAAAElFTkSuQmCC'
})
}
</script>
</body>
</html>