Update background
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m0s

This commit is contained in:
thepaperpilot 2024-06-20 06:27:48 -05:00
parent 0168204858
commit a4e47f244f
7 changed files with 379 additions and 2 deletions

View file

@ -15,16 +15,19 @@
"license": "ISC",
"homepage": "https://www.thepaperpilot.org/thepaperpilot.github.io",
"dependencies": {
"@tresjs/core": "^4.0.2",
"@vitejs/plugin-vue-jsx": "^4.0.0",
"feed": "^4.2.2",
"flexsearch": "^0.7.43",
"run-script-os": "^1.1.6",
"three": "^0.165.0",
"vitepress": "^1.2.2",
"vue": "^3.3.4",
"word-counting": "^1.1.4"
},
"private": true,
"devDependencies": {
"@nolebase/vitepress-plugin-highlight-targeted-heading": "^2.1.1"
"@nolebase/vitepress-plugin-highlight-targeted-heading": "^2.1.1",
"@types/three": "^0.165.0"
}
}

View file

@ -0,0 +1,136 @@
<template>
<div class="background">
<TresCanvas>
<TresOrthographicCamera ref="camera" :position="[0, 0, 10]" />
<TresGroup ref="blobRef">
<TresMesh v-for="i in rows * cols" :position="[((i % cols) - cols / 2) * 304, (Math.floor((i - 1) / cols) - rows / 2) * 304, 0]" >
<TresShapeGeometry :args="[shapes]" />
<TresShaderMaterial :vertexShader="vertexShader" :fragmentShader="fragmentShader" :uniforms="uniforms" :blending="AdditiveBlending" />
</TresMesh>
</TresGroup>
<TresAmbientLight :intensity="1" />
<OrbitControls />
</TresCanvas>
</div>
</template>
<script setup lang="ts">
import { computed, ref, shallowRef, onMounted, onUnmounted, watch } from "vue";
import { TresCanvas, useLoader, useRenderLoop } from '@tresjs/core';
import { SVGLoader } from "three/examples/jsm/loaders/SVGLoader.js";
import OrbitControls from './OrbitControls.vue';
import noise from "./noise.glsl?raw";
import { AdditiveBlending, Vector2 } from "three";
const camera = ref();
// Load SVG
const { paths } = await useLoader(SVGLoader, '/circuit-board.svg');
const shapes = paths.map(path => SVGLoader.createShapes(path)).reduce((acc, curr) => [...acc, ...curr]);
// Handle canvas size
const width = ref(window.innerWidth);
const height = ref(window.innerHeight);
const rows = computed(() => Math.ceil(height.value / 304));
const cols = computed(() => Math.ceil(width.value / 304));
function updateSize() {
width.value = window.innerWidth;
height.value = window.innerHeight;
}
watch([width, height, camera], ([width, height, camera]) => {
if (camera) {
camera.left = 0;
camera.bottom = 0
camera.right = width;
camera.top = height;
camera.updateProjectionMatrix();
}
});
// Handle mouse position
const mousePos = ref(new Vector2(Infinity, Infinity));
function updateMousePos(event: MouseEvent) {
mousePos.value = new Vector2(event.screenX, window.screen.availHeight - event.screenY);
if (blobRef.value) {
blobRef.value.children.forEach(child => {
child.material.uniforms.uMouse.value = mousePos.value;
});
}
}
function handleMouseLeave(event: MouseEvent) {
if (!event.relatedTarget) {
mousePos.value = new Vector2(Infinity, Infinity);
if (blobRef.value) {
blobRef.value.children.forEach(child => {
child.material.uniforms.uMouse.value = mousePos.value;
});
}
}
}
// Setup window listeners
onMounted(() => {
window.addEventListener("resize", updateSize);
window.addEventListener("mousemove", updateMousePos);
window.addEventListener("mouseout", handleMouseLeave);
});
onUnmounted(() => {
window.removeEventListener("resize", updateSize);
window.removeEventListener("mousemove", updateMousePos);
window.removeEventListener("mouseout", handleMouseLeave);
});
// Shaders
const blobRef = shallowRef(null);
const uniforms = {
uTime: { value: 0 },
uMouse: { value: new Vector2(Infinity, Infinity) }
}
const vertexShader = `
varying vec2 vUv;
void main() {
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
vec4 viewPosition = viewMatrix * modelPosition;
gl_Position = projectionMatrix * viewPosition;
vUv = uv;
}
`
const fragmentShader = noise + `
precision mediump float;
uniform float uTime;
uniform vec2 uMouse;
varying vec2 vUv;
void main() {
float dist = distance(gl_FragCoord.xy, uMouse);
float alpha = max(0., 1. - dist / 304.);
alpha += max(0., snoise(vec3(gl_FragCoord.xy / 304., uTime / 4.)));
gl_FragColor = vec4(0, 0, 0, alpha);
}
`
const { onLoop } = useRenderLoop();
onLoop(({ elapsed }) => {
if (blobRef.value) {
blobRef.value.children.forEach(child => {
child.material.uniforms.uTime.value = elapsed;
});
}
});
</script>
<style scoped>
.background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
overflow: hidden;
}
</style>

View file

@ -2,6 +2,11 @@
<DefaultTheme.Layout>
<template #layout-top>
<NolebaseHighlightTargetedHeading />
<ClientOnly>
<Suspense>
<Background />
</Suspense>
</ClientOnly>
</template>
<template #layout-bottom>
<footer class="vp-doc">
@ -19,6 +24,7 @@ import DefaultTheme from 'vitepress/theme'
import { NolebaseHighlightTargetedHeading } from '@nolebase/vitepress-plugin-highlight-targeted-heading/client'
import '@nolebase/vitepress-plugin-highlight-targeted-heading/client/style.css'
import './custom.css'
import Background from './Background.vue'
</script>
<style scoped>

View file

@ -0,0 +1,27 @@
<template>
<TresOrbitControls
v-if="renderer"
:args="[camera, renderer?.domElement]"
/>
</template>
<script setup lang="ts">
import { extend, useTresContext } from '@tresjs/core';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
extend({ OrbitControls });
const { camera, renderer } = useTresContext();
</script>
<style scoped>
.background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
overflow: hidden;
}
</style>

View file

@ -0,0 +1,122 @@
//
// Description : Array and textureless GLSL 2D/3D/4D simplex
// noise functions.
// Author : Ian McEwan, Ashima Arts.
// Maintainer : stegu
// Lastmod : 20201014 (stegu)
// License : Copyright (C) 2011 Ashima Arts. All rights reserved.
// Distributed under the MIT License. See LICENSE file.
// https://github.com/ashima/webgl-noise
// https://github.com/stegu/webgl-noise
//
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x*34.0)+10.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
float snoise(vec3 v)
{
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
// First corner
vec3 i = floor(v + dot(v, C.yyy) );
vec3 x0 = v - i + dot(i, C.xxx) ;
// Other corners
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );
// x0 = x0 - 0.0 + 0.0 * C.xxx;
// x1 = x0 - i1 + 1.0 * C.xxx;
// x2 = x0 - i2 + 2.0 * C.xxx;
// x3 = x0 - 1.0 + 3.0 * C.xxx;
vec3 x1 = x0 - i1 + C.xxx;
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
// Permutations
i = mod289(i);
vec4 p = permute( permute( permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
// Gradients: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
float n_ = 0.142857142857; // 1.0/7.0
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );
//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
vec4 s0 = floor(b0)*2.0 + 1.0;
vec4 s1 = floor(b1)*2.0 + 1.0;
vec4 sh = -step(h, vec4(0.0));
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
vec3 p0 = vec3(a0.xy,h.x);
vec3 p1 = vec3(a0.zw,h.y);
vec3 p2 = vec3(a1.xy,h.z);
vec3 p3 = vec3(a1.zw,h.w);
//Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
// Mix final noise value
vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
m = m * m;
return 105.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
dot(p2,x2), dot(p3,x3) ) );
}
// demo code:
// float color(vec2 xy) { return 0.7 * snoise(vec3(xy, 0.3*iTime)); }
// void mainImage(out vec4 fragColor, in vec2 fragCoord) {
// vec2 p = (fragCoord.xy/iResolution.y) * 2.0 - 1.0;
// vec3 xyz = vec3(p, 0);
// vec2 step = vec2(1.3, 1.7);
// float n = color(xyz.xy);
// n += 0.5 * color(xyz.xy * 2.0 - step);
// n += 0.25 * color(xyz.xy * 4.0 - 2.0 * step);
// n += 0.125 * color(xyz.xy * 8.0 - 3.0 * step);
// n += 0.0625 * color(xyz.xy * 16.0 - 4.0 * step);
// n += 0.03125 * color(xyz.xy * 32.0 - 5.0 * step);
// fragColor.xyz = vec3(0.5 + 0.5 * vec3(n, n, n));
// }

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.1 KiB

View file

@ -133,6 +133,11 @@
"@algolia/logger-common" "4.20.0"
"@algolia/requester-common" "4.20.0"
"@alvarosabu/utils@^3.2.0":
version "3.2.0"
resolved "https://registry.yarnpkg.com/@alvarosabu/utils/-/utils-3.2.0.tgz#76b8e3a2390143858a8cad8efe4286b5dde51e8d"
integrity sha512-aoGWRfaQjOo9TUwrBA6W0zwTHktgrXy69GIFNILT4gHsqscw6+X8P6uoSlZVQFr887SPm8x3aDin5EBVq8y4pw==
"@ampproject/remapping@^2.2.0":
version "2.3.0"
resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
@ -701,6 +706,20 @@
dependencies:
shiki "1.6.1"
"@tresjs/core@^4.0.2":
version "4.0.2"
resolved "https://registry.yarnpkg.com/@tresjs/core/-/core-4.0.2.tgz#bda7fb8bfe8bd7bb31c229bcdc12063c4f212c97"
integrity sha512-+Shy5ch4m9gQSHRlArZAn4nv2apaFJJv21bAvpOKRXTCtGu0BakKGUpWcTzzmDsTs9t6yndbjCWzyifggjFpQQ==
dependencies:
"@alvarosabu/utils" "^3.2.0"
"@vue/devtools-api" "^6.6.2"
"@vueuse/core" "^10.10.0"
"@tweenjs/tween.js@~23.1.1":
version "23.1.2"
resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-23.1.2.tgz#4e5357fd6742f5aa50447d3fa808aed4cda93ed7"
integrity sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ==
"@types/estree@1.0.5":
version "1.0.5"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@ -724,11 +743,32 @@
resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd"
integrity sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==
"@types/stats.js@*":
version "0.17.3"
resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.3.tgz#705446e12ce0fad618557dd88236f51148b7a935"
integrity sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==
"@types/three@^0.165.0":
version "0.165.0"
resolved "https://registry.yarnpkg.com/@types/three/-/three-0.165.0.tgz#eaf147e69b9fc49ddc2f51b3e425ad03cde5c236"
integrity sha512-AJK8JZAFNBF0kBXiAIl5pggYlzAGGA8geVYQXAcPCEDRbyA+oEjkpUBcJJrtNz6IiALwzGexFJGZG2yV3WsYBw==
dependencies:
"@tweenjs/tween.js" "~23.1.1"
"@types/stats.js" "*"
"@types/webxr" "*"
fflate "~0.8.2"
meshoptimizer "~0.18.1"
"@types/web-bluetooth@^0.0.20":
version "0.0.20"
resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
"@types/webxr@*":
version "0.5.17"
resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.17.tgz#39c5a39866feb4541aaef41ce7a59cecaf065feb"
integrity sha512-JYcclaQIlisHRXM9dMF7SeVvQ54kcYc7QK1eKCExCTLKWnZDxP4cp/rXH4Uoa1j5+5oQJ0Cc2sZC/PWiiG4q2g==
"@vitejs/plugin-vue-jsx@^4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-4.0.0.tgz#7bb65d57153ebf63b2e6ab0cc81029e82206036c"
@ -902,6 +942,11 @@
"@vue/compiler-dom" "3.4.29"
"@vue/shared" "3.4.29"
"@vue/devtools-api@^6.6.2":
version "6.6.3"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==
"@vue/devtools-api@^7.2.0":
version "7.2.1"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-7.2.1.tgz#1eb3d33c85b76306106d5804bafa0d13178e9224"
@ -1027,6 +1072,16 @@
"@vueuse/shared" "10.10.0"
vue-demi ">=0.14.7"
"@vueuse/core@^10.10.0":
version "10.11.0"
resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.11.0.tgz#b042585a8bf98bb29c177b33999bd0e3fcd9e65d"
integrity sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==
dependencies:
"@types/web-bluetooth" "^0.0.20"
"@vueuse/metadata" "10.11.0"
"@vueuse/shared" "10.11.0"
vue-demi ">=0.14.8"
"@vueuse/integrations@^10.9.0":
version "10.10.0"
resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-10.10.0.tgz#31f413b88d7ed24213958eba6824d46b2bf71b5f"
@ -1041,6 +1096,11 @@
resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.10.0.tgz#53e61e9380670e342cbe6e03d852f3319308cb5b"
integrity sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==
"@vueuse/metadata@10.11.0":
version "10.11.0"
resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.11.0.tgz#27be47cf115ee98e947a1bfcd0b1b5b35d785fb6"
integrity sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==
"@vueuse/shared@10.10.0":
version "10.10.0"
resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.10.0.tgz#93f7c2210151ff43c2c7677963f7aa3aef5d9896"
@ -1048,6 +1108,13 @@
dependencies:
vue-demi ">=0.14.7"
"@vueuse/shared@10.11.0":
version "10.11.0"
resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.11.0.tgz#be09262b2c5857069ed3dadd1680f22c4cb6f984"
integrity sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==
dependencies:
vue-demi ">=0.14.8"
algoliasearch@^4.19.1:
version "4.20.0"
resolved "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.20.0.tgz"
@ -1263,6 +1330,11 @@ feed@^4.2.2:
dependencies:
xml-js "^1.6.11"
fflate@~0.8.2:
version "0.8.2"
resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.8.2.tgz#fc8631f5347812ad6028bbe4a2308b2792aa1dea"
integrity sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==
flexsearch@^0.7.43:
version "0.7.43"
resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.7.43.tgz#34f89b36278a466ce379c5bf6fb341965ed3f16c"
@ -1420,6 +1492,11 @@ mark.js@8.11.1:
resolved "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz"
integrity sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==
meshoptimizer@~0.18.1:
version "0.18.1"
resolved "https://registry.yarnpkg.com/meshoptimizer/-/meshoptimizer-0.18.1.tgz#cdb90907f30a7b5b1190facd3b7ee6b7087797d8"
integrity sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==
mime@^1.4.1:
version "1.6.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
@ -1668,6 +1745,11 @@ tabbable@^6.2.0:
resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz"
integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
three@^0.165.0:
version "0.165.0"
resolved "https://registry.yarnpkg.com/three/-/three-0.165.0.tgz#43b93b9b56c71b7eeee6b531d737ab573633ccd1"
integrity sha512-cc96IlVYGydeceu0e5xq70H8/yoVT/tXBxV/W8A/U6uOq7DXc4/s1Mkmnu6SqoYGhSRWWYFOhVwvq6V0VtbplA==
to-fast-properties@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@ -1719,7 +1801,7 @@ vitepress@^1.2.2:
vite "^5.2.11"
vue "^3.4.27"
vue-demi@>=0.14.7:
vue-demi@>=0.14.7, vue-demi@>=0.14.8:
version "0.14.8"
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.8.tgz#00335e9317b45e4a68d3528aaf58e0cec3d5640a"
integrity sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==