diff --git a/index.html b/index.html index a755d48..8895e1d 100644 --- a/index.html +++ b/index.html @@ -19,47 +19,6 @@ - - - \ No newline at end of file diff --git a/view/controls.js b/view/controls.js index 6e2d75a..fc39151 100644 --- a/view/controls.js +++ b/view/controls.js @@ -1,6 +1,8 @@ import * as THREE from "three"; let isMousePressed = false +let sensetivityX = 0.5; +let sensetivityY = 1.; export class SpiralCamera { constructor(canvas, segmentHeight) { @@ -13,8 +15,6 @@ export class SpiralCamera { this.segmentHeight = segmentHeight; this.viewingYear = new Date().getFullYear(); - console.log(this.canvas) - this.camera.position.z = this.distance; addEventListener('mousedown', (event) => { @@ -34,7 +34,7 @@ export class SpiralCamera { let horizontal = event.movementX; let vertical = event.movementY; Math.abs(horizontal) > Math.abs(vertical)? vertical = 0 : horizontal = 0; - this.updateCameraPosition(horizontal, vertical); + this.updateCameraPosition(horizontal * sensetivityX, vertical * sensetivityY); } }); diff --git a/view/graphics.js b/view/graphics.js index b3b911c..d5800ec 100644 --- a/view/graphics.js +++ b/view/graphics.js @@ -4,9 +4,7 @@ import { SpiralCamera } from './controls.js'; import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; import { FontLoader } from 'three/addons/loaders/FontLoader.js'; -const segmentHeight = 2; -// let spiralMaterial = new THREE.MeshPhongMaterial({ color: 0x0f0f0f }); const spiralMaterial = new THREE.ShaderMaterial( { uniforms: { @@ -15,17 +13,70 @@ const spiralMaterial = new THREE.ShaderMaterial( { position: new THREE.Vector3() }, - vertexShader: document.getElementById( 'vertexShader' ).textContent, - fragmentShader: document.getElementById( 'fragmentShader' ).textContent + // vertexShader: document.getElementById( 'vertexShader' ).textContent, + // fragmentShader: document.getElementById( 'fragmentShader' ).textContent, + vertexShader: ` + const float PI = 3.14159; + + varying vec4 v_color; + varying float deg; + + void main() { + deg = degrees(atan(position.z, position.x)) ; + if (deg <= 0.) deg = 360. + deg; + + gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x, position.y, position.z, 1.0); + } + `, + fragmentShader: ` + const float PI = 3.14159; + + varying vec4 v_color; + varying float deg; + varying float toDiscard; + + vec4 colors[12] = vec4[12]( + vec4(0.202, 0.2406, 0.5922, 1), // jan + vec4(0.0980, 0.4627, 0.8235, 1), // feb + vec4(0.3984, 0.7305, 0.4141, 1), // mar + vec4(0.2188, 0.5547, 0.2344, 1), // apr + vec4(27./256., 94./256., 32./256., 1), // may + vec4(205./256., 220./256., 57./256., 1), // jun + vec4(255./256., 238./256., 88./256., 1), // jul + vec4(251./256., 192./256., 45./256., 1), // aug + vec4(255./256., 160./256., 0, 1), // sep + vec4(245./256., 124./256., 0, 1), // oct + vec4(230./256., 74./256., 25./256., 1), // nov + vec4(144./256., 164./256., 174./256., 1) // dec + ); + + void main() { + if (int(round(deg)) % 30 == 0) discard; + + int month = int((deg / 30.)); + vec4 color = mix(colors[month], colors[month + 1], (deg - float(month) * 30.) / 30.); + + gl_FragColor = color; + } + ` } ); +const segmentHeight = 2; + +let segments = []; +let viewingYear = new Date().getFullYear(); +let viewDistance = 5; + +//setting scene const scene = new THREE.Scene(); +//setting canvas var canvas = document.querySelector('#canvas'); const renderer = new THREE.WebGLRenderer({ antialias: true, canvas }); document.body.appendChild(renderer.domElement); +//setting camera const camera = (new SpiralCamera(canvas, segmentHeight)); // setting light @@ -37,59 +88,31 @@ const ambientLight = new THREE.AmbientLight(0xffffff, 10); scene.add(pointLight); scene.add(ambientLight); -let segments = []; -let viewingYear = new Date().getFullYear(); -let viewDistance = 15; -let verticalOffset = 0; -let switched = true; - -// let text = document.createElement('div'); -// text.style.position = 'absolute' -// text.style.width = 100 -// text.style.height = 100 -// text.style.color = "white" -// text.innerHTML = "test" -// text.style.top = 200 + 'px' -// text.style.left = 200 + 'px' -// document.body.appendChild(text) - +//Creating first segments for (let i = 0; i < viewDistance * 2 + 1; i++) { - let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`; - // let material = new THREE.MeshPhongMaterial({ color: color }); - let material = spiralMaterial; - segments.push(new SpiralSegment(viewingYear - viewDistance + i, segmentHeight, material)); + segments.push(new SpiralSegment(viewingYear - viewDistance + i, segmentHeight, spiralMaterial)); scene.add(segments[i].getSegment()); scene.add(segments[i].getText()); -} - -const colors = ["#ff0000", "#ffa500", "#ffff00", "#00ff00", "#0000ff", "#00ffff", "#800080"] +}; addEventListener("changedViewYear", (e) => { let newYear = camera.getViewingYear(); if (newYear > viewingYear) { // + - // let color = colors[(colors.length - 1) - ((newYear + viewDistance) % colors.length)] - // let material = new THREE.MeshBasicMaterial({ color: color }); - let material = spiralMaterial; - scene.remove(segments[0].getSegment()) scene.remove(segments[0].getText()) segments.shift(); - segments.push(new SpiralSegment(newYear + viewDistance, segmentHeight, material)); + segments.push(new SpiralSegment(newYear + viewDistance, segmentHeight, spiralMaterial)); scene.add(segments[segments.length - 1].getSegment()); scene.add(segments[segments.length - 1].getText()); - } else { - // let color = colors[(colors.length - 1) - ((newYear - viewDistance) % colors.length)] - // let material = new THREE.MeshBasicMaterial({ color: color }); - let material = spiralMaterial; - + } else { // - scene.remove(segments[segments.length - 1].getSegment()) scene.remove(segments[segments.length - 1].getText()) segments.pop(); - segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, material)) + segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, spiralMaterial)) scene.add(segments[0].getSegment()); scene.add(segments[0].getText()); @@ -106,6 +129,7 @@ function animate() { camera.getCamera().updateProjectionMatrix(); } + // moving text along with the camera and spiral for (let i = 0; i < segments.length; i++) { segments[i].getSegment().position.y = ((segments[i].year - camera.getViewingYear()) * segmentHeight + camera.getOffset()); segments[i].getText().position.y = segmentHeight / 2 +(segments[i].year - camera.getViewingYear()) * segmentHeight + camera.getOffset(); diff --git a/view/spiral.js b/view/spiral.js index 8d53d2e..dc25c4b 100644 --- a/view/spiral.js +++ b/view/spiral.js @@ -5,7 +5,7 @@ import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; const calculateSpiralGeometry = (spiralHeight) => { let pointsOfCurve = []; const number = 1000; - for (let i = 0; i <= number; i++) { + for (let i = 1; i < number; i++) { let p = i / number; let x = 5*Math.cos(p * 2 * Math.PI); @@ -16,7 +16,7 @@ const calculateSpiralGeometry = (spiralHeight) => { } let curve = new THREE.CatmullRomCurve3(pointsOfCurve); - return new THREE.TubeGeometry(curve, 400, 0.1, 900, false); + return new THREE.TubeGeometry(curve, 200, 0.1, 200, false); }; const loader = new FontLoader();