leca
/
spiral_calendar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed colors, divided spiral by 12 segments

This commit is contained in:
leca 2024-02-01 22:16:13 +03:00
parent 47a6fceed4
commit e112501565
4 changed files with 67 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
index.html
View File

@ -19,47 +19,6 @@
</script>
<script src="view/graphics.js" type="module"></script>
<script src="view/controls.js" type="module"></script>
<script id="vertexShader" type="x-shader/x-vertex">
const float PI = 3.14159;
varying vec4 v_color;
varying float rad;
void main() {
rad = atan(position.z, position.x) - PI/2.;
if (rad < 0.) rad = 2. * PI - abs(rad);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x, position.y, position.z, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
const float PI = 3.14159;
varying vec4 v_color;
varying float rad;
vec4 colors[12] = vec4[12](
vec4(0.0980, 0.4627, 0.8235, 1), // jan
vec4(0.102, 0.1406, 0.4922, 1), // feb
vec4(1, 0, 1, 1), // mar
vec4(1, 1, 0, 1), // apr
vec4(0, 1, 1, 1), // may
vec4(0, 1, 0, 1), // jun
vec4(1, 0, 0, 1), // jul
vec4(0, 0, 1, 1), // aug
vec4(0.5, 1, 1, 1), // sep
vec4(1, 0.5, 1, 1), // oct
vec4(1, 1, 0.5, 1), // nov
vec4(1, 1, 1, 1) // dec
);
void main() {
int month = int(floor(rad / (PI/6.)));
gl_FragColor = colors[month];
}
</script>
</body>
</html>

6
view/controls.js vendored
View File

@ -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);
}
});

100
view/graphics.js
View File

@ -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();

4
view/spiral.js
View File

@ -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();