Mercurial > web

changeset 14:8f0b52a3cb69

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add module on front page
author Paper <mrpapersonic@gmail.com>
date Mon, 31 May 2021 11:55:12 -0400
parents e7ca289b45ec
children 7bfa77838f33
files chiptune2.js index.html overoff-f.mod setup.bmp style.css
diffstat 5 files changed, 428 insertions(+), 378 deletions(-) [+]
line wrap: on
line diff
--- a/chiptune2.js	Mon May 31 11:21:27 2021 -0400
+++ b/chiptune2.js	Mon May 31 11:55:12 2021 -0400
@@ -1,259 +1,259 @@
-// constants
-const OPENMPT_MODULE_RENDER_STEREOSEPARATION_PERCENT = 2
-const OPENMPT_MODULE_RENDER_INTERPOLATIONFILTER_LENGTH = 1
-
-// audio context
-var ChiptuneAudioContext = window['AudioContext'] || window['webkitAudioContext'];
-
-// config
-var ChiptuneJsConfig = function (repeatCount, stereoSeparation, interpolationFilter, context)
-{
-  this.repeatCount = repeatCount;
-  this.stereoSeparation = stereoSeparation;
-  this.interpolationFilter = interpolationFilter;
-  this.context = context;
-}
-
-ChiptuneJsConfig.prototype.constructor = ChiptuneJsConfig;
-
-// player
-var ChiptuneJsPlayer = function (config) {
-  this.config = config;
-  this.context = config.context || new ChiptuneAudioContext();
-  this.currentPlayingNode = null;
-  this.handlers = [];
-  this.touchLocked = true;
-}
-
-ChiptuneJsPlayer.prototype.constructor = ChiptuneJsPlayer;
-
-// event handlers section
-ChiptuneJsPlayer.prototype.fireEvent = function (eventName, response) {
-  var  handlers = this.handlers;
-  if (handlers.length) {
-    handlers.forEach(function (handler) {
-      if (handler.eventName === eventName) {
-        handler.handler(response);
-      }
-    })
-  }
-}
-
-ChiptuneJsPlayer.prototype.addHandler = function (eventName, handler) {
-  this.handlers.push({eventName: eventName, handler: handler});
-}
-
-ChiptuneJsPlayer.prototype.onEnded = function (handler) {
-  this.addHandler('onEnded', handler);
-}
-
-ChiptuneJsPlayer.prototype.onError = function (handler) {
-  this.addHandler('onError', handler);
-}
-
-// metadata
-ChiptuneJsPlayer.prototype.duration = function() {
-  return libopenmpt._openmpt_module_get_duration_seconds(this.currentPlayingNode.modulePtr);
-}
-
-ChiptuneJsPlayer.prototype.getCurrentRow = function() {
-  return libopenmpt._openmpt_module_get_current_row(this.currentPlayingNode.modulePtr);  
-}
-
-ChiptuneJsPlayer.prototype.getCurrentPattern = function() {
-  return libopenmpt._openmpt_module_get_current_pattern(this.currentPlayingNode.modulePtr);  
-}
-
-ChiptuneJsPlayer.prototype.getCurrentOrder = function() {
-  return libopenmpt._openmpt_module_get_current_order(this.currentPlayingNode.modulePtr);  
-}
-
-ChiptuneJsPlayer.prototype.metadata = function() {
-  var data = {};
-  var keys = Pointer_stringify(libopenmpt._openmpt_module_get_metadata_keys(this.currentPlayingNode.modulePtr)).split(';');
-  var keyNameBuffer = 0;
-  for (var i = 0; i < keys.length; i++) {
-    keyNameBuffer = libopenmpt._malloc(keys[i].length + 1);
-    writeAsciiToMemory(keys[i], keyNameBuffer);
-    data[keys[i]] = Pointer_stringify(libopenmpt._openmpt_module_get_metadata(this.currentPlayingNode.modulePtr, keyNameBuffer));
-    libopenmpt._free(keyNameBuffer);
-  }
-  return data;
-}
-
-ChiptuneJsPlayer.prototype.module_ctl_set = function(ctl, value) {
-  return libopenmpt.ccall('openmpt_module_ctl_set', 'number', ['number', 'string', 'string'], [this.currentPlayingNode.modulePtr, ctl, value]) === 1;
-}
-
-// playing, etc
-ChiptuneJsPlayer.prototype.unlock = function() {
-
-  var context = this.context;
-  var buffer = context.createBuffer(1, 1, 22050);
-  var unlockSource = context.createBufferSource();
-
-  unlockSource.buffer = buffer;
-  unlockSource.connect(context.destination);
-  unlockSource.start(0);
-
-  this.touchLocked = false;
-}
-
-ChiptuneJsPlayer.prototype.load = function(input, callback) {
-
-  if (this.touchLocked) {
-    this.unlock();
-  }
-
-  var player = this;
-
-  if (input instanceof File) {
-    var reader = new FileReader();
-    reader.onload = function() {
-      return callback(reader.result); // no error
-    }.bind(this);
-    reader.readAsArrayBuffer(input);
-  } else {
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', input, true);
-    xhr.responseType = 'arraybuffer';
-    xhr.onload = function(e) {
-      if (xhr.status === 200) {
-        return callback(xhr.response); // no error
-      } else {
-        player.fireEvent('onError', {type: 'onxhr'});
-      }
-    }.bind(this);
-    xhr.onerror = function() {
-      player.fireEvent('onError', {type: 'onxhr'});
-    };
-    xhr.onabort = function() {
-      player.fireEvent('onError', {type: 'onxhr'});
-    };
-    xhr.send();
-  }
-}
-
-ChiptuneJsPlayer.prototype.play = function(buffer) {
-  this.stop();
-  var processNode = this.createLibopenmptNode(buffer, this.config);
-  if (processNode == null) {
-    return;
-  }
-
-  // set config options on module
-  libopenmpt._openmpt_module_set_repeat_count(processNode.modulePtr, this.config.repeatCount);
-  libopenmpt._openmpt_module_set_render_param(processNode.modulePtr, OPENMPT_MODULE_RENDER_STEREOSEPARATION_PERCENT, this.config.stereoSeparation);
-  libopenmpt._openmpt_module_set_render_param(processNode.modulePtr, OPENMPT_MODULE_RENDER_INTERPOLATIONFILTER_LENGTH, this.config.interpolationFilter);
-
-  this.currentPlayingNode = processNode;
-  processNode.connect(this.context.destination);
-}
-
-ChiptuneJsPlayer.prototype.stop = function() {
-  if (this.currentPlayingNode != null) {
-    this.currentPlayingNode.disconnect();
-    this.currentPlayingNode.cleanup();
-    this.currentPlayingNode = null;
-  }
-}
-
-ChiptuneJsPlayer.prototype.togglePause = function() {
-	if (this.currentPlayingNode != null) {
-    this.currentPlayingNode.togglePause();
-  }
-}
-
-ChiptuneJsPlayer.prototype.createLibopenmptNode = function(buffer, config) {
-  // TODO error checking in this whole function
-
-  var maxFramesPerChunk = 4096;
-  var processNode = this.context.createScriptProcessor(2048, 0, 2);
-  processNode.config = config;
-  processNode.player = this;
-  var byteArray = new Int8Array(buffer);
-  var ptrToFile = libopenmpt._malloc(byteArray.byteLength);
-  libopenmpt.HEAPU8.set(byteArray, ptrToFile);
-  processNode.modulePtr = libopenmpt._openmpt_module_create_from_memory(ptrToFile, byteArray.byteLength, 0, 0, 0);
-  processNode.paused = false;
-  processNode.leftBufferPtr  = libopenmpt._malloc(4 * maxFramesPerChunk);
-  processNode.rightBufferPtr = libopenmpt._malloc(4 * maxFramesPerChunk);
-  processNode.cleanup = function() {
-    if (this.modulePtr != 0) {
-      libopenmpt._openmpt_module_destroy(this.modulePtr);
-      this.modulePtr = 0;
-    }
-    if (this.leftBufferPtr != 0) {
-      libopenmpt._free(this.leftBufferPtr);
-      this.leftBufferPtr = 0;
-    }
-    if (this.rightBufferPtr != 0) {
-      libopenmpt._free(this.rightBufferPtr);
-      this.rightBufferPtr = 0;
-    }
-  }
-  processNode.stop = function() {
-    this.disconnect();
-    this.cleanup();
-  }
-  processNode.pause = function() {
-    this.paused = true;
-  }
-  processNode.unpause = function() {
-    this.paused = false;
-  }
-  processNode.togglePause = function() {
-    this.paused = !this.paused;
-  }
-  processNode.onaudioprocess = function(e) {
-    var outputL = e.outputBuffer.getChannelData(0);
-    var outputR = e.outputBuffer.getChannelData(1);
-    var framesToRender = outputL.length;
-    if (this.ModulePtr == 0) {
-      for (var i = 0; i < framesToRender; ++i) {
-        outputL[i] = 0;
-        outputR[i] = 0;
-      }
-      this.disconnect();
-      this.cleanup();
-      return;
-    }
-    if (this.paused) {
-      for (var i = 0; i < framesToRender; ++i) {
-        outputL[i] = 0;
-        outputR[i] = 0;
-      }
-      return;
-    }
-    var framesRendered = 0;
-    var ended = false;
-    var error = false;
-    while (framesToRender > 0) {
-      var framesPerChunk = Math.min(framesToRender, maxFramesPerChunk);
-      var actualFramesPerChunk = libopenmpt._openmpt_module_read_float_stereo(this.modulePtr, this.context.sampleRate, framesPerChunk, this.leftBufferPtr, this.rightBufferPtr);
-      if (actualFramesPerChunk == 0) {
-        ended = true;
-        // modulePtr will be 0 on openmpt: error: openmpt_module_read_float_stereo: ERROR: module * not valid or other openmpt error
-        error = !this.modulePtr;
-      }
-      var rawAudioLeft = libopenmpt.HEAPF32.subarray(this.leftBufferPtr / 4, this.leftBufferPtr / 4 + actualFramesPerChunk);
-      var rawAudioRight = libopenmpt.HEAPF32.subarray(this.rightBufferPtr / 4, this.rightBufferPtr / 4 + actualFramesPerChunk);
-      for (var i = 0; i < actualFramesPerChunk; ++i) {
-        outputL[framesRendered + i] = rawAudioLeft[i];
-        outputR[framesRendered + i] = rawAudioRight[i];
-      }
-      for (var i = actualFramesPerChunk; i < framesPerChunk; ++i) {
-        outputL[framesRendered + i] = 0;
-        outputR[framesRendered + i] = 0;
-      }
-      framesToRender -= framesPerChunk;
-      framesRendered += framesPerChunk;
-    }
-    if (ended) {
-      this.disconnect();
-      this.cleanup();
-      error ? processNode.player.fireEvent('onError', {type: 'openmpt'}) : processNode.player.fireEvent('onEnded');
-    }
-  }
-  return processNode;
-}
+// constants
+const OPENMPT_MODULE_RENDER_STEREOSEPARATION_PERCENT = 2
+const OPENMPT_MODULE_RENDER_INTERPOLATIONFILTER_LENGTH = 1
+
+// audio context
+var ChiptuneAudioContext = window['AudioContext'] || window['webkitAudioContext'];
+
+// config
+var ChiptuneJsConfig = function (repeatCount, stereoSeparation, interpolationFilter, context)
+{
+  this.repeatCount = repeatCount;
+  this.stereoSeparation = stereoSeparation;
+  this.interpolationFilter = interpolationFilter;
+  this.context = context;
+}
+
+ChiptuneJsConfig.prototype.constructor = ChiptuneJsConfig;
+
+// player
+var ChiptuneJsPlayer = function (config) {
+  this.config = config;
+  this.context = config.context || new ChiptuneAudioContext();
+  this.currentPlayingNode = null;
+  this.handlers = [];
+  this.touchLocked = true;
+}
+
+ChiptuneJsPlayer.prototype.constructor = ChiptuneJsPlayer;
+
+// event handlers section
+ChiptuneJsPlayer.prototype.fireEvent = function (eventName, response) {
+  var  handlers = this.handlers;
+  if (handlers.length) {
+    handlers.forEach(function (handler) {
+      if (handler.eventName === eventName) {
+        handler.handler(response);
+      }
+    })
+  }
+}
+
+ChiptuneJsPlayer.prototype.addHandler = function (eventName, handler) {
+  this.handlers.push({eventName: eventName, handler: handler});
+}
+
+ChiptuneJsPlayer.prototype.onEnded = function (handler) {
+  this.addHandler('onEnded', handler);
+}
+
+ChiptuneJsPlayer.prototype.onError = function (handler) {
+  this.addHandler('onError', handler);
+}
+
+// metadata
+ChiptuneJsPlayer.prototype.duration = function() {
+  return libopenmpt._openmpt_module_get_duration_seconds(this.currentPlayingNode.modulePtr);
+}
+
+ChiptuneJsPlayer.prototype.getCurrentRow = function() {
+  return libopenmpt._openmpt_module_get_current_row(this.currentPlayingNode.modulePtr);  
+}
+
+ChiptuneJsPlayer.prototype.getCurrentPattern = function() {
+  return libopenmpt._openmpt_module_get_current_pattern(this.currentPlayingNode.modulePtr);  
+}
+
+ChiptuneJsPlayer.prototype.getCurrentOrder = function() {
+  return libopenmpt._openmpt_module_get_current_order(this.currentPlayingNode.modulePtr);  
+}
+
+ChiptuneJsPlayer.prototype.metadata = function() {
+  var data = {};
+  var keys = Pointer_stringify(libopenmpt._openmpt_module_get_metadata_keys(this.currentPlayingNode.modulePtr)).split(';');
+  var keyNameBuffer = 0;
+  for (var i = 0; i < keys.length; i++) {
+    keyNameBuffer = libopenmpt._malloc(keys[i].length + 1);
+    writeAsciiToMemory(keys[i], keyNameBuffer);
+    data[keys[i]] = Pointer_stringify(libopenmpt._openmpt_module_get_metadata(this.currentPlayingNode.modulePtr, keyNameBuffer));
+    libopenmpt._free(keyNameBuffer);
+  }
+  return data;
+}
+
+ChiptuneJsPlayer.prototype.module_ctl_set = function(ctl, value) {
+  return libopenmpt.ccall('openmpt_module_ctl_set', 'number', ['number', 'string', 'string'], [this.currentPlayingNode.modulePtr, ctl, value]) === 1;
+}
+
+// playing, etc
+ChiptuneJsPlayer.prototype.unlock = function() {
+
+  var context = this.context;
+  var buffer = context.createBuffer(1, 1, 22050);
+  var unlockSource = context.createBufferSource();
+
+  unlockSource.buffer = buffer;
+  unlockSource.connect(context.destination);
+  unlockSource.start(0);
+
+  this.touchLocked = false;
+}
+
+ChiptuneJsPlayer.prototype.load = function(input, callback) {
+
+  if (this.touchLocked) {
+    this.unlock();
+  }
+
+  var player = this;
+
+  if (input instanceof File) {
+    var reader = new FileReader();
+    reader.onload = function() {
+      return callback(reader.result); // no error
+    }.bind(this);
+    reader.readAsArrayBuffer(input);
+  } else {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', input, true);
+    xhr.responseType = 'arraybuffer';
+    xhr.onload = function(e) {
+      if (xhr.status === 200) {
+        return callback(xhr.response); // no error
+      } else {
+        player.fireEvent('onError', {type: 'onxhr'});
+      }
+    }.bind(this);
+    xhr.onerror = function() {
+      player.fireEvent('onError', {type: 'onxhr'});
+    };
+    xhr.onabort = function() {
+      player.fireEvent('onError', {type: 'onxhr'});
+    };
+    xhr.send();
+  }
+}
+
+ChiptuneJsPlayer.prototype.play = function(buffer) {
+  this.stop();
+  var processNode = this.createLibopenmptNode(buffer, this.config);
+  if (processNode == null) {
+    return;
+  }
+
+  // set config options on module
+  libopenmpt._openmpt_module_set_repeat_count(processNode.modulePtr, this.config.repeatCount);
+  libopenmpt._openmpt_module_set_render_param(processNode.modulePtr, OPENMPT_MODULE_RENDER_STEREOSEPARATION_PERCENT, this.config.stereoSeparation);
+  libopenmpt._openmpt_module_set_render_param(processNode.modulePtr, OPENMPT_MODULE_RENDER_INTERPOLATIONFILTER_LENGTH, this.config.interpolationFilter);
+
+  this.currentPlayingNode = processNode;
+  processNode.connect(this.context.destination);
+}
+
+ChiptuneJsPlayer.prototype.stop = function() {
+  if (this.currentPlayingNode != null) {
+    this.currentPlayingNode.disconnect();
+    this.currentPlayingNode.cleanup();
+    this.currentPlayingNode = null;
+  }
+}
+
+ChiptuneJsPlayer.prototype.togglePause = function() {
+	if (this.currentPlayingNode != null) {
+    this.currentPlayingNode.togglePause();
+  }
+}
+
+ChiptuneJsPlayer.prototype.createLibopenmptNode = function(buffer, config) {
+  // TODO error checking in this whole function
+
+  var maxFramesPerChunk = 4096;
+  var processNode = this.context.createScriptProcessor(2048, 0, 2);
+  processNode.config = config;
+  processNode.player = this;
+  var byteArray = new Int8Array(buffer);
+  var ptrToFile = libopenmpt._malloc(byteArray.byteLength);
+  libopenmpt.HEAPU8.set(byteArray, ptrToFile);
+  processNode.modulePtr = libopenmpt._openmpt_module_create_from_memory(ptrToFile, byteArray.byteLength, 0, 0, 0);
+  processNode.paused = false;
+  processNode.leftBufferPtr  = libopenmpt._malloc(4 * maxFramesPerChunk);
+  processNode.rightBufferPtr = libopenmpt._malloc(4 * maxFramesPerChunk);
+  processNode.cleanup = function() {
+    if (this.modulePtr != 0) {
+      libopenmpt._openmpt_module_destroy(this.modulePtr);
+      this.modulePtr = 0;
+    }
+    if (this.leftBufferPtr != 0) {
+      libopenmpt._free(this.leftBufferPtr);
+      this.leftBufferPtr = 0;
+    }
+    if (this.rightBufferPtr != 0) {
+      libopenmpt._free(this.rightBufferPtr);
+      this.rightBufferPtr = 0;
+    }
+  }
+  processNode.stop = function() {
+    this.disconnect();
+    this.cleanup();
+  }
+  processNode.pause = function() {
+    this.paused = true;
+  }
+  processNode.unpause = function() {
+    this.paused = false;
+  }
+  processNode.togglePause = function() {
+    this.paused = !this.paused;
+  }
+  processNode.onaudioprocess = function(e) {
+    var outputL = e.outputBuffer.getChannelData(0);
+    var outputR = e.outputBuffer.getChannelData(1);
+    var framesToRender = outputL.length;
+    if (this.ModulePtr == 0) {
+      for (var i = 0; i < framesToRender; ++i) {
+        outputL[i] = 0;
+        outputR[i] = 0;
+      }
+      this.disconnect();
+      this.cleanup();
+      return;
+    }
+    if (this.paused) {
+      for (var i = 0; i < framesToRender; ++i) {
+        outputL[i] = 0;
+        outputR[i] = 0;
+      }
+      return;
+    }
+    var framesRendered = 0;
+    var ended = false;
+    var error = false;
+    while (framesToRender > 0) {
+      var framesPerChunk = Math.min(framesToRender, maxFramesPerChunk);
+      var actualFramesPerChunk = libopenmpt._openmpt_module_read_float_stereo(this.modulePtr, this.context.sampleRate, framesPerChunk, this.leftBufferPtr, this.rightBufferPtr);
+      if (actualFramesPerChunk == 0) {
+        ended = true;
+        // modulePtr will be 0 on openmpt: error: openmpt_module_read_float_stereo: ERROR: module * not valid or other openmpt error
+        error = !this.modulePtr;
+      }
+      var rawAudioLeft = libopenmpt.HEAPF32.subarray(this.leftBufferPtr / 4, this.leftBufferPtr / 4 + actualFramesPerChunk);
+      var rawAudioRight = libopenmpt.HEAPF32.subarray(this.rightBufferPtr / 4, this.rightBufferPtr / 4 + actualFramesPerChunk);
+      for (var i = 0; i < actualFramesPerChunk; ++i) {
+        outputL[framesRendered + i] = rawAudioLeft[i];
+        outputR[framesRendered + i] = rawAudioRight[i];
+      }
+      for (var i = actualFramesPerChunk; i < framesPerChunk; ++i) {
+        outputL[framesRendered + i] = 0;
+        outputR[framesRendered + i] = 0;
+      }
+      framesToRender -= framesPerChunk;
+      framesRendered += framesPerChunk;
+    }
+    if (ended) {
+      this.disconnect();
+      this.cleanup();
+      error ? processNode.player.fireEvent('onError', {type: 'openmpt'}) : processNode.player.fireEvent('onEnded');
+    }
+  }
+  return processNode;
+}
--- a/index.html	Mon May 31 11:21:27 2021 -0400
+++ b/index.html	Mon May 31 11:55:12 2021 -0400
@@ -1,98 +1,140 @@
-<!DOCTYPE html>
-<!-- i spent way too long making this look decent -->
-<head>
-	<title>Paper's website</title>
-	<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
-	<link rel="manifest" href="icons/site.webmanifest">
-	<link rel="shortcut icon" href="icons/favicon.ico">
-	<meta name="msapplication-TileColor" content="#da532c">
-	<meta name="msapplication-config" content="icons/browserconfig.xml">
-	<meta name="theme-color" content="#ffffff">
-	<meta property="og:title" content="Paper's website">
-	<meta property="og:type" content="website">
-	<meta property="og:image" content="https://mrpapersonic.github.io/icons/android-chrome-512x512.png">
-	<meta property="og:url" content="https://mrpapersonic.github.io">
-	<meta property="og:description" content="hey!">
-	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-	<style>
-		.wrapper { 
-			height: 100%;
-			width: 100%;
-			left:0;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			position: absolute;
-			background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
-			background-size: 1800% 1800%;
-			-webkit-animation: rainbow 18s ease infinite;
-			-z-animation: rainbow 18s ease infinite;
-			-o-animation: rainbow 18s ease infinite;
-			animation: rainbow 18s ease infinite;
-			z-index: -1;
-		}
-		@-webkit-keyframes rainbow {
-			0%{background-position:0% 82%}
-			50%{background-position:100% 19%}
-			100%{background-position:0% 82%}
-		}
-		@-moz-keyframes rainbow {
-			0%{background-position:0% 82%}
-			50%{background-position:100% 19%}
-			100%{background-position:0% 82%}
-		}
-		@-o-keyframes rainbow {
-			0%{background-position:0% 82%}
-			50%{background-position:100% 19%}
-			100%{background-position:0% 82%}
-		}
-		@keyframes rainbow { 
-			0%{background-position:0% 82%}
-			50%{background-position:100% 19%}
-			100%{background-position:0% 82%}
-		}
-		div.box {
-			padding: 10px;
-			border: 2px solid black;
-			margin: auto;
-			width: 300px;
-			height: 200px;
-			background-color: white;
-			color: black;
-			text-shadow: none;
-			box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
-		}
-		div.disclaimer {
-			left: 5px;
-			bottom: 5px;
-			position: absolute;
-		}
-	</style>
-	<link rel="stylesheet" href="style.css">
-</head>
-<body>
-	<div class="wrapper"></div>
-	<h1>Heys!</h1>
-	<h2>welcome to MY AWESOME WEBSITE</h2>
-	<div class="box">
-		<h2>ABOUT ME!!!</h2>
-		<p>most people know me from <a style="color:blue;" href="https://youtube.com/c/paperytpmv">ytpmv</a>, but i also make <a style="color:blue;" href="https://modarchive.org/index.php?request=view_profile&query=92603">modules</a></p>
-		<p>member (owner?) of <a style="color:red;" href="https://1123.best">1123</a></p>
-	</div>
-	<p style="font-size:16px;"><a style="color:skyblue;" href="https://twitter.com/intent/user?user_id=858179488970100736">Twitter</a>  <a style="color:gray" href="https://steamcommunity.com/id/nikolaicube/">Steam</a>  <a style="color:red;" href="https://youtube.com/paperytpmv">YouTube</a></p>
-	<p style="line-height:10px;"> 
-		<a href="https://7-zip.org/"><img src="https://www.7-zip.org/logos/7zlogo01.png" width="88" height="31"></a> 
-		<a href="https://openmpt.org/"><img src="https://openmpt.org/img/openmpt-button-1.png" width="88" height="31"></a>
-		<a href="https://www.foobar2000.org/"><img src="https://www.foobar2000.org/button.png" width="88" height="31"></a><br><br>
-		<a href="https://modarchive.org/"><img src="img/modarchive.gif" width="88" height="31"></a>
-		<img src="img/brow.gif" width="88" height="31">
-		<a href="https://1123.best"><img src="https://1123.best/img/1123button.gif" width="88" height="31"></a><br><br>
-		<img src="img/1080p.gif" width="88" height="31">
-		<a href="https://cock.li"><img src="img/cockli.png" width="88" height="31"></a>
-		<img src="img/h-free-anim.gif" width="88" height="31">
-	</p>
-	<p><a href="cool.html">cool shit</a></p>
-	<div class="disclaimer">rainbow css stolen from <a href="https://codepen.io/nohoid/pen/kIfto">here</a></div>
-</body>
+<!DOCTYPE html>
+<!-- i spent way too long making this look decent -->
+<head>
+	<title>Paper's website</title>
+	<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+	<link rel="manifest" href="icons/site.webmanifest">
+	<link rel="shortcut icon" href="icons/favicon.ico">
+	<meta name="msapplication-TileColor" content="#da532c">
+	<meta name="msapplication-config" content="icons/browserconfig.xml">
+	<meta name="theme-color" content="#ffffff">
+	<meta property="og:title" content="Paper's website">
+	<meta property="og:type" content="website">
+	<meta property="og:image" content="https://mrpapersonic.github.io/icons/android-chrome-512x512.png">
+	<meta property="og:url" content="https://mrpapersonic.github.io">
+	<meta property="og:description" content="hey!">
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<style>
+		.wrapper { 
+			height: 100%;
+			width: 100%;
+			left:0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			position: absolute;
+			background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
+			background-size: 1800% 1800%;
+			-webkit-animation: rainbow 18s ease infinite;
+			-z-animation: rainbow 18s ease infinite;
+			-o-animation: rainbow 18s ease infinite;
+			animation: rainbow 18s ease infinite;
+			z-index: -1;
+		}
+		@-webkit-keyframes rainbow {
+			0%{background-position:0% 82%}
+			50%{background-position:100% 19%}
+			100%{background-position:0% 82%}
+		}
+		@-moz-keyframes rainbow {
+			0%{background-position:0% 82%}
+			50%{background-position:100% 19%}
+			100%{background-position:0% 82%}
+		}
+		@-o-keyframes rainbow {
+			0%{background-position:0% 82%}
+			50%{background-position:100% 19%}
+			100%{background-position:0% 82%}
+		}
+		@keyframes rainbow { 
+			0%{background-position:0% 82%}
+			50%{background-position:100% 19%}
+			100%{background-position:0% 82%}
+		}
+		div.box {
+			padding: 10px;
+			border: 2px solid black;
+			margin: auto;
+			width: 300px;
+			height: 200px;
+			background-color: white;
+			color: black;
+			text-shadow: none;
+			box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
+		}
+		div.disclaimer {
+			left: 5px;
+			bottom: 5px;
+			position: absolute;
+		}
+	</style>
+	<script>
+		window['libopenmpt'] = {};
+		libopenmpt.locateFile = function (filename) {
+			return filename;
+		};
+		libopenmpt.onRuntimeInitialized = function () {
+			var player;
+			if (document.referrer) {
+				init();
+				path = "overoff-f.mod";
+				if (player != undefined) {
+					player.load(path, afterLoad.bind(this, path));
+				}
+			}
+			else {
+				document.getElementById('button').style.visibility = "visible";
+			}
+			function init() {
+				if (player == undefined) {
+					player = new ChiptuneJsPlayer(new ChiptuneJsConfig(-1));
+				}
+				else {
+					player.stop();
+					player = undefined;
+				}
+			};
+			function afterLoad(path, buffer) {
+				player.play(buffer);
+			};
+			document.getElementById('button').onclick = function() {
+				init();
+				path = "overoff-f.mod";
+				if (player != undefined) {
+					player.load(path, afterLoad.bind(this, path));
+				}
+				document.getElementById('button').style.visibility = "hidden";
+			};
+		}
+	</script>
+	<script src="libopenmpt.js"></script>
+	<script src="chiptune2.js"></script>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+	<div class="wrapper"></div>
+	<h1>Heys!</h1>
+	<h2>welcome to MY AWESOME WEBSITE</h2>
+	<div class="box">
+		<h2>ABOUT ME!!!</h2>
+		<p>most people know me from <a style="color:blue;" href="https://youtube.com/c/paperytpmv">ytpmv</a>, but i also make <a style="color:blue;" href="https://modarchive.org/index.php?request=view_profile&query=92603">modules</a></p>
+		<p>member (owner?) of <a style="color:red;" href="https://1123.best">1123</a></p>
+	</div>
+	<p style="font-size:16px;"><a style="color:skyblue;" href="https://twitter.com/intent/user?user_id=858179488970100736">Twitter</a>  <a style="color:gray" href="https://steamcommunity.com/id/nikolaicube/">Steam</a>  <a style="color:red;" href="https://youtube.com/paperytpmv">YouTube</a></p>
+	<p style="line-height:10px;"> 
+		<a href="https://7-zip.org/"><img src="https://www.7-zip.org/logos/7zlogo01.png" width="88" height="31"></a> 
+		<a href="https://openmpt.org/"><img src="https://openmpt.org/img/openmpt-button-1.png" width="88" height="31"></a>
+		<a href="https://www.foobar2000.org/"><img src="https://www.foobar2000.org/button.png" width="88" height="31"></a><br><br>
+		<a href="https://modarchive.org/"><img src="img/modarchive.gif" width="88" height="31"></a>
+		<img src="img/brow.gif" width="88" height="31">
+		<a href="https://1123.best"><img src="https://1123.best/img/1123button.gif" width="88" height="31"></a><br><br>
+		<img src="img/1080p.gif" width="88" height="31">
+		<a href="https://cock.li"><img src="img/cockli.png" width="88" height="31"></a>
+		<img src="img/h-free-anim.gif" width="88" height="31">
+	</p>
+	<p><a href="cool.html">cool shit</a></p>
+	<input id="button" type="submit" name="button" value="music" style="visibility: hidden;">
+	<div class="disclaimer">rainbow css stolen from <a href="https://codepen.io/nohoid/pen/kIfto">here</a></div>
+</body>
Binary file overoff-f.mod has changed
Binary file setup.bmp has changed
--- a/style.css	Mon May 31 11:21:27 2021 -0400
+++ b/style.css	Mon May 31 11:55:12 2021 -0400
@@ -1,22 +1,30 @@
-body {
-	text-align: center;
-	background-size: 100% auto;
-	background-position: top center;
-	background-repeat: repeat;
-	image-rendering: pixelated;
-	text-shadow: -1px -1px 0px #000000, 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, 2px 2px 2px rgba(0, 0, 0, 0.5);
-	font-family: "Comic Sans MS", "Comic Sans", cursive;
-	color: white;
-}
-p {
-	font-size: 20px;
-}
-h1 {
-	font-size: 40px;
-}
-a {
-	color: tomato;
-}
-img {
-	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+body {
+	text-align: center;
+	background-size: 100% auto;
+	background-position: top center;
+	background-repeat: repeat;
+	image-rendering: pixelated;
+	text-shadow: -1px -1px 0px #000000, 1px 1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, 2px 2px 2px rgba(0, 0, 0, 0.5);
+	font-family: "Comic Sans MS", "Comic Sans", cursive;
+	color: white;
+}
+p {
+	font-size: 20px;
+}
+h1 {
+	font-size: 40px;
+}
+a {
+	color: tomato;
+}
+img {
+	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+}
+input[type=submit] {
+	background-color: white;
+	color: black;
+	border: 1px solid black;
+	padding: 1px 7px;
+	font-family: "Comic Sans MS", "Comic Sans", cursive;
+	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
 }
\ No newline at end of file