------------------------------------------------------------
commit d599b4f9d753a7cf54b14bffa160fdcc384dbe99
Author: ffff:188.241.176.200 <ffff:188.241.176.200@hub.scroll.pub> Date: Fri Oct 25 14:35:56 2024 +0000 Updated fractal.scroll diff --git a/fractal.scroll b/fractal.scroll new file mode 100644 index 0000000..e69de29 ------------------------------------------------------------
commit 14a0d150a37653af92dd417c204e37453bc83cd8
Author: ffff:98.97.141.22 <ffff:98.97.141.22@hub.scroll.pub> Date: Fri Oct 25 05:24:10 2024 +0000 Updated index.scroll diff --git a/index.scroll b/index.scroll index e3b7703..5d39132 100644 --- a/index.scroll +++ b/index.scroll @@ -15,11 +15,11 @@ script To use Click Clone 👆` -three.min.js -stars.js - <div id="controls"> <span>Speed:</span> <input type="range" id="speedSlider" min="0" max="100" value="0" /> <span id="speedValue">0</span> </div> + +three.min.js +stars.js ------------------------------------------------------------
commit d0f0fbc03afd1c0c8de2f0128e5cbc82b2e2ad4a
Author: ffff:98.97.141.22 <ffff:98.97.141.22@hub.scroll.pub> Date: Fri Oct 25 05:22:05 2024 +0000 Updated index.scroll diff --git a/index.scroll b/index.scroll index 9a916f9..e3b7703 100644 --- a/index.scroll +++ b/index.scroll @@ -1,5 +1,7 @@ buildHtml +stars.css + center <form method="post" action="/clone.htm"> <input type="hidden" name="folderName" value="spacecast" > @@ -14,7 +16,6 @@ script Click Clone 👆` three.min.js -stars.css stars.js <div id="controls"> ------------------------------------------------------------
commit f9b0fc87ff402ba7db0c09597e268be8d3d348a8
Author: ffff:98.97.141.22 <ffff:98.97.141.22@hub.scroll.pub> Date: Fri Oct 25 05:21:31 2024 +0000 Updated stars.css diff --git a/stars.css b/stars.css index e69de29..b21830e 100644 --- a/stars.css +++ b/stars.css @@ -0,0 +1,40 @@ + body { + margin: 0; + background: black; + } + #controls { + position: absolute; + top: 10px; + left: 10px; + background: rgba(255, 255, 255, 0.2); + padding: 10px; + border-radius: 5px; + color: white; + } + input, button { + margin: 5px; + padding: 5px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.3); + color: white; + border-radius: 3px; + } + button:hover { + background: rgba(255, 255, 255, 0.2); + } + .slider-container { + display: flex; + align-items: center; + gap: 10px; + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid rgba(255, 255, 255, 0.3); + } + #speedSlider { + flex-grow: 1; + accent-color: #ffffff; + } + #speedValue { + min-width: 3em; + text-align: right; + } \ No newline at end of file ------------------------------------------------------------
commit 623d93a9c3b9a1ecdca2a5026a30023180f75ed6
Author: root <root@hub.scroll.pub> Date: Fri Oct 25 05:20:51 2024 +0000 Deleted stars.html diff --git a/stars.html b/stars.html deleted file mode 100644 index 14028c8..0000000 --- a/stars.html +++ /dev/null @@ -1,51 +0,0 @@ -<style> - body { - margin: 0; - background: black; - } - #controls { - position: absolute; - top: 10px; - left: 10px; - background: rgba(255, 255, 255, 0.2); - padding: 10px; - border-radius: 5px; - color: white; - } - input, button { - margin: 5px; - padding: 5px; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.3); - color: white; - border-radius: 3px; - } - button:hover { - background: rgba(255, 255, 255, 0.2); - } - .slider-container { - display: flex; - align-items: center; - gap: 10px; - margin-top: 10px; - padding-top: 10px; - border-top: 1px solid rgba(255, 255, 255, 0.3); - } - #speedSlider { - flex-grow: 1; - accent-color: #ffffff; - } - #speedValue { - min-width: 3em; - text-align: right; - } - </style> - - <div id="controls"> - - <span>Speed:</span> - <input type="range" id="speedSlider" min="0" max="100" value="0" /> - <span id="speedValue">0</span> - - </div> - ------------------------------------------------------------
commit d64d081fe923efdc02247754aa6ffb9d11125bf0
Author: ffff:98.97.141.22 <ffff:98.97.141.22@hub.scroll.pub> Date: Fri Oct 25 05:20:33 2024 +0000 Updated index.scroll diff --git a/index.scroll b/index.scroll index 8d7c5d3..9a916f9 100644 --- a/index.scroll +++ b/index.scroll @@ -16,3 +16,9 @@ script three.min.js stars.css stars.js + +<div id="controls"> + <span>Speed:</span> + <input type="range" id="speedSlider" min="0" max="100" value="0" /> + <span id="speedValue">0</span> +</div> ------------------------------------------------------------
commit a9e04349333ece47ee3a18bf2148a122dc4baf17
Author: ffff:98.97.141.22 <ffff:98.97.141.22@hub.scroll.pub> Date: Fri Oct 25 05:20:12 2024 +0000 Updated index.scroll diff --git a/index.scroll b/index.scroll index 4dd29e2..8d7c5d3 100644 --- a/index.scroll +++ b/index.scroll @@ -14,4 +14,5 @@ script Click Clone 👆` three.min.js -stars.html +stars.css +stars.js ------------------------------------------------------------
commit 69f53f7aadf16055e8d2cb10f13cee4dc44211a8
Author: ffff:98.97.141.22 <ffff:98.97.141.22@hub.scroll.pub> Date: Fri Oct 25 05:19:59 2024 +0000 Updated stars.css diff --git a/stars.css b/stars.css new file mode 100644 index 0000000..e69de29 ------------------------------------------------------------
commit 7083ba66c68605e44a5c02a67df287870aca5417
Author: ffff:98.97.141.22 <ffff:98.97.141.22@hub.scroll.pub> Date: Fri Oct 25 05:19:51 2024 +0000 Updated stars.js diff --git a/stars.js b/stars.js index e69de29..7a2583f 100644 --- a/stars.js +++ b/stars.js @@ -0,0 +1,174 @@ +let scene, camera, renderer; + let stars = []; + let textMeshes = []; + let zPosition = -5; // Starting Z position for new text + let speed = 0.04; // Current speed (starts paused) + + function init() { + scene = new THREE.Scene(); + scene.background = new THREE.Color(0x000000); + + camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); + camera.position.z = 5; + + renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setSize(window.innerWidth, window.innerHeight); + document.body.appendChild(renderer.domElement); + + // Add lights + const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); + scene.add(ambientLight); + + const pointLight = new THREE.PointLight(0xffffff, 1); + pointLight.position.set(5, 5, 5); + scene.add(pointLight); + + // Create stars + createStars(); + + +window.lines.split("\n").map(line => createText(line)) + + // Add event listeners + document.addEventListener('wheel', onMouseWheel); + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mousedown', onMouseDown); + document.addEventListener('mouseup', onMouseUp); + + // Set up speed slider + const speedSlider = document.getElementById('speedSlider'); + const speedValue = document.getElementById('speedValue'); + speedSlider.addEventListener('input', function(e) { + speed = e.target.value / 500; // Convert to a reasonable speed value + speedValue.textContent = e.target.value; + }); + } + + function createStars() { + const starsGeometry = new THREE.BufferGeometry(); + const starPositions = []; + + for(let i = 0; i < 5000; i++) { + const x = (Math.random() - 0.5) * 2000; + const y = (Math.random() - 0.5) * 2000; + const z = (Math.random() - 0.5) * 2000; + starPositions.push(x, y, z); + } + + starsGeometry.setAttribute('position', + new THREE.Float32BufferAttribute(starPositions, 3)); + + const starsMaterial = new THREE.PointsMaterial({ + color: 0xFFFFFF, + size: 2, + sizeAttenuation: true + }); + + const starField = new THREE.Points(starsGeometry, starsMaterial); + scene.add(starField); + stars.push(starField); + } + + function createText(text) { + // Create canvas for text + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + canvas.width = 512; + canvas.height = 128; + + // Set text properties + context.fillStyle = 'rgba(0, 0, 0, 0)'; // Transparent background + context.fillRect(0, 0, canvas.width, canvas.height); + context.fillStyle = '#ffffff'; // White text + context.font = '60px Arial'; + context.textAlign = 'center'; + context.textBaseline = 'middle'; + context.fillText(text, canvas.width / 2, canvas.height / 2); + + // Create texture from canvas + const texture = new THREE.CanvasTexture(canvas); + + // Create plane geometry for the text + const geometry = new THREE.PlaneGeometry(4, 1); + const material = new THREE.MeshBasicMaterial({ + map: texture, + transparent: true, + side: THREE.DoubleSide + }); + + const textMesh = new THREE.Mesh(geometry, material); + textMesh.position.z = zPosition; // Place text at current Z position + zPosition -= 5; // Move next text further back + + scene.add(textMesh); + textMeshes.push(textMesh); + } + + function updateText() { + const newText = document.getElementById('textInput').value; + createText(newText); + } + + // Mouse control variables + let isMouseDown = false; + let mouseX = 0; + let mouseY = 0; + + function onMouseDown(event) { + isMouseDown = true; + mouseX = event.clientX; + mouseY = event.clientY; + } + + function onMouseUp() { + isMouseDown = false; + } + + function onMouseMove(event) { + if (isMouseDown) { + const deltaX = event.clientX - mouseX; + const deltaY = event.clientY - mouseY; + + camera.position.x += deltaX * 0.01; + camera.position.y -= deltaY * 0.01; + + mouseX = event.clientX; + mouseY = event.clientY; + } + } + + function onMouseWheel(event) { + camera.position.z += event.deltaY * 0.01; + + // Animate stars when zooming + stars.forEach(starField => { + starField.rotation.z += event.deltaY * 0.0001; + }); + } + + function animate() { + requestAnimationFrame(animate); + + // Automatic movement based on speed + if (speed > 0) { + camera.position.z -= speed; + + // Rotate stars based on movement speed + stars.forEach(starField => { + starField.rotation.z += speed * 0.01; + }); + } + + renderer.render(scene, camera); + } + + window.addEventListener('resize', onWindowResize, false); + + function onWindowResize() { + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight); + } + + init(); + animate(); \ No newline at end of file ------------------------------------------------------------
commit 0cc11e6d1a9a042d3df21ed335513f3bea2a4940
Author: ffff:98.97.141.22 <ffff:98.97.141.22@hub.scroll.pub> Date: Fri Oct 25 05:19:49 2024 +0000 Updated stars.html diff --git a/stars.html b/stars.html index 6778ebe..14028c8 100644 --- a/stars.html +++ b/stars.html @@ -48,179 +48,4 @@ <span id="speedValue">0</span> </div> - <script> - let scene, camera, renderer; - let stars = []; - let textMeshes = []; - let zPosition = -5; // Starting Z position for new text - let speed = 0.04; // Current speed (starts paused) - - function init() { - scene = new THREE.Scene(); - scene.background = new THREE.Color(0x000000); - - camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); - camera.position.z = 5; - - renderer = new THREE.WebGLRenderer({ antialias: true }); - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - // Add lights - const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); - scene.add(ambientLight); - - const pointLight = new THREE.PointLight(0xffffff, 1); - pointLight.position.set(5, 5, 5); - scene.add(pointLight); - - // Create stars - createStars(); - -window.lines.split("\n").map(line => createText(line)) - - // Add event listeners - document.addEventListener('wheel', onMouseWheel); - document.addEventListener('mousemove', onMouseMove); - document.addEventListener('mousedown', onMouseDown); - document.addEventListener('mouseup', onMouseUp); - - // Set up speed slider - const speedSlider = document.getElementById('speedSlider'); - const speedValue = document.getElementById('speedValue'); - speedSlider.addEventListener('input', function(e) { - speed = e.target.value / 500; // Convert to a reasonable speed value - speedValue.textContent = e.target.value; - }); - } - - function createStars() { - const starsGeometry = new THREE.BufferGeometry(); - const starPositions = []; - - for(let i = 0; i < 5000; i++) { - const x = (Math.random() - 0.5) * 2000; - const y = (Math.random() - 0.5) * 2000; - const z = (Math.random() - 0.5) * 2000; - starPositions.push(x, y, z); - } - - starsGeometry.setAttribute('position', - new THREE.Float32BufferAttribute(starPositions, 3)); - - const starsMaterial = new THREE.PointsMaterial({ - color: 0xFFFFFF, - size: 2, - sizeAttenuation: true - }); - - const starField = new THREE.Points(starsGeometry, starsMaterial); - scene.add(starField); - stars.push(starField); - } - - function createText(text) { - // Create canvas for text - const canvas = document.createElement('canvas'); - const context = canvas.getContext('2d'); - canvas.width = 512; - canvas.height = 128; - - // Set text properties - context.fillStyle = 'rgba(0, 0, 0, 0)'; // Transparent background - context.fillRect(0, 0, canvas.width, canvas.height); - context.fillStyle = '#ffffff'; // White text - context.font = '60px Arial'; - context.textAlign = 'center'; - context.textBaseline = 'middle'; - context.fillText(text, canvas.width / 2, canvas.height / 2); - - // Create texture from canvas - const texture = new THREE.CanvasTexture(canvas); - - // Create plane geometry for the text - const geometry = new THREE.PlaneGeometry(4, 1); - const material = new THREE.MeshBasicMaterial({ - map: texture, - transparent: true, - side: THREE.DoubleSide - }); - - const textMesh = new THREE.Mesh(geometry, material); - textMesh.position.z = zPosition; // Place text at current Z position - zPosition -= 5; // Move next text further back - - scene.add(textMesh); - textMeshes.push(textMesh); - } - - function updateText() { - const newText = document.getElementById('textInput').value; - createText(newText); - } - - // Mouse control variables - let isMouseDown = false; - let mouseX = 0; - let mouseY = 0; - - function onMouseDown(event) { - isMouseDown = true; - mouseX = event.clientX; - mouseY = event.clientY; - } - - function onMouseUp() { - isMouseDown = false; - } - - function onMouseMove(event) { - if (isMouseDown) { - const deltaX = event.clientX - mouseX; - const deltaY = event.clientY - mouseY; - - camera.position.x += deltaX * 0.01; - camera.position.y -= deltaY * 0.01; - - mouseX = event.clientX; - mouseY = event.clientY; - } - } - - function onMouseWheel(event) { - camera.position.z += event.deltaY * 0.01; - - // Animate stars when zooming - stars.forEach(starField => { - starField.rotation.z += event.deltaY * 0.0001; - }); - } - - function animate() { - requestAnimationFrame(animate); - - // Automatic movement based on speed - if (speed > 0) { - camera.position.z -= speed; - - // Rotate stars based on movement speed - stars.forEach(starField => { - starField.rotation.z += speed * 0.01; - }); - } - - renderer.render(scene, camera); - } - - window.addEventListener('resize', onWindowResize, false); - - function onWindowResize() { - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); - renderer.setSize(window.innerWidth, window.innerHeight); - } - - init(); - animate(); - </script>