Skip to content

Commit

Permalink
Update mindscapes.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@kai9987kai
kai9987kai authored Nov 8, 2024
1 parent c477eed commit ffa02c7
Showing 1 changed file with 114 additions and 73 deletions.
187 changes: 114 additions & 73 deletions mindscapes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,17 @@
<meta charset="UTF-8">
<title>Echoes of Thought: AI Exploration</title>
<style>
/* Background animations and layout */
/* Background and Layout */
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #0a0f2c, #2c0a3e);
color: #eaeaea;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 3s ease;
animation: colorShift 10s infinite alternate;
perspective: 800px;
Expand All @@ -23,7 +26,11 @@
.container {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
h1, p, .interactive-box, canvas {
transition: transform 0.1s ease, box-shadow 0.1s ease;
Expand All @@ -45,6 +52,8 @@
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
width: 400px;
height: 900px; /* Increased height to fit extra canvas */
}
.button {
padding: 12px 24px;
Expand All @@ -55,30 +64,23 @@
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
position: relative;
}
.button:hover {
background-color: #2980b9;
}
.button::after {
content: "Start an immersive journey through AI-generated landscapes.";
position: absolute;
top: -2em;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 5px 10px;
border-radius: 5px;
font-size: 0.8em;
opacity: 0;
transition: opacity 0.3s;
white-space: nowrap;
canvas {
width: 100%;
height: 200px;
display: block;
border-radius: 10px;
margin-top: 1em;
}
.button:hover::after {
opacity: 1;
#output {
margin-top: 1em;
font-size: 1.2em;
color: #ffffff;
}
/* Parallax background */
/* Background layer animation */
.background-layer {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
Expand All @@ -87,7 +89,6 @@
filter: blur(8px);
animation: pulse 6s infinite ease-in-out;
}
/* Animated blur pulse */
@keyframes pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
Expand All @@ -96,25 +97,26 @@
</head>
<body>
<div class="background-layer"></div>
<div class="animated-bg"></div>
<div class="container" id="container">
<div class="container">
<h1 id="title">Echoes of Thought</h1>
<p id="description">Experience a journey of cognitive exploration with AI-driven landscapes, procedural textures, Monte Carlo randomness, and dynamic visual layers.</p>
<p id="description">Experience a journey of cognitive exploration with AI-driven landscapes, procedural textures, and dynamic visual layers.</p>
<div class="interactive-box" id="interactiveBox">
<button class="button" onclick="exploreMindscape()">Explore the Mindscape</button>
<p id="output" style="margin-top: 1em;"></p>
<canvas id="rayTracingCanvas" width="400" height="200" style="margin-top: 1em;"></canvas>
<canvas id="voxelCanvas" width="400" height="200" style="margin-top: 1em;"></canvas>
<p id="output"></p>
<!-- Layered canvases -->
<canvas id="rayTracingCanvas" width="400" height="200"></canvas>
<canvas id="voxelCanvas" width="400" height="200"></canvas>
<canvas id="overlayCanvas" width="400" height="200"></canvas>
<canvas id="threeDCanvas" width="400" height="200"></canvas> <!-- 3D effect voxel layer -->
</div>
</div>

<audio id="backgroundSound" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" loop></audio>

<script>
// Sound Effect Setup
// Sound setup
const sound = document.getElementById("backgroundSound");

// AI-driven text descriptions for mindscape exploration
// AI-driven descriptions for each exploration
const descriptions = [
"Neural nodes connect and pulsate, adapting to cognitive exploration.",
"Smooth Perlin textures shift, representing waves of memory in real-time.",
Expand All @@ -123,15 +125,18 @@ <h1 id="title">Echoes of Thought</h1>
"Diamond-like rays refract thoughts, shifting and weaving into focus."
];

// Parallax and Depth Effect on Mouse Move
// Elements for parallax effect
const elementsToAnimate = [
document.getElementById('title'),
document.getElementById('description'),
document.getElementById('interactiveBox'),
document.getElementById('rayTracingCanvas'),
document.getElementById('voxelCanvas')
document.getElementById('voxelCanvas'),
document.getElementById('overlayCanvas'),
document.getElementById('threeDCanvas')
];

// Mouse move event for parallax effect
document.addEventListener('mousemove', (event) => {
const x = (window.innerWidth / 2 - event.pageX) / 50;
const y = (window.innerHeight / 2 - event.pageY) / 50;
Expand All @@ -143,14 +148,18 @@ <h1 id="title">Echoes of Thought</h1>
});
});

// Canvases for layered visual effects
// Canvases for visual layers
const rayTracingCanvas = document.getElementById("rayTracingCanvas");
const rayTracingCtx = rayTracingCanvas.getContext("2d");
const voxelCanvas = document.getElementById("voxelCanvas");
const voxelCtx = voxelCanvas.getContext("2d");
const overlayCanvas = document.getElementById("overlayCanvas");
const overlayCtx = overlayCanvas.getContext("2d");
const threeDCanvas = document.getElementById("threeDCanvas");
const threeDCtx = threeDCanvas.getContext("2d");

// Persistent Ray Tracing Effect with Intense Colors
function drawDiffusedRayTracingEffect() {
// Persistent Ray Tracing Effect
function drawRayTracingEffect() {
rayTracingCtx.clearRect(0, 0, rayTracingCanvas.width, rayTracingCanvas.height);
for (let i = 0; i < rayTracingCanvas.width; i += 5) {
for (let j = 0; j < rayTracingCanvas.height; j += 5) {
Expand All @@ -167,68 +176,100 @@ <h1 id="title">Echoes of Thought</h1>
}
}

// Animated Voxel Effect with Perlin-like noise
// Voxel Effect with Smooth Color Changes
function drawVoxelEffect() {
voxelCtx.clearRect(0, 0, voxelCanvas.width, voxelCanvas.height);
let time = Date.now() * 0.0003;

let time = Date.now() * 0.0005;
const voxelSize = 10;
for (let x = 0; x < voxelCanvas.width; x += voxelSize) {
for (let y = 0; y < voxelCanvas.height; y += voxelSize) {
const noise = Math.sin(x * 0.1 + time) * Math.cos(y * 0.1 + time);
const color = Math.floor(128 + 128 * noise); // Perlin-like height effect
voxelCtx.fillStyle = `rgba(${color}, ${color}, 255, 0.8)`;

const height = voxelSize + noise * 10; // Varying "height" to mimic 3D voxel
voxelCtx.fillRect(x, y - height / 2, voxelSize, voxelSize);
const noise = Math.sin(x * 0.05 + time) * Math.cos(y * 0.05 + time);
const red = Math.floor(128 + 128 * Math.sin(time + x * 0.1));
const green = Math.floor(128 + 128 * Math.cos(time + y * 0.1));
const blue = Math.floor(128 * noise + 128);
voxelCtx.fillStyle = `rgba(${red}, ${green}, ${blue}, 0.7)`;
voxelCtx.fillRect(x, y, voxelSize, voxelSize);
}
}
requestAnimationFrame(drawVoxelEffect);
}

// Monte Carlo computation for dynamic randomness
function computeMonteCarlo() {
return new Promise((resolve) => {
setTimeout(() => {
let result = 0;
for (let i = 0; i < 1e5; i++) {
result += Math.sin(i) * Math.random();
}
resolve(result.toFixed(2));
}, 100);
});
// Overlay Perlin Noise Layer
function drawOverlayPerlinNoise() {
overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
let time = Date.now() * 0.0002;
for (let i = 0; i < overlayCanvas.width; i++) {
for (let j = 0; j < overlayCanvas.height; j++) {
const noiseValue = Math.sin(i * 0.1 + time) * Math.cos(j * 0.1 + time) + Math.random() * 0.1;
const color = Math.floor(255 * (noiseValue + 1) / 2);
overlayCtx.fillStyle = `rgba(${color}, ${color}, ${255 - color}, 0.3)`;
overlayCtx.fillRect(i, j, 1, 1);
}
}
}

async function exploreMindscape() {
const randomIndex = Math.floor(Math.random() * descriptions.length);
const selectedDescription = descriptions[randomIndex];

document.getElementById('output').textContent = "Generating cognitive landscapes...";
sound.play();
// 3D Voxel Effect on Bottom Layer
function draw3DEffect() {
threeDCtx.clearRect(0, 0, threeDCanvas.width, threeDCanvas.height);
let time = Date.now() * 0.0005;
const voxelSize = 20;
for (let x = 0; x < threeDCanvas.width; x += voxelSize) {
for (let y = 0; y < threeDCanvas.height; y += voxelSize) {
const noise = Math.sin(x * 0.05 + time) * Math.cos(y * 0.05 + time);
const color = Math.floor(128 + 127 * noise);
const height = voxelSize + noise * 10;

const monteCarloResult = await computeMonteCarlo();
document.getElementById('output').textContent = `${selectedDescription} (Monte Carlo Value: ${monteCarloResult})`;
// Set color and shadow for 3D effect
threeDCtx.fillStyle = `rgba(${color}, ${color}, 255, 0.8)`;
threeDCtx.fillRect(x, y - height / 2, voxelSize, height);

drawDiffusedRayTracingEffect();
adjustCameraSettings();
// Shadow effect
threeDCtx.fillStyle = `rgba(0, 0, 0, 0.2)`;
threeDCtx.fillRect(x + 2, y + height / 2, voxelSize, 2);
}
}
}

// Camera Settings Simulation
function adjustCameraSettings() {
const cameraSettings = {
aperture: (Math.random() * 5 + 1).toFixed(1),
lensSize: (Math.random() * 200 + 20).toFixed(1),
exposure: (Math.random() * 2 + 1).toFixed(2),
depthOfField: (Math.random() * 100 + 10).toFixed(1),
tilt: (Math.random() * 20 - 10).toFixed(1),
zoom: (Math.random() * 2 + 1).toFixed(1)
tilt: (Math.random() * 20 - 10).toFixed(1)
};
console.log("Camera Settings:", cameraSettings);
document.getElementById('output').textContent += ` | Aperture: ${cameraSettings.aperture}, Lens: ${cameraSettings.lensSize}mm, Depth of Field: ${cameraSettings.depthOfField}, Tilt: ${cameraSettings.tilt}°`;
document.getElementById("output").textContent += ` | Aperture: ${cameraSettings.aperture}, Lens: ${cameraSettings.lensSize}mm, Depth of Field: ${cameraSettings.depthOfField}, Tilt: ${cameraSettings.tilt}°`;
}

// Monte Carlo Simulation
function computeMonteCarlo() {
let result = 0;
for (let i = 0; i < 1e5; i++) {
result += Math.sin(i) * Math.random();
}
return result.toFixed(2);
}

async function exploreMindscape() {
const randomIndex = Math.floor(Math.random() * descriptions.length);
const selectedDescription = descriptions[randomIndex];
const monteCarloValue = computeMonteCarlo();
document.getElementById("output").textContent = `${selectedDescription} (Monte Carlo Value: ${monteCarloValue})`;
adjustCameraSettings();
sound.play();
}

// Animation loops for each effect
function animate() {
drawRayTracingEffect();
drawVoxelEffect();
drawOverlayPerlinNoise();
draw3DEffect();
requestAnimationFrame(animate);
}

// Persistent visual layers
drawDiffusedRayTracingEffect();
drawVoxelEffect();
// Initialize the animation loop
animate();
</script>
</body>
</html>

0 comments on commit ffa02c7

Please sign in to comment.