summaryrefslogtreecommitdiff
path: root/site/public/assets/js/app
diff options
context:
space:
mode:
Diffstat (limited to 'site/public/assets/js/app')
-rw-r--r--site/public/assets/js/app/face.js254
-rw-r--r--site/public/assets/js/app/prototypes.js1
2 files changed, 0 insertions, 255 deletions
diff --git a/site/public/assets/js/app/face.js b/site/public/assets/js/app/face.js
deleted file mode 100644
index 0a87d2b2..00000000
--- a/site/public/assets/js/app/face.js
+++ /dev/null
@@ -1,254 +0,0 @@
-/* eslint-disable */
-var faceInit = function () {
- var container = document.querySelector("#face_container")
- var camera, controls, scene, renderer
- var mouse = new THREE.Vector2(0.5, 0.5)
- var mouseTarget = new THREE.Vector2(0.5, 0.5)
- var POINT_SCALE = 1.8
- var FACE_POINT_COUNT = 68
- var SWAP_TIME = 500
- var cubes = [], meshes = []
- var currentFace = document.querySelector('.currentFace')
- var introEl = document.querySelector('.intro')
- var faceBuffer = (function () {
- var a = new Array(FACE_POINT_COUNT)
- for (let i = 0; i < FACE_POINT_COUNT; i++) {
- a[i] = new THREE.Vector3()
- }
- return a
- })()
- var lastSprite
- var last_t = 0, start_t = 0
- var bgColor = 0x000000 // 0x191919
- var colors = [
- 0xff3333,
- 0xff8833,
- 0xffff33,
- 0x338833,
- 0x3388ff,
- 0x3333ff,
- 0x8833ff,
- 0xff3388,
- 0xffffff,
- ]
- var swapping = false, swap_count = 0, swapFrom, swapTo, face_names, faces
- init()
-
- function init() {
- fetch("/assets/data/3dlm_0_10.json")
- .then(req => req.json())
- .then(data => {
- face_names = Object.keys(data)
- faces = face_names.map(name => recenter(data[name]))
- setup()
- build(faces[0])
- updateFace(faces[0])
- setCurrentFace(face_names[0])
- swapTo = faces[0]
- animate()
- })
- }
- function setup() {
- var w = window.innerWidth * 2/3
- var h = Math.min(window.innerWidth / 2, window.innerHeight * 0.7)
- camera = new THREE.PerspectiveCamera(70, w/h, 1, 10000)
- camera.position.x = 0
- camera.position.y = 0
- camera.position.z = 200
-
- scene = new THREE.Scene()
- // scene.background = new THREE.Color(bgColor)
-
- renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
- renderer.setPixelRatio(window.devicePixelRatio)
- renderer.setSize(w, h)
- renderer.setClearColor(0x000000, 0);
- container.appendChild(renderer.domElement)
- document.body.addEventListener('mousemove', onMouseMove)
- // renderer.domElement.addEventListener('mousedown', swap)
- // oktween.add({
- // obj: el.style,
- // units: "px",
- // from: { left: 0 },
- // to: { left: 100 },
- // duration: 1000,
- // easing: oktween.easing.circ_out,
- // update: function(obj){
- // console.log(obj.left)
- // }
- // finished: function(){
- // console.log("done")
- // }
- // })
- swap()
- }
- function build(points) {
- var matrix = new THREE.Matrix4()
- var quaternion = new THREE.Quaternion()
-
- for (var i = 0; i < FACE_POINT_COUNT; i++) {
- var p = points[i]
- var geometry = new THREE.BoxBufferGeometry()
- var position = new THREE.Vector3(p[0], p[1], p[2])
- var rotation = new THREE.Euler()
- var scale = new THREE.Vector3()
- var color = new THREE.Color()
- scale.x = scale.y = scale.z = POINT_SCALE
- quaternion.setFromEuler(rotation, false)
- matrix.compose(position, quaternion, scale)
- geometry.applyMatrix(matrix)
- material = new THREE.MeshBasicMaterial({ color: color.setHex(0xffffff) })
- cube = new THREE.Mesh(geometry, material)
- scene.add(cube)
- cubes.push(cube)
- }
-
- meshes = getLineGeometry(points).map((geometry, i) => {
- var color = new THREE.Color()
- var material = new MeshLineMaterial({
- color: color.setHex(colors[i % colors.length]),
- })
- var line = new MeshLine()
- line.setGeometry(geometry, _ => 1.5)
- var mesh = new THREE.Mesh(line.geometry, material)
- mesh.geometry.dynamic = true
- scene.add(mesh)
- return [line, mesh]
- })
- }
- function lerpPoints(n, A, B, C) {
- for (let i = 0, len = A.length; i < len; i++) {
- lerpPoint(n, A[i], B[i], C[i])
- }
- }
- function lerpPoint(n, A, B, C) {
- C.x = lerp(n, A.x, B.x)
- C.y = lerp(n, A.y, B.y)
- C.z = lerp(n, A.z, B.z)
- }
- function lerp(n, a, b) {
- return (b-a) * n + a
- }
- function swap(){
- swap_count = (swap_count + 1) % faces.length
- swapFrom = swapTo || faces[0]
- swapTo = faces[swap_count]
- setCurrentFace(face_names[swap_count])
- oktween.add({
- from: { n: 0 },
- to: { n: 1 },
- duration: 1000,
- easing: oktween.easing.quad_in_out,
- update: function(obj){
- lerpPoints(obj.n, swapFrom, swapTo, faceBuffer)
- updateFace(faceBuffer)
- },
- finished: function(){
- setTimeout(swap, 2000)
- }
- })
- }
- function setCurrentFace(name) {
- name = name.replace('.png', '').split('_').filter(s => !s.match(/\d+/)).join(' ')
- currentFace.innerHTML = name
- // if (lastSprite) {
- // scene.remove(lastSprite)
- // }
- // var sprite = new THREE.TextSprite({
- // textSize: 12,
- // redrawInterval: 1000,
- // material: {
- // color: 0xcccccc,
- // },
- // texture: {
- // text: name,
- // fontFamily: '"Roboto", "Helvetica", sans-serif',
- // },
- // });
- // sprite.position
- // .setX(0)
- // .setY(0)
- // .setZ(0)
- // scene.add(sprite);
- // lastSprite = sprite
- }
- function updateFace(points) {
- updateCubeGeometry(points)
- updateLineGeometry(points)
- }
- function updateCubeGeometry(points) {
- cubes.forEach((cube, i) => {
- const p = points[i]
- cube.position.set(p.x, p.y, p.z)
- })
- }
- function updateLineGeometry(points) {
- getLineGeometry(points).map((geometry, i) => {
- var [line, mesh] = meshes[i]
- line.setGeometry(geometry, _ => 1.5)
- mesh.geometry.vertices = line.geometry.vertices
- mesh.geometry.verticesNeedUpdate = true
- })
- }
- function getLineGeometry(points) {
- return [
- points.slice(0, 17),
- points.slice(17, 22),
- points.slice(22, 27),
- points.slice(27, 31),
- points.slice(31, 36),
- points.slice(36, 42),
- points.slice(42, 48),
- points.slice(48)
- ].map((a, i) => {
- var geometry = new THREE.Geometry()
- a.forEach(p => geometry.vertices.push(p))
- if (i > 4) {
- geometry.vertices.push(a[0])
- }
- return geometry
- })
- }
- function getBounds(obj) {
- return obj.reduce((a, p) => {
- return [
- Math.min(a[0], p[0]),
- Math.max(a[1], p[0]),
- Math.min(a[2], p[1]),
- Math.max(a[3], p[1]),
- Math.min(a[4], p[2]),
- Math.max(a[5], p[2]),
- ]
- }, [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity])
- }
- function recenter(obj) {
- const bounds = getBounds(obj)
- const x_width = (bounds[1] - bounds[0]) / 2
- const y_width = (bounds[3] - bounds[2]) / -3
- const z_width = (bounds[5] - bounds[4]) / 2
- return obj.map(p => {
- p[0] = p[0] - bounds[0] - x_width
- p[1] = -p[1] + bounds[1] + y_width
- p[2] = p[2] - bounds[2] + z_width
- return new THREE.Vector3(p[0], p[1], p[2])
- })
- }
- //
- function onMouseMove(e) {
- mouse.x = e.clientX / window.innerWidth
- mouse.y = e.clientY / window.innerHeight
- }
- function animate(t) {
- requestAnimationFrame(animate)
- renderer.render(scene, camera)
- // scene.rotation.y += 0.01 * Math.PI
- mouseTarget.x += (mouse.x - mouseTarget.x) * 0.1
- mouseTarget.y += (mouse.y - mouseTarget.y) * 0.1
- scene.rotation.x = (mouseTarget.y - 0.5) * Math.PI / 2
- scene.rotation.y = (mouseTarget.x - 0.5) * Math.PI
- currentFace.style.transform = "translateZ(0) rotateY(" + (scene.rotation.y/2) + "rad)"
- // scene.rotation.y += 0.01
- last_t = t
- }
-}
-faceInit() \ No newline at end of file
diff --git a/site/public/assets/js/app/prototypes.js b/site/public/assets/js/app/prototypes.js
deleted file mode 100644
index a7da2e46..00000000
--- a/site/public/assets/js/app/prototypes.js
+++ /dev/null
@@ -1 +0,0 @@
-prototypes.js \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 22:45:22 +0000