<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='preconnect' href='https://wasm.noahcohn.com'>
<link rel='preconnect' href='https://js.1ink.us'>
<link rel='preconnect' href='https://glsl.1ink.us'>
<link rel='preconnect' href='https://css.1ink.us'>
<title>B3HD</title>
<link charset=utf-8 crossorigin rel='stylesheet' href='https://css.1ink.us/sh1.1iss'/>
	<link rel="stylesheet" href="./style.css">
	<script>
	  //Google Analytics
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.charset='utf-8';a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-54755897-1', 'auto');
	  ga('send', 'pageview');
	</script>
	<script type="text/javascript" src="./GLFluid.js"></script>

	<script>


		window.addEventListener ("touchmove", function (event) { event.preventDefault (); }, false);
		if (typeof window.devicePixelRatio != 'undefined' && window.devicePixelRatio > 2) {
			var meta = document.getElementById ("viewport");
			meta.setAttribute ('content', 'width=device-width, initial-scale=' + (2 / window.devicePixelRatio) + ', user-scalable=no');
		}


	</script>

	<style>
		html,body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
		#content {
			background: #000000;
			width: 100%;
			height: 100%;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			cursor: pointer;
		}

	</style>

	<!-- Icon Font -->
	<link rel="stylesheet" type="text/css" href="iconfont.css">

	<style>
	/* green left border for selects */
	.dg .cr.object{
		border-left: 3px solid #5CB36D;
	}

	/* disabled row style */
	.dg .cr.disabled{
		border-left-color: #353535 !important;
	}
	.dg .cr input[disabled]{
		background: none !important;
		color: #8C8C8C !important;
	}

	/* new row type: link */
	.dg .cr.link, .dg .cr.link .property-name, .dg .cr.link *{
		cursor: pointer;
	}

	.dg .cr.link:hover{
		background: #111;
	}

	.dg .cr.footer, .dg .cr.footer .property-name, .dg .cr.footer *{
		font-size: 110%;
	}

	/* new row type: footer */
	.dg .cr.footer{
		color: #939699;
		transition: color 0.2s;
	}
	.dg .cr.footer:hover{
		color: #2FA1D6;
		transition: color 0.2s;
	}

	/* row icon */
	.dg .cr [class^="icon-"], [class*=" icon-"]{
		font-size: 150%;
		float: right;
		text-align: center;
		width: 27px;
	}
	</style>
	<script type="text/javascript" src="./dat.gui.min.js"></script>

<style>
.button {
  /* Initial button styles */
  background-color: #007bff; /* Blue */
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s ease; /* Add smooth transition for all properties */
}

.button:active {
  /* Styles when the button is clicked/held down */
  background-color: #0056b3; /* Darker blue */
  transform: translateY(2px); /* Move down slightly */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}
.chrt{
height: 60px;
width: 60px;
position: absolute;
}
.note{
height: 20px;
width: 20px;
font-family: "Audiowide", sans-serif;
font-size: 100%;
border: 1px solid black;
background-color: lightblue;
position: absolute;
}
</style>
</head>
<body style="background-color:white;">
<img id=splash1 src=./image/shroud.jpg style='background-color:rgba(233,233,233,0.0);display:block;position:absolute;height:100vh;width:100vw;z-index:3590;'></img>
<img id=splash2 src=./image/spinner.gif style='background-color:rgba(47,47,47,1.0);display:block;top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;height:20vh;width:20vh;z-index:3591;'></img>
<nav id=menu>
<section class=menu-section id=menu-sections>
<br>
<div style='text-align:center;'>
TIMESLIDER<br>(Seconds between video changes)</div>
<br><br>
<ul class=menu-section-list>
<div id=mnu>
<br><br>

<select id=resMode hidden style='position:absolute;z-index:1;pointer-events:auto;'>
<option value="false">False</option>
<option value="true">True</option>
</select>
<div id=slideframe>
<input type=text id=timeslider>
</div></div></ul></section>
<div class="selectboxs">
<select id=sh1>
<option value="Random">Random</option>
<option value="movewithouttracvveling">Move Without Travelling</option>
<option value="Default">Default</option>
<option value="crystalineballs">Crystal Palace</option>
<option value="WOOL">Infinite Wool</option>
<option value="hovercubes">Demoscene Cube</option>
<option value="melter">Northern Melt</option>
<option value="PSYfractal">Psychedelic Fractal</option>
<option value="EYEgod">The Eye of God</option>


</select>
</div>
<br />
<br />
<div>
<select name="build" id="builds">
    <option value="v3001test-1023">v3001test-1023</option>

  <optgroup label="Production Builds:">
    <option value=""></option>
  </optgroup>
  <optgroup label="Development Builds:">
    <option value="s3027">s3027</option>
  </optgroup>
    <optgroup label="Testing Builds:">
    <option value="s3027test">s3027test</option>
    <option value="w3001">w3001</option>
  </optgroup>
</select>
<script>
var mySelect = document.getElementById("builds");
var firstValue = mySelect.options[0].value;
mySelect.value = firstValue;
</script>
</div>
<div class="selectboxv">
<select id=vi1>
<option value="Default">Default</option>
<option value="https://b3hd.1ink.us/">B3hanced</option>
<option value="https://test.1ink.us/bbb3/">Bevis and Butthead</option>
<option value="https://test.1ink.us/1it3/">Lightning</option>
<option value="https://test.1ink.us/l4zr/">Lazers</option>
</select>
</div>
<br />
<br />

<div class="selectboxv">
<select id=vi2>
<option value="https://b3hd.1ink.us/video">B3hanced</option>
<option value="https://test.1ink.us/bbb3/video">Bevis and Butthead</option>
<option value="https://test.1ink.us/1it3/video">Lightning</option>
<option value="https://test.1ink.us/l4zr/video">Lazers</option>
</select>
</div>
<br />
<br />

<div class="selectboxv">
<select id=vi3>
<option value="https://b3hd.1ink.us/video">B3hanced</option>
<option value="https://test.1ink.us/bbb3/video">Bevis and Butthead</option>
<option value="https://test.1ink.us/1it3/video">Lightning</option>
<option value="https://test.1ink.us/l4zr/video">Lazers</option>
</select>
</div>
</nav>
<main id=panel>

	<div id="content"></div>

	<script type="text/javascript">
		lime.embed ("content", 0, 0, "FFFFFF");
	</script>

	<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" style="cursor:url(cursor.cur),auto;"></canvas>
	<div id="footer">
		<textarea class="emscripten" id="output" rows=5></textarea>
	</div>
	<script type="text/javascript">
		lime.embed ("content", 0, 0, "FFFFFF");
	</script>

<iframe src=./bezz.1ink id=circle title='Circular mask'></iframe>
<input type=button id=startBtn style='background-color:gold;position:absolute;display:block;left:6%;top:9%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
<input type=button id=menuBtn style='background-color:black;position:absolute;display:block;left:3%;top:5%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
<input type=button id=musicBtn style='background-color:cyan;position:absolute;display:block;left:3%;bottom:5%;z-index:3200;border:6px solid green;border-radius:20%;' />
<input type=button id=startBtn5 style='background-color:yellow;position:absolute;display:block;left:2%;top:9%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;'></input>
<input type=button id=startBtn2 style='background-color:gold;position:absolute;display:block;left:9%;top:9%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
<input type=button id=startBtnC style='background-color:green;position:absolute;display:block;left:5%;top:12%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
<input type=button id=startBtnI style='background-color:black;position:absolute;display:block;left:15%;top:12%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
<input type=button id=mviBtn style='background-color:black;position:absolute;display:block;left:15%;top:9%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
<input type=button id=uniUp style='background-color:black;position:absolute;display:block;left:3%;top:50%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
<input type=button id=uniDown style='background-color:black;position:absolute;display:block;left:7%;top:50%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
<input type=button id=viewUp style='background-color:black;position:absolute;display:block;left:5%;top:46%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
<input type=button id=viewDown style='background-color:black;position:absolute;display:block;left:5%;top:54%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
<input type=button id=sizeUp style='background-color:black;position:absolute;display:block;left:5%;top:86%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
<input type=button id=sizeDown style='background-color:black;position:absolute;display:block;left:5%;top:90%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
<input type=button id=moveDown style='background-color:black;position:absolute;display:block;right:5%;top:90%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
<input type=button id=moveUp style='background-color:black;position:absolute;display:block;right:5%;top:86%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
<input type=button id=moveLeft style='background-color:black;position:absolute;display:block;right:3%;top:90%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
<input type=button id=moveRight style='background-color:black;position:absolute;display:block;right:7%;top:90%;z-index:3200;border:6px solid #e7e7e7;border-radius:20%;' />
<input class="button" type=button id=moveFwd style='background-color:gold;position:absolute;display:none;wdith:6vh;height:5vh;left:47%;bottom:3%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
<input class="button" type=button id=cruiseFwd style='background-color:red;position:absolute;display:none;wdith:6vh;height:5vh;left:47%;bottom:7%;z-index:3200;border:4px solid #e7e7e7;border-radius:17%;' />
<div id=outText style="opacity:0.0;background-color:green;position:absolute;top:50vh;left:47vw;z-index:4200;"></div>
<div id=outText1 style="opacity:0.0;background-color:green;position:absolute;top:52vh;left:47vw;z-index:4200;"></div>
<div id=outText2 style="opacity:0.0;background-color:green;position:absolute;top:54vh;left:47vw;z-index:4200;"></div>
<div class=emscripten id=stat></div>
<div class=emscripten id=status></div>
<div class=emscripten>
<progress value=0 max=100 id=progress></progress>
</div>
<input type=checkbox id="di" hidden />
  <div hidden=true id=modulePath>https://wasm.noahcohn.com/b3hd/w0-010-mod.1ijs</div>

<div hidden=true id=path>https://glsl.1ink.us/wgsl/fflowers2.wgsl</div>
<div hidden=true id=computePath>https://glsl.1ink.us/wgsl/compute_056vx2.wgsl</div>
<div hidden=true id=computePathNovid>https://glsl.1ink.us/wgsl/compute_056x.wgsl</div>
<div hidden=true id=fragPath>https://glsl.1ink.us/wgsl/fragment_005.wgsl</div>
<div hidden=true id=vertPath>https://glsl.1ink.us/wgsl/vertex_003.wgsl</div>
<div id=ffire hidden>0</div>
<div id=iwid hidden>0</div>
<div id=ihig hidden>0</div>
<div id=pmhig hidden>0</div>
<div id=canvasSize hidden>0</div>
<div id=floatHigh hidden>1</div>
<div id=wid hidden>0</div>
<div id=hig hidden>0</div>
<div id=tileNum hidden>0</div>
<div id=vsiz hidden>0</div>
<div id=lwid hidden>0</div>
<div id=lhig hidden>0</div>
<div id=ihid hidden>0</div>
<div id=tim hidden>2500</div>
<div id=shut hidden>2</div>
<div id=isrc hidden>./intro.mp4</div>
<div id=idur hidden>0</div>
<div id=itim hidden>0</div>
<div id=smd hidden>110.10</div>
<div id=wrap>
<div id=contain1>
<canvas class=emscripten id=scanvas style='pointer-events:auto;display:block;position:absolute;z-index:3000;background-color:rgba(233,233,233,1.0);top:0;height:100vh;width:100vh;image-rendering:auto;transform:scaleY(-1.0);'></canvas>
<div id=contain1a style='height:75%;width:75%;'>
</div>
</div>
<div id=contain2>


<canvas id=bcanvas hidden style='pointer-events:none;display:none;z-index:2100;position:absolute;height:100vh;width:100vh;margin-left:auto;margin-right:auto;background-color:rgba(0,255,0,1.0);top:0;image-rendering:auto;'></canvas>
</div>
</main>
<div>
<img id=ivi src=./image/ferret.jpg></img>
</div>
<div style='pointer-events:none;height:100vh;'>
<video hidden src=./image/solar.gif loop crossorigin playsinline id=mvie preload=auto style='pointer-events:none;' />
</div>
<div style='pointer-events:none;height:100vh;'>
<video hidden muted crossorigin playsinline id=ldv preload=auto style='pointer-events:none;' />
</div></div>
<audio crossorigin id=track preload=none hidden style='pointer-events:none;'></audio>
</body>

<script type="module">

document.getElementById("startBtn").addEventListener('click',function(){
// document.getElementById('mvi').play();
});
document.getElementById("mviBtn").addEventListener('click',function(){
// document.getElementById('mvi').play();
});

document.getElementById("startBtn5").addEventListener('click',function(){

var canvv=document.querySelector("#canvas");
canvv.id='mvi';
canvv.hidden=true;
canvv.opacity=0.3;
canvv.style.zIndex=1;
console.log(canvv);

var mySelect = document.getElementById("builds");
var urlSource=mySelect.value;
let scr=document.createElement("script");
scr.async=true;
scr.charset='utf-8';
scr.type='text/javascript';
// scr.defer=true;
scr.src="https://wasm.noahcohn.com/b3hd/w0-010-load.1ijs";
document.body.appendChild(scr);

 setTimeout(function(){
var Module = libload();
Module.onRuntimeInitialized = function() {
    Module.callMain();  // Call the main function
};
// document.getElementById('startBtn').click();
},2500);
});

setTimeout(function(){
document.querySelector('#splash2').style.zIndex=3000;
document.querySelector('#splash2').style.display='none';
},4200);
setTimeout(function(){
document.querySelector('#splash1').style.zIndex=3000;
document.querySelector('#splash1').style.display='none';
},4500);

setTimeout(function(){
document.getElementById('vsiz').innerHTML=parseInt(window.innerHeight,10);
// document.getElementById('vsiz').innerHTML=parseInt(window.innerHeight,10)*3.0;
document.getElementById('startBtn5').click();
},1500);

setTimeout(function(){

window.scrollTo({
  top: 0,
  left: 0,
  behavior: "smooth",
  });

//  document.getElementById('startBtn').click();


  },1500);

</script>