enderman.ch/index-static
enderman.ch
/
index-static
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bump ECMAPortal to v1.3

This commit is contained in:
Andrew Illarionov 2023-11-06 00:59:31 +03:00
parent a93611fc43
commit 125e9f8451
4 changed files with 117 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -21,8 +21,7 @@
<link href="/styles/styles.css" rel="stylesheet" />
</head>
<body>
<canvas class="portal" id="ecmaportal">Your browser does not seem to support HTML canvas.</canvas>
<div class="body-wrapper">
<!--<div class="body-wrapper">
<div class="container">
<main>
<div class="text">
@ -184,8 +183,7 @@
</div>
<div class="bottom-right">
<img src="/images/enderman.gif" alt="Hello!">
</div>
<script src="/scripts/portal-min.js"></script>
</div>-->
<script src="/scripts/portal-min.js" type="text/javascript"></script>
</body>
</html>

2
scripts/portal-min.js vendored
View File

File diff suppressed because one or more lines are too long

133
scripts/portal.js
View File

@ -1,6 +1,5 @@
class Portal {
constructor(canvas, resourceDir) {
constructor(resourceDir = '/', animate = true, randomize = false) {
// Vertex shader.
const vglsl = `#version 300 es
@ -104,36 +103,51 @@ class Portal {
];
// Version & notice.
this.version = '1.1';
this.version = '1.3';
this.notice();
this.canvas = canvas;
// Set properties.
this.animate = animate;
this.randomize = randomize;
// Create a canvas and acquire its context.
this.canvas = this.createCanvas();
this.gl = this.canvas.getContext('webgl2');
// If WebGL isn't part of available features, fail.
if (!this.gl) {
alert("Unable to initialize WebGL 2. Your browser or machine may not support it.");
return;
alert("Unable to initialize WebGL 2.\nThe website will lack parallax animation.");
console.error("Unable to initialize WebGL 2. Your browser or machine may not support it.");
return this.destroyCanvas();
}
// Size the canvas to window initially.
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
// Set default speed.
this.speed = 1;
this.initialSpeed = this.speed;
// Get current tick and slightly randomize it.
this.time = Date.now() - this.randomRange(60 * 1000, 180 * 1000);
// It's integral for the animation to tie it to the current time, else it will be tied to the framerate.
this.currentTime = Date.now();
this.pauseTime = null;
// Get current tick and slightly randomize it if animation is enabled.
this.tick = (this.animate && randomize) * this.randomRange(0, 10);
// Build shaders.
this.prog = this.build(vglsl, fglsl);
if (!this.prog) {
alert("Failed to compile WebGL 2 shaders.\nOpen the developer console for debug output.");
return;
return this.destroyCanvas();
}
// Bind class context to the resize handler, pass it to the event bus.
window.addEventListener('resize', this.resize.bind(this));
// Set the clickTime to null for the onClick event.
this.clickTime = null;
// Create image loading promises.
this.promises = images.map(image => this.loadImage(image));
@ -154,6 +168,37 @@ class Portal {
});
}
createCanvas() {
let canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.display = 'block';
canvas.style.position = 'fixed';
canvas.style.bottom = '0';
canvas.style.left = '0';
canvas.style.zIndex = '-1';
canvas.innerHTML = 'Your browser does not support the canvas element, which is required for animation.';
// Add a class for subclassing support.
canvas.classList.add('ecmaportal');
canvas.id = 'ecmaportal';
if (this.animate) {
canvas.onclick = () => this.clickTime = Date.now();
}
document.body.appendChild(canvas);
return canvas;
}
destroyCanvas() {
document.body.removeChild(this.canvas);
}
notice() {
console.log(
`%c \u2587%c\u2587%c\u2587 %c\u2587%c\u2587%c\u2587 %c // ECMAPortal v${this.version} by Endermanch & WiPet\n\n\thttps://enderman.ch\n\thttps://go.enderman.ch/wipet`,
@ -173,10 +218,7 @@ class Portal {
}
randomRange(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
return Math.random() * (max - min) + min;
}
build(vshSource, fshSource) {
@ -283,7 +325,7 @@ class Portal {
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
let vertexTexBuffer = this.gl.createBuffer();
let texcoords = new Float32Array([
let texCoords = new Float32Array([
0.0, 1.0,
1.0, 1.0,
1.0, 0.0,
@ -293,7 +335,7 @@ class Portal {
]);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexTexBuffer);
this.gl.bufferData(this.gl.ARRAY_BUFFER, texcoords, this.gl.STATIC_DRAW);
this.gl.bufferData(this.gl.ARRAY_BUFFER, texCoords, this.gl.STATIC_DRAW);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
let vertexPosLocation = 0;
@ -320,14 +362,24 @@ class Portal {
0.0, 0.0, 0.0, 1.0
]);
let dt = (Date.now() - this.time) / 1000 / 1000;
if (this.animate) {
// Speed up the animation if the user has clicked.
if (this.clickTime !== null) {
this.speed = 20 - Math.min((Date.now() - this.clickTime) / 100, 20 - this.initialSpeed);
if (this.speed === this.initialSpeed) this.clickTime = null;
}
// R(t) = t + dt (mod 20)
this.tick += this.dt;
this.tick %= 20;
}
this.gl.uniformMatrix4fv(this.uniforms.modelViewMatrix, false, identityMatrix);
this.gl.uniformMatrix4fv(this.uniforms.projectionMatrix, false, identityMatrix);
this.gl.uniform2f(this.uniforms.resolution, this.canvas.clientWidth, this.canvas.clientHeight);
this.gl.uniform1f(this.uniforms.dt, dt);
this.gl.uniform1f(this.uniforms.dt, this.tick);
this.gl.uniform1i(this.uniforms.sky, 0);
this.gl.uniform1i(this.uniforms.particles, 1);
@ -338,11 +390,15 @@ class Portal {
// Make sure the viewport matches the size of the canvas' drawingBuffer.
this.gl.viewport(0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight);
// Calculate the delta time.
this.dt = (Date.now() - this.currentTime) * this.speed / 1000000;
this.currentTime = Date.now();
// Run the scene.
this.scene();
// Request the next animation frame.
requestAnimationFrame(this.render.bind(this));
// Request the next animation frame if animation is enabled.
if (this.animate) requestAnimationFrame(this.render.bind(this));
}
resize() {
@ -356,21 +412,42 @@ class Portal {
this.canvas.width = width;
this.canvas.height = height;
}
// If we have animation disabled, we still have to re-render the scene once on resize.
if (!this.animate) requestAnimationFrame(this.render.bind(this));
}
continue() {
if (this.pauseTime === null) return;
// Add the time that has passed since the pause to the current time.
this.currentTime += Date.now() - this.pauseTime;
this.pauseTime = null;
this.animate = true;
this.render();
}
pause() {
if (this.pauseTime !== null) return;
// Save the pause time to calculate the delta time.
this.pauseTime = Date.now();
this.animate = false;
}
destruct() {
// Doesn't need to be called usually, the garbage collector should do its job.
// The method isn't implemented, but the pseudocode is as follows:
this.gl.deleteBuffer(vertexPosBuffer);
this.gl.deleteBuffer(vertexTexBuffer);
// this.gl.deleteBuffer(vertexPosBuffer);
// this.gl.deleteBuffer(vertexTexBuffer);
this.gl.deleteSampler(sampler);
this.gl.deleteTexture(texture);
// this.gl.deleteSampler(sampler);
// this.gl.deleteTexture(texture);
this.gl.deleteProgram(this.prog);
}
}
const canvas = document.querySelector('#ecmaportal');
const portal = new Portal(canvas, '/images/portal');
const portal = new Portal('/images/portal', true, true);

10
styles/styles.css
View File

@ -3,10 +3,13 @@
}
body {
background-color: black;
background-color: rgb(6, 25, 28);
background-image: url("/images/portal/sky.png");
background-attachment: fixed;
background-size: cover;
background-blend-mode: multiply;
image-rendering: pixelated;
background-repeat: no-repeat;
color: white;
@ -18,7 +21,7 @@ canvas.portal {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
@ -179,6 +182,9 @@ div.bottom-right {
bottom: 0;
opacity: 30%;
-webkit-transition: ease 0.3s;
transition: 0.3s ease;
}
div.bottom-right:hover {