423 lines
11 KiB
JavaScript
423 lines
11 KiB
JavaScript
// gif player
|
|
document.querySelectorAll('.paused-animation').forEach(el => {
|
|
el.addEventListener('click', () => {
|
|
el.classList.toggle('active');
|
|
});
|
|
});
|
|
|
|
// track players
|
|
const players = document.querySelectorAll('.track-player');
|
|
|
|
document.addEventListener('DOMContentLoaded', updateAllWaveformWidths);
|
|
window.addEventListener('resize', updateAllWaveformWidths);
|
|
|
|
players.forEach(player => {
|
|
const trackName = player.getAttribute('data-track');
|
|
|
|
const button = document.createElement('div');
|
|
button.className = 'blurgreen play-button play';
|
|
player.appendChild(button);
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'track';
|
|
wrapper.innerHTML = `
|
|
<div class="blurgreen track-container">
|
|
<div class="track-played"></div>
|
|
<div class="track-unplayed"></div>
|
|
</div>
|
|
`;
|
|
player.appendChild(wrapper);
|
|
|
|
const playercontainer = player.querySelector('.track-container');
|
|
const played = player.querySelector('.track-played');
|
|
const unplayed = player.querySelector('.track-unplayed');
|
|
unplayed.style.backgroundImage = `url('tracks/${trackName}.webp')`;
|
|
|
|
const audio = document.createElement('audio');
|
|
audio.style.display = 'none';
|
|
player.appendChild(audio);
|
|
|
|
button.addEventListener('click', () => {
|
|
// pause other players immediately
|
|
players.forEach(p => {
|
|
const otherAudio = p.querySelector('audio');
|
|
const otherBtn = p.querySelector('.play-button');
|
|
if (otherAudio !== audio) {
|
|
if (!otherAudio.paused) otherAudio.pause();
|
|
if (otherBtn) {
|
|
otherBtn.classList.add('play');
|
|
otherBtn.classList.remove('pause');
|
|
}
|
|
}
|
|
});
|
|
|
|
// player needs mp3 url (and played waveform image to lazyload)
|
|
if (!audio.src) {
|
|
played.style.backgroundImage = `url('tracks/${trackName}-played.webp')`;
|
|
audio.src = 'tracks/' + trackName + '.mp3';
|
|
audio.currentTime = 0;
|
|
audio.load();
|
|
|
|
audio.addEventListener('canplay', () => {
|
|
audio.play().then(() => {
|
|
button.classList.remove('play');
|
|
button.classList.add('pause');
|
|
}).catch(() => {
|
|
button.classList.add('play');
|
|
button.classList.remove('pause');
|
|
});
|
|
}, { once: true });
|
|
|
|
return;
|
|
}
|
|
|
|
if (audio.paused) {
|
|
audio.play().then(() => {
|
|
button.classList.remove('play');
|
|
button.classList.add('pause');
|
|
}).catch(() => {
|
|
button.classList.add('play');
|
|
button.classList.remove('pause');
|
|
});
|
|
} else {
|
|
audio.pause();
|
|
button.classList.add('play');
|
|
button.classList.remove('pause');
|
|
}
|
|
});
|
|
|
|
audio.addEventListener('ended', () => {
|
|
button.classList.add('play');
|
|
button.classList.remove('pause');
|
|
});
|
|
|
|
// skip to playback position on waveform interaction
|
|
playercontainer.addEventListener('click', e => {
|
|
const rect = playercontainer.getBoundingClientRect();
|
|
const clickX = e.clientX - rect.left;
|
|
const width = rect.width;
|
|
|
|
const portion = Math.min(Math.max(clickX / width, 0), 1);
|
|
|
|
audio.currentTime = portion * audio.duration;
|
|
});
|
|
|
|
audio.addEventListener('timeupdate', () => {
|
|
const portion = audio.duration ? audio.currentTime / audio.duration : 0;
|
|
updatePlayPosition(played, unplayed, portion);
|
|
});
|
|
});
|
|
|
|
function updatePlayPosition(played_element, unplayed_element, portion) {
|
|
const playedPercent = portion * 100;
|
|
const unplayedPercent = 100 - playedPercent;
|
|
played_element.style.width = playedPercent + "%";
|
|
unplayed_element.style.width = unplayedPercent + "%";
|
|
}
|
|
|
|
function updatePlayerWaveformWidths(player_container_element) {
|
|
const trackWidth = player_container_element.offsetWidth;
|
|
const played_element = player_container_element.querySelector('.track-played');
|
|
const unplayed_element = player_container_element.querySelector('.track-unplayed');
|
|
played_element.style.backgroundSize = trackWidth + "px 80px";
|
|
unplayed_element.style.backgroundSize = trackWidth + "px 80px";
|
|
}
|
|
|
|
function updateAllWaveformWidths() { // required for proper display of played/unplayed waveforms
|
|
players.forEach(player => {
|
|
const container = player.querySelector('.track-container');
|
|
if (container) updatePlayerWaveformWidths(container);
|
|
});
|
|
}
|
|
|
|
|
|
// icosahedron
|
|
window.onload = function() {
|
|
// Make sure three.js is available
|
|
if (typeof THREE === 'undefined') {
|
|
console.error('THREE.js is not loaded from CDN');
|
|
return;
|
|
}
|
|
|
|
// init scene
|
|
const container = document.getElementById('icosahedron-container');
|
|
const containerWidth = container.clientWidth;
|
|
const containerHeight = container.clientHeight;
|
|
|
|
// setup renderer
|
|
const renderer = new THREE.WebGLRenderer({
|
|
antialias: true,
|
|
alpha: true
|
|
});
|
|
renderer.setSize(containerWidth, containerHeight);
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
renderer.setClearColor(0x000000, 0); // transparent
|
|
container.appendChild(renderer.domElement);
|
|
|
|
// setup scene and camera
|
|
const scene = new THREE.Scene();
|
|
const camera = new THREE.PerspectiveCamera(26, containerWidth / containerHeight, 0.1, 100);
|
|
camera.position.z = 4;
|
|
|
|
// icosahedron with manually defined vertices
|
|
function createIcosahedron(radius) {
|
|
// golden ratio
|
|
const t = (1 + Math.sqrt(5)) / 2;
|
|
// normalize radius
|
|
const normRadius = radius / Math.sqrt(1 + t * t);
|
|
|
|
const vertices = [
|
|
[-1, t, 0],
|
|
[1, t, 0],
|
|
[-1, -t, 0],
|
|
[1, -t, 0],
|
|
[0, -1, t],
|
|
[0, 1, t],
|
|
[0, -1, -t],
|
|
[0, 1, -t],
|
|
[t, 0, -1],
|
|
[t, 0, 1],
|
|
[-t, 0, -1],
|
|
[-t, 0, 1]
|
|
].map(v => new THREE.Vector3(v[0] * normRadius, v[1] * normRadius, v[2] * normRadius));
|
|
|
|
// edges (pairs of vertex indices)
|
|
const edges = [
|
|
[0, 11],
|
|
[0, 5],
|
|
[0, 1],
|
|
[0, 7],
|
|
[0, 10],
|
|
[1, 5],
|
|
[1, 7],
|
|
[1, 8],
|
|
[1, 9],
|
|
[2, 3],
|
|
[2, 4],
|
|
[2, 6],
|
|
[2, 10],
|
|
[2, 11],
|
|
[3, 4],
|
|
[3, 6],
|
|
[3, 8],
|
|
[3, 9],
|
|
[4, 5],
|
|
[4, 9],
|
|
[4, 11],
|
|
[5, 9],
|
|
[5, 11],
|
|
[6, 7],
|
|
[6, 8],
|
|
[6, 10],
|
|
[7, 8],
|
|
[7, 10],
|
|
[8, 9],
|
|
[10, 11]
|
|
];
|
|
|
|
return {
|
|
vertices: vertices,
|
|
edges: edges
|
|
};
|
|
}
|
|
|
|
// convert vertex indices to actual vertices and create a line
|
|
function createLine(icosa, edgeIndex, material) {
|
|
const startIndex = icosa.edges[edgeIndex][0];
|
|
const endIndex = icosa.edges[edgeIndex][1];
|
|
|
|
const geometry = new THREE.BufferGeometry();
|
|
const positions = new Float32Array([
|
|
icosa.vertices[startIndex].x, icosa.vertices[startIndex].y, icosa.vertices[startIndex].z,
|
|
icosa.vertices[endIndex].x, icosa.vertices[endIndex].y, icosa.vertices[endIndex].z
|
|
]);
|
|
|
|
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
|
|
|
return new THREE.Line(geometry, material);
|
|
}
|
|
|
|
// create thin back lines, thick front lines
|
|
function createDualLineRendering(radius) {
|
|
const group = new THREE.Group();
|
|
const icosa = createIcosahedron(radius);
|
|
|
|
const backMaterial = new THREE.MeshBasicMaterial({
|
|
color: 0x63a8b8,
|
|
depthTest: false, // don't test depth for back lines
|
|
transparent: true,
|
|
opacity: 0.4,
|
|
side: THREE.DoubleSide
|
|
});
|
|
|
|
const frontMaterial = new THREE.MeshBasicMaterial({
|
|
color: 0xffffff,
|
|
depthTest: true, // depth test for front lines
|
|
transparent: true,
|
|
side: THREE.DoubleSide
|
|
});
|
|
|
|
// cylinders for each edge
|
|
const backRadius = 0.025;
|
|
const frontRadius = 0.035;
|
|
|
|
icosa.edges.forEach((edge, index) => {
|
|
const start = icosa.vertices[edge[0]];
|
|
const end = icosa.vertices[edge[1]];
|
|
|
|
const backLine = createCylinderBetweenPoints(start, end, backRadius, 1, backMaterial);
|
|
backLine.renderOrder = 1;
|
|
group.add(backLine);
|
|
|
|
const frontLine = createCylinderBetweenPoints(start, end, frontRadius, 0.95, frontMaterial);
|
|
frontLine.renderOrder = 3;
|
|
group.add(frontLine);
|
|
});
|
|
|
|
// invisible face material for depth testing
|
|
const faceMaterial = new THREE.MeshBasicMaterial({
|
|
color: 0xffffff,
|
|
transparent: true,
|
|
opacity: 0,
|
|
depthWrite: true,
|
|
side: THREE.DoubleSide
|
|
});
|
|
|
|
// internal icosahedra material
|
|
const internalMaterial = new THREE.MeshBasicMaterial({
|
|
color: 0x63a8b8,
|
|
depthTest: false,
|
|
transparent: true,
|
|
opacity: 0.2,
|
|
side: THREE.DoubleSide
|
|
});
|
|
|
|
// triangles of vertex indices
|
|
const faces = [
|
|
[0, 11, 5],
|
|
[0, 5, 1],
|
|
[0, 1, 7],
|
|
[0, 7, 10],
|
|
[0, 10, 11],
|
|
[1, 5, 9],
|
|
[5, 11, 4],
|
|
[11, 10, 2],
|
|
[10, 7, 6],
|
|
[7, 1, 8],
|
|
[3, 9, 4],
|
|
[3, 4, 2],
|
|
[3, 2, 6],
|
|
[3, 6, 8],
|
|
[3, 8, 9],
|
|
[4, 9, 5],
|
|
[2, 4, 11],
|
|
[6, 2, 10],
|
|
[8, 6, 7],
|
|
[9, 8, 1]
|
|
];
|
|
|
|
// create depth testing and internal icosahedra
|
|
faces.forEach(face => {
|
|
const geometry = new THREE.BufferGeometry();
|
|
const positions = new Float32Array([
|
|
icosa.vertices[face[0]].x, icosa.vertices[face[0]].y, icosa.vertices[face[0]].z,
|
|
icosa.vertices[face[1]].x, icosa.vertices[face[1]].y, icosa.vertices[face[1]].z,
|
|
icosa.vertices[face[2]].x, icosa.vertices[face[2]].y, icosa.vertices[face[2]].z
|
|
]);
|
|
|
|
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
|
|
|
const faceMesh = new THREE.Mesh(geometry, faceMaterial);
|
|
faceMesh.scale.set(0.975, 0.975, 0.975);
|
|
faceMesh.renderOrder = 0;
|
|
group.add(faceMesh);
|
|
|
|
// stack internal icosahedra for volumetric effect
|
|
const internalMesh1 = new THREE.Mesh(geometry, internalMaterial);
|
|
const internalMesh2 = new THREE.Mesh(geometry, internalMaterial);
|
|
const internalMesh3 = new THREE.Mesh(geometry, internalMaterial);
|
|
const internalMesh4 = new THREE.Mesh(geometry, internalMaterial);
|
|
const internalMesh5 = new THREE.Mesh(geometry, internalMaterial);
|
|
internalMesh1.scale.set(0.85, 0.85, 0.85);
|
|
internalMesh1.renderOrder = 1;
|
|
group.add(internalMesh1);
|
|
internalMesh2.scale.set(0.65, 0.65, 0.65);
|
|
internalMesh2.renderOrder = 1;
|
|
group.add(internalMesh2);
|
|
internalMesh3.scale.set(0.5, 0.5, 0.5);
|
|
internalMesh3.renderOrder = 1;
|
|
group.add(internalMesh3);
|
|
internalMesh4.scale.set(0.4, 0.4, 0.4);
|
|
internalMesh4.renderOrder = 1;
|
|
group.add(internalMesh4);
|
|
internalMesh5.scale.set(0.3, 0.3, 0.3);
|
|
internalMesh5.renderOrder = 1;
|
|
group.add(internalMesh5);
|
|
});
|
|
|
|
return group;
|
|
}
|
|
|
|
function createCylinderBetweenPoints(pointX, pointY, radius, lengthmultiplier, material) {
|
|
const direction = new THREE.Vector3().subVectors(pointY, pointX);
|
|
const length = direction.length();
|
|
const geometry = new THREE.CylinderGeometry(radius, radius, length * lengthmultiplier, 4, 1);
|
|
|
|
// default cylinder is along y-axis, rotate it
|
|
geometry.rotateX(Math.PI / 2);
|
|
|
|
const cylinder = new THREE.Mesh(geometry, material);
|
|
|
|
// position and orient cylinder
|
|
const midpoint = new THREE.Vector3().addVectors(pointX, pointY).multiplyScalar(0.5);
|
|
cylinder.position.copy(midpoint);
|
|
cylinder.lookAt(pointY);
|
|
|
|
return cylinder;
|
|
}
|
|
|
|
// create icosahedron
|
|
const icosahedronGroup = createDualLineRendering(0.85);
|
|
scene.add(icosahedronGroup);
|
|
|
|
// animation state
|
|
let animating = true;
|
|
|
|
let lastFrameTime = 0;
|
|
const targetFPS = 20;
|
|
const animMultiplier = 30 / targetFPS;
|
|
const frameDuration = 1000 / targetFPS;
|
|
|
|
function animate(now) {
|
|
requestAnimationFrame(animate);
|
|
|
|
const delta = now - lastFrameTime;
|
|
if (delta < frameDuration) return;
|
|
|
|
lastFrameTime = now;
|
|
|
|
if (animating) {
|
|
icosahedronGroup.rotation.x -= 0.002 * animMultiplier;
|
|
icosahedronGroup.rotation.y += 0.004 * animMultiplier;
|
|
icosahedronGroup.rotation.z -= 0.001 * animMultiplier;
|
|
}
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
animate();
|
|
|
|
window.addEventListener('resize', function() {
|
|
const newWidth = container.clientWidth;
|
|
const newHeight = container.clientHeight;
|
|
|
|
if (newWidth !== containerWidth || newHeight !== containerHeight) {
|
|
camera.aspect = newWidth / newHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(newWidth, newHeight);
|
|
}
|
|
});
|
|
|
|
// console.log('icosahedron wireframe created successfully');
|
|
};
|