Check in!
This commit is contained in:
commit
5bcbefd291
GPG Key ID:
41467804B19A3315
|
|
@ -0,0 +1,5 @@
|
||||||
|
dist
|
||||||
|
.cache
|
||||||
|
node_modules
|
||||||
|
generated
|
||||||
|
debug.log
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"name": "odyfive",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "index.js",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/howler": "^2.2.1",
|
||||||
|
"hotkeys-js": "^3.8.1",
|
||||||
|
"howler": "^2.2.0",
|
||||||
|
"parcel-bundler": "^1.12.4",
|
||||||
|
"pixi.js": "^5.3.3",
|
||||||
|
"typescript": "^4.0.3"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "parcel src/index.html",
|
||||||
|
"clean": "rimraf ./dist"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"rimraf": "^3.0.2",
|
||||||
|
"sass": "^1.26.11"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>NSS Odyssey</title>
|
||||||
|
<link rel="stylesheet" href="./screen.scss" />
|
||||||
|
<link rel="icon" href="favicon.ico" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main id="app"></main>
|
||||||
|
<script src="./index.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
import { Howl } from "howler";
|
||||||
|
import * as PIXI from "pixi.js";
|
||||||
|
|
||||||
|
//@ts-expect-error It's a music file
|
||||||
|
import title from "../assets/sounds/music/title.opus";
|
||||||
|
|
||||||
|
const pixiApp = new PIXI.Application({
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
resolution: window.devicePixelRatio || 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
pixiApp.renderer.resize(window.innerWidth, window.innerHeight);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.appendChild(pixiApp.view);
|
||||||
|
|
||||||
|
const filter_src = `
|
||||||
|
// Star Nest by Pablo Roman Andrioli
|
||||||
|
// This content is under the MIT License.
|
||||||
|
|
||||||
|
uniform vec3 iResolution;
|
||||||
|
uniform float iTime;
|
||||||
|
|
||||||
|
#define iterations 17
|
||||||
|
#define formuparam 0.53
|
||||||
|
|
||||||
|
#define volsteps 20
|
||||||
|
#define stepsize 0.1
|
||||||
|
|
||||||
|
#define zoom 0.800
|
||||||
|
#define tile 0.850
|
||||||
|
#define speed 0.001
|
||||||
|
|
||||||
|
#define brightness 0.0015
|
||||||
|
#define darkmatter 0.300
|
||||||
|
#define distfading 0.730
|
||||||
|
#define saturation 0.850
|
||||||
|
|
||||||
|
#define rotx 0.
|
||||||
|
#define roty 0.001
|
||||||
|
|
||||||
|
void main()
|
||||||
|
{
|
||||||
|
//get coords and direction
|
||||||
|
vec2 uv=gl_FragCoord.xy/iResolution.xy-.5;
|
||||||
|
uv.y*=iResolution.y/iResolution.x;
|
||||||
|
vec3 dir=vec3(uv*zoom,1.);
|
||||||
|
float time=iTime*speed+.25;
|
||||||
|
|
||||||
|
float a1=.5+iTime*rotx;
|
||||||
|
float a2=.8+iTime*roty;
|
||||||
|
mat2 rot1=mat2(vec2(cos(a1),sin(a1)),vec2(-sin(a1),cos(a1)));
|
||||||
|
mat2 rot2=mat2(vec2(cos(a2),sin(a2)),vec2(-sin(a2),cos(a2)));
|
||||||
|
dir.xz*=rot1;
|
||||||
|
dir.xy*=rot2;
|
||||||
|
vec3 from=vec3(1.,.5,0.5);
|
||||||
|
from+=vec3(time*2.,time,-2.);
|
||||||
|
from.xz*=rot1;
|
||||||
|
from.xy*=rot2;
|
||||||
|
|
||||||
|
//volumetric rendering
|
||||||
|
float s=0.1,fade=1.;
|
||||||
|
vec3 v=vec3(0.);
|
||||||
|
for (int r=0; r<volsteps; r++) {
|
||||||
|
vec3 p=from+s*dir*.5;
|
||||||
|
p = abs(vec3(tile)-mod(p,vec3(tile*2.))); // tiling fold
|
||||||
|
float pa,a=pa=0.;
|
||||||
|
for (int i=0; i<iterations; i++) {
|
||||||
|
p=abs(p)/dot(p,p)-formuparam; // the magic formula
|
||||||
|
a+=abs(length(p)-pa); // absolute sum of average change
|
||||||
|
pa=length(p);
|
||||||
|
}
|
||||||
|
float dm=max(0.,darkmatter-a*a*.001); //dark matter
|
||||||
|
a*=a*a; // add contrast
|
||||||
|
if (r>6) fade*=1.-dm; // dark matter, don't render near
|
||||||
|
//v+=vec3(dm,dm*.5,0.);
|
||||||
|
v+=fade;
|
||||||
|
v+=vec3(s,s*s,s*s*s*s)*a*brightness*fade; // coloring based on distance
|
||||||
|
fade*=distfading; // distance fading
|
||||||
|
s+=stepsize;
|
||||||
|
}
|
||||||
|
v=mix(vec3(length(v)),v,saturation); //color adjust
|
||||||
|
gl_FragColor = vec4(v*.01,1.);
|
||||||
|
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
const filter = new PIXI.Filter(null, filter_src, {
|
||||||
|
iTime: 0,
|
||||||
|
iResolution: [window.innerWidth, window.innerHeight],
|
||||||
|
});
|
||||||
|
|
||||||
|
pixiApp.stage.filterArea = pixiApp.renderer.screen;
|
||||||
|
pixiApp.stage.filters = [filter];
|
||||||
|
|
||||||
|
let elapsed = 0;
|
||||||
|
pixiApp.ticker.add((delta) => {
|
||||||
|
filter.uniforms.iTime = elapsed;
|
||||||
|
elapsed += delta / 60;
|
||||||
|
});
|
||||||
|
|
||||||
|
var sound = new Howl({
|
||||||
|
src: [title],
|
||||||
|
autoplay: true,
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app,
|
||||||
|
body > canvas {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
Reference in New Issue