You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
5.2 KiB
139 lines
5.2 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>bkf2020 visualizer: visualize the problems I solved using three.js</title> |
|
<meta name="HandheldFriendly" content="true" /> |
|
<meta name="MobileOptimized" content="320" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<link rel="stylesheet" href="style.css"> |
|
<style> |
|
#info { |
|
top: 10px; |
|
width: 100%; |
|
text-align: center; |
|
z-index: 100; |
|
display:block; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<script type="module"> |
|
import * as THREE from 'https://cdn.skypack.dev/three'; |
|
//import { ConvexGeometry } from 'https://cdn.skypack.dev/three/examples/jsm/geometries/ConvexGeometry.js'; |
|
|
|
const renderer = new THREE.WebGLRenderer(); |
|
renderer.setSize( window.innerWidth, window.innerHeight ); |
|
|
|
document.body.appendChild( renderer.domElement ); |
|
|
|
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 ); |
|
camera.position.set( 0, 0, 100 ); |
|
camera.lookAt( 0, 0, 0 ); |
|
|
|
const scene = new THREE.Scene(); |
|
scene.background = new THREE.Color ( 0x200027 ); |
|
|
|
const points = []; |
|
const pointsConvex = []; |
|
var problemsSolved = 117; |
|
for(var i = 0; i < problemsSolved; i++) { |
|
// random points on 25 by 25 by 25 cube |
|
var x = Math.random() * 50 - 25; |
|
var y = Math.random() * 50 - 25; |
|
var z = Math.random() * 50 - 25; |
|
|
|
points.push(x, y, z); |
|
pointsConvex.push(new THREE.Vector3(x, y, z)); |
|
} |
|
|
|
const colors = []; |
|
for(var i = 0; i < problemsSolved; i++) { |
|
var r = Math.random(); |
|
var g = Math.random(); |
|
var b = Math.random(); |
|
colors.push(r, g, b); |
|
} |
|
|
|
const geometry = new THREE.BufferGeometry(); |
|
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute(points, 3) ); |
|
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute(colors, 3) ); |
|
|
|
const material = new THREE.PointsMaterial( { vertexColors: true } ); |
|
const pointscollection = new THREE.Points( geometry, material ); |
|
|
|
//const convexGeometry = new ConvexGeometry( pointsConvex ); |
|
//const materialMesh = new THREE.MeshBasicMaterial( { color: 0x00ff00, opacity: 0.1, transparent: true } ); |
|
//const mesh = new THREE.Mesh( convexGeometry, materialMesh ); |
|
|
|
scene.add( pointscollection ); |
|
//scene.add( mesh ); |
|
|
|
|
|
|
|
function animate() { |
|
requestAnimationFrame( animate ); |
|
pointscollection.rotation.y += 0.004; |
|
//mesh.rotation.y += 0.005; |
|
renderer.render( scene, camera ); |
|
}; |
|
|
|
animate(); |
|
</script> |
|
<div id="info"> |
|
<h1>bkf2020 visualizer</h1> |
|
<p>each dot represents a time I solved a problem in the cslog or mathlog; made with THREE.js</p> |
|
<a href="visualcredits">credits</a> | <a href="/">home</a> |
|
<details> |
|
<summary>MIT License notice for three.js</summary> |
|
<p>The MIT License</p> |
|
|
|
<p>Copyright © 2010-2021 three.js authors</p> |
|
|
|
<p>Permission is hereby granted, free of charge, to any person obtaining a copy |
|
of this software and associated documentation files (the "Software"), to deal |
|
in the Software without restriction, including without limitation the rights |
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|
copies of the Software, and to permit persons to whom the Software is |
|
furnished to do so, subject to the following conditions:</p> |
|
|
|
<p>The above copyright notice and this permission notice shall be included in |
|
all copies or substantial portions of the Software.</p> |
|
|
|
|
|
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
|
THE SOFTWARE.</p> |
|
</details> |
|
<details> |
|
<summary>MIT License for this file <code>visual.html</code></summary> |
|
<p>The MIT License</p> |
|
|
|
<p>Copyright © 2021 bkf2020</p> |
|
|
|
<p>Permission is hereby granted, free of charge, to any person obtaining a copy |
|
of this software and associated documentation files (the "Software"), to deal |
|
in the Software without restriction, including without limitation the rights |
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|
copies of the Software, and to permit persons to whom the Software is |
|
furnished to do so, subject to the following conditions:</p> |
|
|
|
<p>The above copyright notice and this permission notice shall be included in |
|
all copies or substantial portions of the Software.</p> |
|
|
|
|
|
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
|
THE SOFTWARE.</p> |
|
</details> |
|
</div> |
|
</body> |
|
</html>
|
|
|