diff --git a/assets/font.woff2 b/assets/font.woff2 new file mode 100644 index 0000000..df73aeb Binary files /dev/null and b/assets/font.woff2 differ diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..2cb3117 --- /dev/null +++ b/assets/style.css @@ -0,0 +1,62 @@ +@font-face { + font-family: 'workbench'; + src: url('../assets/font.woff2') format('woff2'); +} +body { + background-color: #333; + background-image: + linear-gradient(to bottom, + #000000, + #22770156, + #221100 + ); + background-size: 100% 3px; + background-repeat: repeat-y; +} +.navbar { + background: + radial-gradient( + farthest-corner at 50% 50%, + rgba(0, 0, 0, 0.6), + rgba(20, 20, 20, 0.6) 50%, + rgba(40, 40, 40, 0.6) 100% + ); + background-size: 100% 300px; + background-position: 0% 100%; + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; + } + + .logo { + font-family: 'workbench', sans-serif; + font-size: 1.5rem; + color: #33ccffca; + text-shadow: 0 0 10px #33ccffbe; + } + + .nav-links { + list-style: none; + margin: 0; + padding: 0; + display: flex; + align-items: center; + } + + .nav-links li { + margin-right: 20px; + } + + .nav-links a { + font-family: 'workbench', sans-serif; + font-size: 1.2rem; + color: #33ccffab; /* a pale blue color reminiscent of old CRTs */ + text-decoration: none; + transition: color 0.2s ease; + text-shadow: 0 0 3px #33ccffaf; + } + + .nav-links a:hover { + color: #33ccffda; + } \ No newline at end of file diff --git a/bulb/bulb.js b/bulb/bulb.js new file mode 100644 index 0000000..1626e1e --- /dev/null +++ b/bulb/bulb.js @@ -0,0 +1,117 @@ +const init = () => { + + const renderer = new THREE.WebGLRenderer({ antialias:true }); + document.body.appendChild(renderer.domElement); + + const scene = new THREE.Scene(); + + const orthographiCamera = new THREE.OrthographicCamera(window.innerWidth / -2.0, window.innerWidth / +2.0, window.innerHeight / +2.0, window.innerHeight / -2.0, 0.0, 1.0); + const perspectiveCamera = new THREE.PerspectiveCamera(45.0, window.innerWidth / window.innerHeight, 0.1, 1000.0); + const controls = new THREE.OrbitControls(perspectiveCamera, renderer.domElement); + const clock = new THREE.Clock(); + + perspectiveCamera.position.set(0.0, 0.0, 5.0); + perspectiveCamera.lookAt(new THREE.Vector3(0.0, 0.0, 0.0)); + + const geometry = new THREE.PlaneBufferGeometry(window.innerWidth, window.innerHeight); + + const uniforms = { + uApp: { + value: { + time: clock.getElapsedTime(), + resolution: new THREE.Vector2(window.innerWidth, window.innerHeight) + } + }, + uCamera: { + value: { + position: perspectiveCamera.position, + viewMatrix: perspectiveCamera.matrixWorldInverse, + projectionMatrix: perspectiveCamera.projectionMatrix + } + }, + uParams: { + value: { + numIterations: 30, + convergenceCriteria: 0.0001, + finiteDifferenceEpsilon: 0.0001 + } + }, + uScene: { + value: { + backgroundColor: new THREE.Vector3(0.0, 0.0, 0.0), + lights: [ + { + direction: new THREE.Vector3(1.0, 1.0, 1.0), + ambientColor: new THREE.Vector3(1.0, 1.0, 1.0), + diffuseColor: new THREE.Vector3(1.0, 1.0, 0.0), + specularColor: new THREE.Vector3(1.0, 1.0, 0.0) + }, + { + direction: new THREE.Vector3(-1.0, -1.0, -1.0), + ambientColor: new THREE.Vector3(1.0, 1.0, 1.0), + diffuseColor: new THREE.Vector3(1.0, 0.0, 1.0), + specularColor: new THREE.Vector3(1.0, 0.0, 1.0) + } + ], + material: { + ambientColor: new THREE.Vector3(0.05, 0.05, 0.05), + diffuseColor: new THREE.Vector3(0.5, 0.5, 0.5), + specularColor: new THREE.Vector3(1.0, 1.0, 1.0), + emissionColor: new THREE.Vector3(0.0, 0.0, 0.0), + shininess: 64.0 + }, + bound: { + position: new THREE.Vector3(0.0, 0.0, 0.0), + radius: 2.0 + }, + fractal: { + power: 10, + numIterations: 4, + escapeCriteria: 2.0 + } + } + } + } + + const material = new THREE.ShaderMaterial({ + vertexShader: document.getElementById('vertexShader').textContent, + fragmentShader: document.getElementById('fragmentShader').textContent, + uniforms: uniforms + }); + + scene.add(new THREE.Mesh(geometry, material)); + + const onWindowResize = (event) => { + uniforms.uApp.value.resolution.x = window.innerWidth * window.devicePixelRatio; + uniforms.uApp.value.resolution.y = window.innerHeight * window.devicePixelRatio; + // NOTE: https://ics.media/tutorial-three/renderer_resize/ + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + perspectiveCamera.aspect = window.innerWidth / window.innerHeight; + perspectiveCamera.updateProjectionMatrix(); + } + onWindowResize(); + window.addEventListener('resize', onWindowResize, false); + + const animate = () => { + + requestAnimationFrame(animate); + + const update = () => { + controls.update(); + perspectiveCamera.lookAt(new THREE.Vector3(0.0, 0.0, 0.0)); + uniforms.uApp.value.time = clock.getElapsedTime(); + uniforms.uCamera.value.position = perspectiveCamera.position; + uniforms.uCamera.value.viewMatrix = perspectiveCamera.matrixWorldInverse; + uniforms.uCamera.value.projectionMatrix = perspectiveCamera.projectionMatrix; + } + + update(); + + renderer.render(scene, orthographiCamera); + }; + + animate(); +} + +window.addEventListener("load", init); diff --git a/bulb/index.html b/bulb/index.html new file mode 100644 index 0000000..2bf9b99 --- /dev/null +++ b/bulb/index.html @@ -0,0 +1,889 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..8641468 --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + elia.network + + + + + \ No newline at end of file