// ================================================== // Project Imports // ================================================== // App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; /** * In this example: * 1) "Chromatic Pulse" is your original effect (unchanged). * 2) The other four effects each generate MULTIPLE shapes, * each with its own position/rotation, using unique vertex/fragment shaders. * 3) "Crystal Warp" has been updated to produce sharper shapes * and more intense visuals via swirl + fractal shimmer. */ // -------------------------------------------------- // 1) Font Styles // -------------------------------------------------- const fontStyles = ` @font-face { font-family: 'LEMONMILK-Bold'; src: url('https://play.rosebud.ai/assets/LEMONMILK-Bold.otf?szXC') format('opentype'); } @font-face { font-family: 'LEMONMILK-Light'; src: url('https://play.rosebud.ai/assets/LEMONMILK-Light.otf?CFWt') format('opentype'); } `; // -------------------------------------------------- // 2) ORIGINAL Effect: “Chromatic Pulse” (Unchanged) // -------------------------------------------------- // Original Fragment Shader (unchanged) const colorFragmentShader = ` uniform float time; varying vec2 vUv; void main() { vec2 uv = vUv; vec3 color1 = vec3(0.5, 0.0, 1.0); // Purple vec3 color2 = vec3(1.0, 0.2, 0.5); // Pink float noise = sin(uv.x * 8.0 + time) * sin(uv.y * 6.0 - time * 0.5); noise = pow(0.5 + 0.5 * noise, 2.0); float gradient = sin(time * 0.5) * 0.5 + 0.5; vec3 color = mix(color1, color2, gradient); color *= noise; gl_FragColor = vec4(color, 0.8); } `; // Simple Vertex Shader for Chromatic Pulse const chromaticPulseVertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; /** * createSceneObjects for Chromatic Pulse: * Returns a single TorusKnot (just like your original). */ function createChromaticPulseObjects(uniforms) { // Torus Knot geometry const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16); const material = new THREE.ShaderMaterial({ vertexShader: chromaticPulseVertexShader, fragmentShader: colorFragmentShader, uniforms: uniforms, transparent: true, }); const torusKnot = new THREE.Mesh(geometry, material); torusKnot.position.y = 1; // Slight lift return [torusKnot]; // Return as an array so we can add them all to the scene } // -------------------------------------------------- // 3) NEW Effects: Distinct Vertex + Fragment Shaders // and createSceneObjects returning MULTIPLE shapes // -------------------------------------------------- // // 3a) "Neon Spiral" (Multiple spheres orbiting a main sphere) // const neonSpiralVertexShader = ` uniform float time; varying vec2 vUv; void main() { vUv = uv; // We'll do a subtle sine wave displacement in y vec3 pos = position; float wave = 0.05 * sin((pos.x + pos.z) * 5.0 + time * 5.0); pos.y += wave; gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } `; const neonSpiralFragmentShader = ` uniform float time; varying vec2 vUv; void main() { // We'll create a neon gradient effect vec2 uv = vUv; float val = sin(uv.y * 10.0 - time * 4.0) * 0.5 + 0.5; vec3 colorA = vec3(0.0, 1.0, 1.0); // bright cyan vec3 colorB = vec3(0.0, 0.3, 0.3); // deeper teal vec3 color = mix(colorB, colorA, val); gl_FragColor = vec4(color, 1.0); } `; function createNeonSpiralObjects(uniforms) { const objects = []; // Main sphere const mainGeo = new THREE.SphereGeometry(1.2, 32, 32); const mainMat = new THREE.ShaderMaterial({ vertexShader: neonSpiralVertexShader, fragmentShader: neonSpiralFragmentShader, uniforms, }); const mainMesh = new THREE.Mesh(mainGeo, mainMat); mainMesh.position.y = 1; objects.push(mainMesh); // Four small spheres orbiting for (let i = 0; i < 4; i++) { const smallGeo = new THREE.SphereGeometry(0.3, 16, 16); const smallMat = mainMat.clone(); // same shader const smallMesh = new THREE.Mesh(smallGeo, smallMat); // Position each small sphere around the main sphere const angle = (Math.PI * 2 * i) / 4; const radius = 2.0; smallMesh.position.set( Math.cos(angle) * radius, 1, Math.sin(angle) * radius ); objects.push(smallMesh); } return objects; } // // 3b) "Acidic Garden" (Multiple small “flowers” in random positions) // - Vibrant green color theme // - Gentle wave in the vertex shader // const acidicGardenVertexShader = ` uniform float time; varying vec2 vUv; void main() { vUv = uv; vec3 pos = position; // Gentle vertical wave float wave = 0.1 * sin(time * 3.0 + pos.x * 5.0 + pos.z * 5.0); pos.y += wave; gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } `; const acidicGardenFragmentShader = ` uniform float time; varying vec2 vUv; void main() { // Simple gradient from dark green to bright green float factor = vUv.y; // 0 at bottom, 1 at top vec3 colorA = vec3(0.0, 0.2, 0.0); vec3 colorB = vec3(0.4, 1.0, 0.2); vec3 color = mix(colorA, colorB, factor); // Subtle time-based pulsation float pulse = 0.02 * sin(time * 5.0 + vUv.x * 10.0 + vUv.y * 10.0); color += pulse; gl_FragColor = vec4(color, 1.0); } `; function createAcidicGardenObjects(uniforms) { const objects = []; const mat = new THREE.ShaderMaterial({ vertexShader: acidicGardenVertexShader, fragmentShader: acidicGardenFragmentShader, uniforms, }); for (let i = 0; i < 8; i++) { // Randomly pick either a sphere or cylinder const shapeType = Math.random() < 0.5 ? 'sphere' : 'cylinder'; let geometry; if (shapeType === 'sphere') { geometry = new THREE.SphereGeometry(0.4, 16, 16); } else { geometry = new THREE.CylinderGeometry(0.2, 0.2, 0.8, 16); } // Create mesh const mesh = new THREE.Mesh(geometry, mat.clone()); // Random position around XZ plane const x = (Math.random() - 0.5) * 6; const z = (Math.random() - 0.5) * 6; mesh.position.set(x, 1, z); // Small random rotation mesh.rotation.y = Math.random() * Math.PI * 2; objects.push(mesh); } return objects; } // // 3c) "Lava City" (Multiple cubes of various sizes at random XZ positions) // - Lava-like red/orange shading // const lavaCityVertexShader = ` uniform float time; varying vec2 vUv; void main() { vUv = uv; // Subtle bouncing vec3 pos = position; pos.y += 0.1 * sin(time * 2.0 + pos.x + pos.z); gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } `; const lavaCityFragmentShader = ` varying vec2 vUv; uniform float time; void main() { // We'll create a lava-like gradient from red to yellow float val = vUv.y; vec3 col1 = vec3(0.8, 0.0, 0.0); vec3 col2 = vec3(1.0, 0.6, 0.0); vec3 col3 = vec3(1.0, 1.0, 0.0); // We'll do a 2-step gradient: col1->col2->col3 vec3 color; if (val < 0.5) { float f = val / 0.5; color = mix(col1, col2, f); } else { float f = (val - 0.5) / 0.5; color = mix(col2, col3, f); } // Extra flicker float flicker = 0.03 * sin(time * 10.0 + vUv.x * 20.0 + vUv.y * 20.0); color += flicker; gl_FragColor = vec4(color, 1.0); } `; function createLavaCityObjects(uniforms) { const objects = []; const mat = new THREE.ShaderMaterial({ vertexShader: lavaCityVertexShader, fragmentShader: lavaCityFragmentShader, uniforms, }); for (let i = 0; i < 10; i++) { // Random sizes const size = 0.5 + Math.random() * 1.0; const geom = new THREE.BoxGeometry(size, size, size); const mesh = new THREE.Mesh(geom, mat.clone()); // Random position const x = (Math.random() - 0.5) * 8; const z = (Math.random() - 0.5) * 8; mesh.position.set(x, size / 2 + 0.5, z); // Random rotation mesh.rotation.y = Math.random() * Math.PI * 2; objects.push(mesh); } return objects; } // // 3d) "Crystal Warp" (Updated to be sharper & cooler) // /** * We'll pick randomly from multiple Platonic solids (tetrahedron, octahedron, * dodecahedron, icosahedron) for sharpness. * The vertex shader adds a swirl around Y + subtle random scale offsets. * The fragment shader uses a fractal-like trig pattern for more intense shimmer. */ const crystalWarpVertexShader = ` uniform float time; varying vec2 vUv; void main() { vUv = uv; vec3 pos = position; // Subtle random scale factor so each shape has a slightly different size float randomScale = 0.9 + 0.2 * sin(time + position.x + position.y); pos *= randomScale; // Swirl around Y based on distance from center vec2 centerPos = vec2(0.0, 0.0); vec2 xy = vec2(pos.x, pos.z); float dist = length(xy - centerPos); float swirlAngle = time * 0.6 + dist * 2.0; // swirl factor float s = sin(swirlAngle); float c = cos(swirlAngle); float x = xy.x * c - xy.y * s; float y = xy.x * s + xy.y * c; pos.x = x; pos.z = y; // Slight vertical bob pos.y += 0.1 * sin(time * 2.0 + pos.x + pos.z); gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); } `; const crystalWarpFragmentShader = ` uniform float time; varying vec2 vUv; void main() { // We'll do a fractal shimmer using multiple layers of sin/cos float freq = 5.0; float shimmer1 = sin(vUv.x * freq + time * 3.0) * cos(vUv.y * freq - time * 2.0); float shimmer2 = cos(vUv.x * freq * 2.0 - time * 4.0) * sin(vUv.y * freq * 2.0 + time * 3.0); float combined = shimmer1 + 0.5 * shimmer2; // a bit of fractal layering // Map combined from [-1..1] to [0..1] float shimmer = 0.5 + 0.5 * combined; // Shift from purple to aqua to highlight vec3 colorA = vec3(0.7, 0.2, 1.0); vec3 colorB = vec3(0.2, 1.0, 1.0); vec3 color = mix(colorA, colorB, shimmer); // Occasional highlight float highlight = step(0.85, shimmer); // if shimmer > 0.85 if (highlight > 0.0) { // intensify the highlight color = mix(color, vec3(1.0, 1.0, 1.0), highlight * 0.6); } gl_FragColor = vec4(color, 1.0); } `; function createCrystalWarpObjects(uniforms) { const objects = []; const mat = new THREE.ShaderMaterial({ vertexShader: crystalWarpVertexShader, fragmentShader: crystalWarpFragmentShader, uniforms, }); // Platonic solids const shapeTypes = [ THREE.TetrahedronGeometry, THREE.OctahedronGeometry, THREE.DodecahedronGeometry, THREE.IcosahedronGeometry ]; // Make 7 shapes scattered around for (let i = 0; i < 7; i++) { // Pick a random shape const ShapeClass = shapeTypes[Math.floor(Math.random() * shapeTypes.length)]; // random size const radius = 0.5 + Math.random() * 0.6; const detail = 0; // 0 is already quite sharp const geo = new ShapeClass(radius, detail); const mesh = new THREE.Mesh(geo, mat.clone()); // random position const x = (Math.random() - 0.5) * 4; const y = 1 + (Math.random() - 0.5) * 2; const z = (Math.random() - 0.5) * 4; mesh.position.set(x, y, z); // random rotation mesh.rotation.x = Math.random() * Math.PI * 2; mesh.rotation.y = Math.random() * Math.PI * 2; objects.push(mesh); } return objects; } // -------------------------------------------------- // 4) Define the Array of Effects // -------------------------------------------------- const effects = [ { title: "Chromatic Pulse", quote: "I wanted to capture that moment when light and color merge into pure emotion. My goal was to create a living, breathing digital space where mathematics meets poetry in motion.", color: "#FF3388", createSceneObjects: createChromaticPulseObjects, }, { title: "Neon Spiral", quote: "A swirl of neon orbs that dance in unison—like a city night's infinite energy.", color: "#00FFFF", createSceneObjects: createNeonSpiralObjects, }, { title: "Acidic Garden", quote: "A neon-green alien landscape blossoming into the unknown.", color: "#39FF14", // super vibrant green createSceneObjects: createAcidicGardenObjects, }, { title: "Lava City", quote: "Burning cubes of molten rock—an urban structure rising from the fires below.", color: "#FF6600", createSceneObjects: createLavaCityObjects, }, { title: "Crystal Warp", quote: "Sharper cosmic jewels swirling in a fractal shimmer—otherworldly brilliance at every angle.", color: "#6B83FF", createSceneObjects: createCrystalWarpObjects, }, ]; // ================================================== // General Notes for Rosie AI // ================================================== // Note: In sandboxed environments, avoid using

elements and traditional // form submissions as they may be blocked by security policies. Instead, use // controlled components with direct event handlers (onClick, onChange, etc.). // ================================================== // ChatAIClass Definition // ================================================== // This module provides a class, ChatAIClass, which uses a ChatManager (provided externally) // to conduct a conversation with an AI. The AI's behavior is defined by a description string, // and the ChatAIClass offers a simple getResponse method to get AI responses. // // This is AI is powered by Rosebud AI and is Rosebud's method to add in-game AI features. // // IMPORTANT NOTE: // - Do not assume how ChatManager works beyond what is described here. // - We only know that: // 1. ChatManager is constructed by passing in a description string. // 2. We can add messages by calling chatManager.addMessage('user', prompt). // 3. We can get an AI-generated response by calling chatManager.getCharacterResponse('classify'). // - Any other assumptions about ChatManager internals or methods should not be made. // // This code can be used in any JS project by simply importing this class and using it. // Defines how the AI should behave. This should change to match the project. const AI_BEHAVIOR_DESCRIPTION = ` You are an advanced and knowledgeable AI system capable of assisting users with a wide range of topics. You should respond concisely and helpfully, ensuring that the information you provide is accurate, clear, and context-aware. `; export class ChatAIClass { constructor() { // Directly create a new ChatManager instance with the AI behavior description. // We assume ChatManager is available globally or imported from elsewhere. this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } /** * Generates a response from the AI based on the given prompt. * * @param {string} prompt - The user's input or question. * @returns {Promise} - The AI's response as text. */ async getResponse(prompt) { // Add the user's message to the conversation. this.chatManager.addMessage('user', prompt); // Ask the ChatManager for the AI's response const response = await this.chatManager.getCharacterResponse('classify'); // Add the AI's message to the conversation so it has memory of it. this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const App = () => { const mountRef = useRef(null); // Tracks which effect index we're currently displaying const [currentEffect, setCurrentEffect] = useState(0); // For fade-out/fade-in transition const [isTransitioning, setIsTransitioning] = useState(false); // Our UI text content (title, quote, color) const [content, setContent] = useState({ title: effects[0].title, quote: effects[0].quote, color: effects[0].color, }); // Uniforms shared with each shader const uniformsRef = useRef({ time: { value: 0 }, }); useEffect(() => { // -------------------------------------------------- // Add style tag for fonts // -------------------------------------------------- const style = document.createElement('style'); style.textContent = fontStyles; document.head.appendChild(style); // -------------------------------------------------- // THREE.js: Scene, Camera, Renderer // -------------------------------------------------- const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); scene.background = new THREE.Color(0x000000); // -------------------------------------------------- // Add the objects for the current effect // -------------------------------------------------- const effectObj = effects[currentEffect]; const objectsArray = effectObj.createSceneObjects(uniformsRef.current); objectsArray.forEach((obj) => { scene.add(obj); }); // -------------------------------------------------- // Handle Window Resize // -------------------------------------------------- const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; const pixelRatio = window.devicePixelRatio; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); renderer.setPixelRatio(pixelRatio); // Reposition camera camera.position.set(0, 2, 8); }; renderer.setPixelRatio(window.devicePixelRatio); renderer.setClearColor(0x000000, 1); mountRef.current.appendChild(renderer.domElement); handleResize(); // Set initial dimensions window.addEventListener('resize', handleResize); // Camera initial position camera.position.set(0, 2, 8); camera.lookAt(0, 1, 0); // -------------------------------------------------- // Animation Loop // -------------------------------------------------- const animate = () => { requestAnimationFrame(animate); // Update time uniform uniformsRef.current.time.value += 0.01; // Rotate each object a bit (or do something else) objectsArray.forEach((mesh) => { mesh.rotation.y += 0.01; }); renderer.render(scene, camera); }; animate(); // -------------------------------------------------- // Cleanup // -------------------------------------------------- return () => { window.removeEventListener('resize', handleResize); if (mountRef.current) { mountRef.current.removeChild(renderer.domElement); } // Dispose objectsArray.forEach((obj) => { obj.geometry && obj.geometry.dispose(); obj.material && obj.material.dispose(); }); renderer.dispose(); }; }, [currentEffect]); return (

{/* The Three.js Mount Point */}

{/* Title & Quote UI */}

{content.title}

{content.quote}

{/* Next Shader Button */}

); }; // ================================================== // 5) Render App // ================================================== const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();

Other games like this

About 3D Shader Artist Portfolio