Skip to content

Commit

Permalink
Create mindscapes.html
Browse files Browse the repository at this point in the history
  • Loading branch information
kai9987kai authored Nov 8, 2024
1 parent ef34a89 commit 7e12d1a
Showing 1 changed file with 232 additions and 0 deletions.
232 changes: 232 additions & 0 deletions mindscapes.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Echoes of Thought: AI Exploration</title>
<style>
/* Background animations and layout */
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #0a0f2c, #2c0a3e);
color: #eaeaea;
overflow: hidden;
height: 100vh;
transition: background-color 3s ease;
animation: colorShift 10s infinite alternate;
perspective: 800px;
}
@keyframes colorShift {
0% { background: #0a0f2c; }
100% { background: #2c0a3e; }
}
.container {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
h1, p, .interactive-box, canvas {
transition: transform 0.1s ease, box-shadow 0.1s ease;
transform-style: preserve-3d;
}
h1 {
font-size: 3em;
margin: 0.2em;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}
p {
font-size: 1.2em;
line-height: 1.6;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}
.interactive-box {
margin-top: 2em;
padding: 1.5em;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}
.button {
padding: 12px 24px;
background-color: #3498db;
border: none;
color: #eaeaea;
border-radius: 5px;
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;
}
.button:hover::after {
opacity: 1;
}
/* Parallax background */
.background-layer {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle, rgba(255,255,255,0.05), rgba(0,0,0,0.2) 60%);
z-index: -2;
filter: blur(8px);
animation: pulse 6s infinite ease-in-out;
}
/* Animated blur pulse */
@keyframes pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
}
</style>
</head>
<body>
<div class="background-layer"></div>
<div class="animated-bg"></div>
<div class="container" id="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>
<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="perlinNoiseCanvas" width="400" height="200" style="margin-top: 1em;"></canvas>
</div>
</div>

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

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

// AI-driven text descriptions for mindscape exploration
const descriptions = [
"Neural nodes connect and pulsate, adapting to cognitive exploration.",
"Smooth Perlin textures shift, representing waves of memory in real-time.",
"Random nodes form patterns, echoing decisions made with Monte Carlo randomness.",
"Layered depths reveal memories, dynamically adapting to your interaction.",
"Diamond-like rays refract thoughts, shifting and weaving into focus."
];

// Parallax and Depth Effect on Mouse Move
const elementsToAnimate = [
document.getElementById('title'),
document.getElementById('description'),
document.getElementById('interactiveBox'),
document.getElementById('rayTracingCanvas'),
document.getElementById('perlinNoiseCanvas')
];

document.addEventListener('mousemove', (event) => {
const x = (window.innerWidth / 2 - event.pageX) / 50;
const y = (window.innerHeight / 2 - event.pageY) / 50;

elementsToAnimate.forEach((el, index) => {
const depth = (index + 1) * 10; // Different depth for each element
el.style.transform = `rotateY(${x}deg) rotateX(${y}deg) translateZ(${depth}px)`;
el.style.boxShadow = `${-x * 2}px ${-y * 2}px 20px rgba(0, 0, 0, 0.3)`;
});
});

// Canvases for layered visual effects
const rayTracingCanvas = document.getElementById("rayTracingCanvas");
const rayTracingCtx = rayTracingCanvas.getContext("2d");
const perlinNoiseCanvas = document.getElementById("perlinNoiseCanvas");
const perlinNoiseCtx = perlinNoiseCanvas.getContext("2d");

// Enhanced Ray Tracing Effect with Colors and Diffusion
function drawDiffusedRayTracingEffect() {
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) {
const red = Math.floor(Math.random() * 255);
const green = Math.floor(Math.random() * 255);
const blue = Math.floor(Math.random() * 255);
const alpha = Math.random() * 0.2 + 0.1;
rayTracingCtx.fillStyle = `rgba(${red}, ${green}, ${blue}, ${alpha})`;

const offsetX = Math.floor(Math.random() * 4 - 2);
const offsetY = Math.floor(Math.random() * 4 - 2);
rayTracingCtx.fillRect(i + offsetX, j + offsetY, 5, 5);
}
}
}

// Animated Perlin Noise Effect with Diffusion
function animateDiffusedPerlinNoise() {
perlinNoiseCtx.clearRect(0, 0, perlinNoiseCanvas.width, perlinNoiseCanvas.height);
let time = Date.now() * 0.0001;
for (let i = 0; i < perlinNoiseCanvas.width; i++) {
for (let j = 0; j < perlinNoiseCanvas.height; j++) {
let 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);

const offsetX = Math.floor(Math.random() * 3 - 1.5);
const offsetY = Math.floor(Math.random() * 3 - 1.5);
perlinNoiseCtx.fillStyle = `rgba(${color}, ${color}, ${255 - color}, 0.3)`;
perlinNoiseCtx.fillRect(i + offsetX, j + offsetY, 1, 1);
}
}
requestAnimationFrame(animateDiffusedPerlinNoise);
}

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

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

document.getElementById('output').textContent = "Generating cognitive landscapes...";
sound.play();

const monteCarloResult = await computeMonteCarlo();
document.getElementById('output').textContent = `${selectedDescription} (Monte Carlo Value: ${monteCarloResult})`;

drawDiffusedRayTracingEffect();
adjustCameraSettings();
}

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)
};
console.log("Camera Settings:", cameraSettings);
document.getElementById('output').textContent += ` | Aperture: ${cameraSettings.aperture}, Lens: ${cameraSettings.lensSize}mm, Depth of Field: ${cameraSettings.depthOfField}, Tilt: ${cameraSettings.tilt}°`;
}

drawDiffusedRayTracingEffect();
animateDiffusedPerlinNoise();
</script>
</body>
</html>

0 comments on commit 7e12d1a

Please sign in to comment.