'init'

public/js/main.js

@@ -0,0 +1,450 @@
+import * as THREE from 'three';
+import { FontLoader } from 'three/addons/loaders/FontLoader.js';
+import { Font } from 'three/examples/jsm/loaders/FontLoader.js';
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
+import { lerp, randFloat } from 'three/src/math/MathUtils.js';
+import { OrbitControls } from 'three/examples/jsm/Addons.js';
+import { depth } from 'three/examples/jsm/nodes/Nodes.js';
+
+class PickHelper {
+
+	constructor() {
+	  this.raycaster = new THREE.Raycaster();
+	  this.pickedObject = null;
+	  this.lastObjectPicked = null;
+	  this.sameObjectPicked = false;
+	}
+
+	pick(normalizedPosition, scene, camera, time) {
+	  // restore the color if there is a picked object
+	  if (this.pickedObject) {
+		this.lastObjectPicked = this.pickedObject;
+		this.sameObjectPicked = false;
+		this.pickedObject = undefined;
+	  }
+   
+	  // cast a ray through the frustum
+	  this.raycaster.setFromCamera(normalizedPosition, camera);
+	  // get the list of objects the ray intersected
+	  const intersectedObjects = this.raycaster.intersectObjects(scene.children);
+	  if (intersectedObjects.length) {
+		// pick the first object. It's the closest one
+		for (let i = 0; i < intersectedObjects.length; i++){
+
+			if(intersectedObjects[i].object.geometry.type != "SphereGeometry"){
+				this.pickedObject = intersectedObjects[i].object;
+				if(intersectedObjects[i].object == this.lastObjectPicked)
+					this.sameObjectPicked = true;
+			}
+		}	
+		
+		if (this.sameObjectPicked)
+			this.pickedObject = this.lastObjectPicked;
+	  }
+	}
+
+}
+
+class Article {
+
+	constructor(texture, title, filename, id){
+		this.geom = new THREE.TetrahedronGeometry(1, 2);
+		this.material = new THREE.MeshLambertMaterial({map: texture});
+		this.mesh = new THREE.Mesh(this.geom, this.material);
+		this.html = filename;
+		this.name = title;
+		this.id = id;
+		this.hover = false;
+		this.hoverScale = false;
+		this.hoverLerpTime = 0;
+		this.speed = randFloat(1.5, 2);
+		this.rotationSpeed = randFloat(0.5, 1.5);
+		this.scale = 1;
+	}
+
+	AddToScene(scene, aspect){
+		this.mesh.position.x = (Math.random() - 0.5) * 8 * aspect;
+		this.mesh.position.y = 8 + Math.random() * 15;
+		scene.add(this.mesh);
+	}
+
+	UpdateRotation(time){
+		this.mesh.rotation.x += this.rotationSpeed * time;
+		this.mesh.rotation.y += this.rotationSpeed * time;
+	}
+
+	UpdatePosition(time, picker){
+		this.BoundsCheck();
+		this.HoverCheck(picker, time)
+		if (!this.hover)
+			this.mesh.position.y -= this.speed * time;
+	}
+
+	BoundsCheck(){
+		if (this.mesh.position.y < -8) {
+			const aspect = window.innerWidth / (window.innerHeight - 100);
+			this.mesh.position.y = 8 + (Math.random() * 3);
+			this.mesh.position.x = (Math.random() - 0.5) * 8 * aspect;
+			this.speed = randFloat(1.5, 2)
+		}
+	}
+
+	UpdateScale(multipler){
+		this.mesh.scale.set(multipler, multipler, multipler);
+	}
+
+	HoverCheck(picker, time){
+		const hoverIncrement = 0.01;
+		const offHoverDecrement = 0.01;
+	
+		if (picker.pickedObject === this.mesh) {
+			this.hover = true;
+			if (this.hoverLerpTime < 1) {
+				this.hoverLerpTime += hoverIncrement;
+			}
+			if (this.hoverLerpTime > 1) {
+				this.hoverLerpTime = 1;
+			}
+			this.scale = lerp(this.scale, 2, this.hoverLerpTime);
+		} else {
+			this.hover = false;
+			if (this.hoverLerpTime > 0) {
+				this.hoverLerpTime -= offHoverDecrement;
+			}
+			if (this.hoverLerpTime < 0) {
+				this.hoverLerpTime = 0;
+			}
+			this.scale = lerp(this.scale, 1, 1 - this.hoverLerpTime);
+		}
+	
+		this.UpdateScale(this.scale);
+	}
+
+	
+
+
+}
+
+let scene, camera, renderer, cube;
+let texture, planeMat, mesh, moloch_txt;
+let lastTime = 0; // Keep track of the last frame time
+let textGeo, textWidth, textMaterial, textMesh;
+let text_Geometries = [];
+const pickPosition = {x: 0, y: 0};
+const pickHelper = new PickHelper();
+const object_list = []
+const object_count = 20;
+const fontLoader = new FontLoader();
+
+function init() {
+  
+  // Texture Loader 
+  const loader = new THREE.TextureLoader();
+  texture = loader.load('/images/website/checker.png');
+
+  // Create a renderer and attach it to our document
+  renderer = new THREE.WebGLRenderer({ antialias: true });
+  renderer.shadowMap.enabled = true;
+  renderer.setSize(window.innerWidth, window.innerHeight - 100);
+  document.getElementById('container').appendChild(renderer.domElement);
+  document.getElementById('container').style.overflowY = 'hidden';
+
+  // Create the scene
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color('black');
+
+  // Camera Setup
+  const aspect = window.innerWidth / (window.innerHeight - 100); // Adjust for nav height
+  const frustumSize = 10;
+  camera = new THREE.OrthographicCamera(
+  	frustumSize * aspect / -2,
+  	frustumSize * aspect / 2,
+  	frustumSize / 2,
+  	frustumSize / -2,
+  	0.1,
+  	5000
+  );
+  
+  //const controls = new OrbitControls(camera, renderer.domElement);
+
+  camera.position.z = 20;
+
+  // Fetch JSON data
+  fetch('../json/articles.json')
+  .then(response => response.json())
+  .then(jsonData => {
+	for (let i = 0; i < jsonData.length; i++) {
+		let temp_txt = loader.load('../images/' + jsonData[i]['image']);
+		temp_txt.minFilter = THREE.NearestFilter;
+		let title = jsonData[i]['name']
+		let filename =  jsonData[i]['filename']
+		let article = new Article(temp_txt, title, filename, i);
+		article.AddToScene(scene, aspect);
+		object_list.push(article);
+	  }
+  })
+
+  
+
+  // Plane Setup
+  {
+	const planeSize = 40;
+
+	
+	texture.wrapS = THREE.RepeatWrapping;
+	texture.wrapT = THREE.RepeatWrapping;
+	texture.magFilter = THREE.NearestFilter;
+	texture.colorSpace = THREE.SRGBColorSpace;
+	const repeats = planeSize / 1;
+	texture.repeat.set(repeats, repeats);
+
+	const planeGeo = new THREE.SphereGeometry(10);
+	planeMat = new THREE.MeshPhongMaterial({
+		map: texture,
+		side: THREE.DoubleSide,
+	});
+
+	mesh = new THREE.Mesh(planeGeo, planeMat);
+	mesh.position.z = -20
+	scene.add(mesh);
+  }
+
+  // Light Setup
+  {
+    const color = 0xFFFFFF;
+    const intensity = 3;
+    const light = new THREE.DirectionalLight(color, intensity);
+    light.castShadow = true;
+    light.position.set(1, 1, 10);
+    light.target.position.set(-0, 0, -0);
+    light.shadow.camera.top = 25;
+    light.shadow.camera.bottom = -25;
+    light.shadow.camera.left = -25;
+    light.shadow.camera.right = 25;
+    light.shadow.camera.zoom = 1;
+    scene.add(light);
+    scene.add(light.target);
+  }
+
+  // Start with an initial timestamp
+  animate(0); 
+}
+
+function animate(time) {
+	requestAnimationFrame(animate);
+
+	// Calculate the time elapsed since the last frame
+	const deltaTime = (time - lastTime) / 1000; // Convert time to seconds
+	lastTime = time;
+
+	pickHelper.pick(pickPosition, scene, camera, time);
+
+	for (let i = 0; i < object_list.length; i++){
+		object_list[i].UpdateRotation(deltaTime);
+		object_list[i].UpdatePosition(deltaTime, pickHelper);
+	}
+  
+	// Update the plane texture offset
+	const scrollSpeed = 0.2;
+	planeMat.map.offset.y += scrollSpeed * deltaTime;
+	planeMat.map.offset.x += scrollSpeed / 0.75 * deltaTime;
+	
+	ChangeCursor();
+	// Render the scene from the perspective of the camera
+	renderer.render(scene, camera);
+}
+
+// Handle window resize
+window.addEventListener('resize', () => {
+  const aspect = window.innerWidth / (window.innerHeight - 100);
+  const frustumSize = 10;
+  camera.left = -frustumSize * aspect / 2;
+  camera.right = frustumSize * aspect / 2;
+  camera.top = frustumSize / 2;
+  camera.bottom = -frustumSize / 2;
+  camera.updateProjectionMatrix();
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(window.innerWidth, window.innerHeight - 100);
+});
+
+
+
+  function getCanvasRelativePosition(event) {
+	const rect = document.querySelector('#container').getBoundingClientRect();
+	return {
+	  x: (event.clientX - rect.left) * window.innerWidth  / rect.width,
+	  y: (event.clientY - rect.top ) * (window.innerHeight - 100) / rect.height,
+	};
+  }
+   
+  function setPickPosition(event) {
+	const pos = getCanvasRelativePosition(event);
+	pickPosition.x = (pos.x / window.innerWidth ) *  2 - 1;
+	pickPosition.y = (pos.y / ( window.innerHeight-100 ) ) * -2 + 1;  // note we flip Y
+  }
+   
+  function clearPickPosition() {
+	// unlike the mouse which always has a position
+	// if the user stops touching the screen we want
+	// to stop picking. For now we just pick a value
+	// unlikely to pick something
+	pickPosition.x = -100000;
+	pickPosition.y = -100000;
+  }
+
+  function objectClicked(event) {
+    if (pickHelper.pickedObject) {
+        // Find the corresponding Article object
+        const pickedArticle = object_list.find(article => article.mesh === pickHelper.pickedObject);
+        if (pickedArticle) {
+            window.location.href = pickedArticle.html;
+        }
+    }
+  }
+
+  function ChangeCursor(){
+	const pickedArticle = object_list.find(article => article.mesh === pickHelper.pickedObject);
+        if (pickedArticle) {
+			document.body.style.cursor = 'pointer';
+            UpdateText(pickedArticle.name);
+        }else{
+			document.body.style.cursor = 'default';
+			UpdateText("");
+		}
+  }
+
+  function UpdateText(text) {
+    MeasureText(text);
+}
+
+function ClearTextGeoList() {
+    for (let i = 0; i < text_Geometries.length; i++) {
+        scene.remove(text_Geometries[i]);
+    }
+    text_Geometries.length = 0;
+}
+
+function MeasureText(text) {
+    fontLoader.load('fonts/Redaction 50_Regular.json', (font) => {
+        let initialFontSize = 1;
+        if (window.innerWidth < 1024) {
+            initialFontSize = 0.5;
+        } else if (window.innerWidth < 512) {
+            initialFontSize = 0.25;
+        }
+
+        const aspect = window.innerWidth / (window.innerHeight - 100); // Adjust for nav height
+        const frustumSize = 10;
+        const orthoWidth = (frustumSize * aspect / 2) - (frustumSize * aspect / -2);
+
+        function createTextGeometry(text, size) {
+            return new TextGeometry(text, {
+                height: 2,
+                depth: 1,
+                font: font,
+                size: size
+            });
+        }
+
+        // Split text into words
+        const split = text.split(" ");
+        const word_count = split.length;
+        const sentences = [];
+
+        let currentText = "";
+        let currentFontSize = initialFontSize;
+        let textGeo;
+
+        for (let i = 0; i < word_count; i++) {
+            const testText = currentText + (currentText ? " " : "") + split[i];
+            textGeo = createTextGeometry(testText, currentFontSize);
+            textGeo.computeBoundingBox();
+            const proportion = textGeo.boundingBox.max.x / orthoWidth;
+
+            if (proportion > 0.8) {
+                if (currentText) {
+                    sentences.push(currentText);
+                }
+                currentText = split[i];
+            } else {
+                currentText = testText;
+            }
+        }
+        if (currentText) {
+            sentences.push(currentText);
+        }
+
+        ClearTextGeoList();
+
+        const numSentences = sentences.length;
+        const totalHeight = (numSentences - 1) * (1.5 * currentFontSize);
+        const startY = totalHeight / 2;
+
+        for (let i = 0; i < sentences.length; i++) {
+            textGeo = createTextGeometry(sentences[i], currentFontSize);
+            textGeo.computeBoundingBox();
+            const proportion = textGeo.boundingBox.max.x / orthoWidth;
+
+            if (proportion > 0.8) {
+                currentFontSize *= 0.8 / proportion;
+                textGeo = createTextGeometry(sentences[i], currentFontSize);
+                textGeo.computeBoundingBox();
+            }
+
+            const textMaterial = new THREE.MeshNormalMaterial();
+            const textMesh = new THREE.Mesh(textGeo, textMaterial);
+
+            const centerOffsetX = (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x) / 2;
+            const centerOffsetY = (textGeo.boundingBox.max.y - textGeo.boundingBox.min.y) / 2;
+            const centerOffsetZ = (textGeo.boundingBox.max.z - textGeo.boundingBox.min.z) / 2;
+
+            textGeo.translate(-centerOffsetX, -centerOffsetY, -centerOffsetZ);
+            textMesh.rotation.x = Math.PI / 2 * 0.05;
+            textMesh.position.y = startY - (i * (1.5 * currentFontSize));
+            textMesh.position.z = 5;
+            text_Geometries.push(textMesh);
+        }
+
+        for (let i = 0; i < text_Geometries.length; i++) {
+            scene.add(text_Geometries[i]);
+        }
+    });
+}
+   
+  window.addEventListener('mousemove', setPickPosition);
+  window.addEventListener('mouseout', clearPickPosition);
+  window.addEventListener('mouseleave', clearPickPosition);
+  window.addEventListener('click', objectClicked)
+
+  // Add touch event listeners
+	window.addEventListener('touchstart', onTouchStart, {passive: false});
+	window.addEventListener('touchmove', onTouchMove, {passive: false});
+	window.addEventListener('touchend', onTouchEnd, {passive: false});
+	window.addEventListener('touchcancel', clearPickPosition);
+
+	let touchStartTime;
+	const touchHoldDuration = 500; // Duration in milliseconds to distinguish between tap and hold
+
+	function onTouchStart(event) {
+		touchStartTime = Date.now();
+		setPickPosition(event.touches[0]);
+	}
+
+	function onTouchMove(event) {
+		setPickPosition(event.touches[0]);
+	}
+
+	function onTouchEnd(event) {
+		const touchDuration = Date.now() - touchStartTime;
+		clearPickPosition();
+		if (touchDuration < touchHoldDuration) {
+			// It's a tap
+			objectClicked(event);
+		} else {
+			// It's a hold
+			// Do nothing extra, as hover effect should already be handled by setPickPosition
+		}
+	}
+
+// Initialize the application
+init();

public/js/mob.js

@@ -0,0 +1,33 @@
+const monster = document.getElementById('monster')
+let x = window.innerWidth / 2
+let y = window.innerHeight / 2
+let dx = 2.5
+let dy = 2.5
+
+
+function init(){
+	monster.style.top =  + "px"
+	monster.style.left = window.innerWidth / 2 + "px"
+	movement()
+}
+
+function movement(){
+	
+	if( x > window.innerWidth - 100 || x <= 0 ){
+		dx *= -1;
+	}
+
+	if( y > (window.innerHeight - 100) || y <= 100 ){
+		dy *= -1;
+	} 
+
+	x += dx
+	y += dy
+
+	monster.style.top = y + "px"
+	monster.style.left = x + "px"
+
+	requestAnimationFrame(movement)
+}
+
+init()

public/js/search.js

@@ -0,0 +1,17 @@
+function filterArticles() {
+    const tagSelect = document.getElementById('tag-select');
+    const selectedTag = tagSelect.value;
+    const articles = document.querySelectorAll('.article');
+
+    articles.forEach(article => {
+        const tags = article.getAttribute('data-tags').split(' ');
+        if (selectedTag === 'all' || tags.includes(selectedTag)) {
+            article.style.display = 'flex';
+        } else {
+            article.style.display = 'none';
+        }
+    });
+}
+
+// Initial call to display all articles
+filterArticles();

public/js/skybox.js

@@ -0,0 +1,51 @@
+const box = document.getElementById('project-container-gallery')
+let x, y
+
+function init(){
+	x = 0
+	y = 0
+	AnimateSkybox()
+}
+
+function AnimateSkybox(){
+	x += 1
+
+	box.style.backgroundPosition = x + "px " + y + "px"
+	requestAnimationFrame(AnimateSkybox) 
+}
+
+// Wait for the DOM to fully load
+document.addEventListener("DOMContentLoaded", function() {
+    // Get all gallery images
+    const galleryImages = document.querySelectorAll("#image-gallery .gallery-image");
+    // Get the focused image container and the focused image
+    const focusedImageContainer = document.getElementById("focused-image-container");
+    const focusedImage = document.querySelector(".focused-image");
+    // Get the gallery container
+    const galleryContainer = document.getElementById("image-gallery");
+    // Get the close button
+    const closeButton = document.getElementById("close-button");
+
+    // Add click event listeners to each gallery image
+    galleryImages.forEach(image => {
+        image.addEventListener("click", function() {
+            // Hide the gallery
+            galleryContainer.style.display = "none";
+            // Update the src of the focused image to the src of the clicked image
+            focusedImage.src = this.src;
+            // Show the focused image container
+            focusedImageContainer.style.display = "flex";
+        });
+    });
+
+    // Add click event listener to the close button
+    closeButton.addEventListener("click", function() {
+        // Hide the focused image container
+        focusedImageContainer.style.display = "none";
+        // Show the gallery
+        galleryContainer.style.display = "flex";
+    });
+});
+
+
+init()