v©À+È-\ÄÅæáx^xÝ"¬ cordQ text/html M55<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Psychedelic DNA Dynamic System</title>
<style>
body { margin: 0; overflow: hidden; background-color: #000; }
canvas { display: block; }
</style>
<!-- Load Three.js library for WebGL 3D graphics -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
// --- Global Setup ---
let scene, camera, renderer;
let dnaMesh, particleSystem;
let time = 0;
// --- GLSL Shaders ---
// Vertex Shader for the Dynamic Background Particles
const particleVertexShader = `
uniform float time;
attribute float size;
attribute vec3 customColor;
varying vec3 vColor;
void main() {
vColor = customColor;
// Apply swirling motion based on position and time
vec3 newPosition = position;
float speed = 0.5;
// Swirl/Flowing motion
newPosition.x += cos(time * speed + position.y * 0.1) * 2.0;
newPosition.z += sin(time * speed + position.x * 0.1) * 2.0;
newPosition.y += cos(time * 0.2 + position.z * 0.1) * 1.0;
vec4 mvPosition = modelViewMatrix * vec4( newPosition, 1.0 );
gl_PointSize = size * ( 300.0 / -mvPosition.z );
gl_Position = projectionMatrix * mvPosition;
}
`;
// Fragment Shader for the Dynamic Background Particles
const particleFragmentShader = `
uniform sampler2D pointTexture;
varying vec3 vColor;
void main() {
// Calculate distance from center of particle (0.5, 0.5)
float dist = length(gl_PointCoord - vec2(0.5));
// Create a soft, glowing, circular shape (fade out)
float alpha = 1.0 - smoothstep(0.0, 0.5, dist);
// Output the vibrant, dynamic color with the glow effect
gl_FragColor = vec4( vColor, alpha * 0.8 );
}
`;
// Fragment Shader for the Psychedelic DNA Mesh
const dnaFragmentShader = `
uniform float time;
uniform vec3 colorA;
uniform vec3 colorB;
varying vec3 vPosition;
varying vec2 vUv;
// Perlin Noise function (simplified, fast implementation)
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
float snoise(vec3 v){
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
// First corner
vec3 i = floor(v + dot(v, C.yyy) );
vec3 x0 = v - i + dot(i, C.xxx) ;
// Other corners
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );
vec3 x1 = x0 - i1 + C.xxx;
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
// Permutations
i = mod(i, 289.0 );
vec4 p = permute( permute( permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
// Gradients: 7x7x7 points over a cube, mapped to 47 points on a line
float n_ = 1.0/7.0; // 1.0/49.0 * 7.0
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,7)
vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );
vec4 s0 = floor(b0)*2.0 + 1.0;
vec4 s1 = floor(b1)*2.0 + 1.0;
vec4 sh = -step(h, vec4(0.0));
vec4 a0 = b0.xzyw + s0.xzyw*sh.xzyw;
vec4 a1 = b1.xzyw + s1.xzyw*sh.xzyw;
vec3 p0 = vec3(a0.xy,h.x);
vec3 p1 = vec3(a0.zw,h.y);
vec3 p2 = vec3(a1.xy,h.z);
vec3 p3 = vec3(a1.zw,h.w);
//Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
// Mix final noise values
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
m = m * m;
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
dot(p2,x2), dot(p3,x3) ) );
}
void main() {
// Normalized UV coordinates
float u = vUv.x;
float v = vUv.y;
// Generate a dynamic, psychedelic pattern using noise and time
float noiseFactor = snoise(vec3(vPosition.x * 0.5, vPosition.y * 0.2 + time * 0.3, vPosition.z * 0.5));
noiseFactor = pow(abs(noiseFactor), 2.0) * 2.0;
// Mix the two uniform colors based on the noise and V coordinate (height)
vec3 mixedColor = mix(colorA, colorB, v * 0.5 + noiseFactor);
// Apply time-based shifting for the "timelapse" effect
float shift = sin(vPosition.y * 0.1 + time * 1.5) * 0.3;
mixedColor = mix(mixedColor, colorB, shift + u * 0.1);
// Final color: High saturation and brightness
gl_FragColor = vec4(mixedColor, 1.0);
}
`;
// Vertex Shader for the Psychedelic DNA Mesh (simple pass-through with distortion)
const dnaVertexShader = `
uniform float time;
uniform float twistAmount;
varying vec3 vPosition;
varying vec2 vUv;
void main() {
vUv = uv;
vPosition = position;
// Apply a subtle, dynamic distortion to the geometry
float dist = sin(position.y * 0.5 + time * 0.8) * 0.1;
vec3 displacedPosition = position;
displacedPosition.x += dist * sin(position.z + time);
displacedPosition.z += dist * cos(position.x + time);
gl_Position = projectionMatrix * modelViewMatrix * vec4(displacedPosition, 1.0);
}
`;
// --- Initialization Functions ---
function init() {
// App ID for Firebase (not used, but good practice to define)
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
// 1. Scene and Renderer Setup
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2. Camera Setup (Adjusted for better perspective)
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
// 3. Create DNA Double Helix Mesh
createDNA();
// 4. Create Dynamic Particle System Background
createParticles();
// 5. Lighting (Only ambient light, as the colors come from shaders)
const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
scene.add(ambientLight);
// 6. Set up event listener for responsiveness
window.addEventListener('resize', onWindowResize, false);
// Start the animation loop
animate();
}
// Creates the DNA structure using a simple TubeGeometry along a custom helical path
function createDNA() {
const radius = 2;
const height = 15;
const coils = 5;
// Custom path for the helix
class HelixCurve extends THREE.Curve {
constructor(scale = 1) {
super();
this.scale = scale;
}
getPoint(t, optionalTarget = new THREE.Vector3()) {
const point = optionalTarget;
const angle = 2 * Math.PI * coils * t;
point.x = radius * Math.cos(angle);
point.y = (t - 0.5) * height; // Center the helix on Y-axis
point.z = radius * Math.sin(angle);
return point;
}
}
const helixPath = new HelixCurve();
// DNA Rail (A single side of the helix)
const geometry = new THREE.TubeGeometry(helixPath, 200, 0.2, 8, false);
// Psychedelic Shader Material
const dnaMaterial = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0.0 },
colorA: { value: new THREE.Color(0xec4899) }, // Pink
colorB: { value: new THREE.Color(0x38bdf8) }, // Blue
twistAmount: { value: 0.5 }
},
vertexShader: dnaVertexShader,
fragmentShader: dnaFragmentShader,
side: THREE.DoubleSide
});
dnaMesh = new THREE.Mesh(geometry, dnaMaterial);
dnaMesh.rotation.y = Math.PI / 4; // Initial slight rotation
scene.add(dnaMesh);
// Create the second, offset rail by cloning and rotating
const dnaMesh2 = dnaMesh.clone();
dnaMesh2.rotation.z = Math.PI; // Invert/offset the second strand
dnaMesh2.rotation.x = Math.PI / 2; // Invert/offset the second strand
scene.add(dnaMesh2);
// Add a sphere to help visualize the center/start point
const coreGeometry = new THREE.SphereGeometry(1, 16, 16);
const coreMaterial = new THREE.MeshBasicMaterial({ color: 0xff00ff, transparent: true, opacity: 0.1 });
const coreMesh = new THREE.Mesh(coreGeometry, coreMaterial);
scene.add(coreMesh);
}
// Creates a large, dynamic particle system for the background
function createParticles() {
const particleCount = 50000;
const particleGeometry = new THREE.BufferGeometry();
const positions = [];
const colors = [];
const sizes = [];
const colorScale = (i, total) => {
// HSL based color scheme for vibrant, shifting colors
const h = (i / total + time * 0.01) % 1; // Hue shifts over time
const s = 0.8;
const l = 0.5;
return new THREE.Color().setHSL(h, s, l);
};
for (let i = 0; i < particleCount; i++) {
// Position particles randomly in a large volume
positions.push((Math.random() - 0.5) * 200); // X
positions.push((Math.random() - 0.5) * 200); // Y
positions.push((Math.random() - 0.5) * 200); // Z
const color = colorScale(i, particleCount);
colors.push(color.r, color.g, color.b);
// Random size for variety
sizes.push(Math.random() * 5 + 1);
}
particleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
particleGeometry.setAttribute('customColor', new THREE.Float32BufferAttribute(colors, 3));
particleGeometry.setAttribute('size', new THREE.Float32BufferAttribute(sizes, 1));
const particleMaterial = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0.0 },
pointTexture: { value: new THREE.TextureLoader().load('') } // Placeholder texture (can be empty)
},
vertexShader: particleVertexShader,
fragmentShader: particleFragmentShader,
blending: THREE.AdditiveBlending, // Makes particles glow
depthTest: false,
transparent: true
});
particleSystem = new THREE.Points(particleGeometry, particleMaterial);
scene.add(particleSystem);
}
// --- Animation Loop ---
function animate() {
requestAnimationFrame(animate);
time += 0.01;
// 1. Automatic Zoom In/Out (Timelapse Zoom Effect)
// Use a sine wave to smoothly move the camera position in Z-axis
const zoomRange = 5; // How far to zoom in/out
const zoomSpeed = 0.2;
camera.position.z = 10 + Math.sin(time * zoomSpeed) * zoomRange;
camera.lookAt(scene.position); // Always look at the center
// 2. Rotate DNA Mesh (Timlapse Rotation)
if (dnaMesh) {
dnaMesh.rotation.y += 0.005;
dnaMesh.rotation.x += 0.001;
// Update DNA Shader Uniforms
dnaMesh.material.uniforms.time.value = time;
// The cloned mesh shares the material, so it updates too
}
// 3. Update Particle System Uniforms
if (particleSystem) {
particleSystem.material.uniforms.time.value = time;
particleSystem.rotation.z += 0.0001; // Slow background swirl
}
// 4. Render the scene
renderer.render(scene, camera);
}
// --- Responsiveness ---
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Start initialization when the window loads
window.onload = function() {
init();
};
</script>
</body>
</html>hj"1PuQa7K62MiKCtssSLKy1kh56WWU7MtUR5SETapp3D Orditypeordname DotJs #03subTypecollectionItem royaltiesLX[{"type":"address","destination":"18KxjFChgqBvZP9kgUS1GgZSgr2GnDz5BC","percentage":0.1}] subTypeDataLò{"collectionId":"7687ea041cf35376006b3bee888c0d9e9e2d970115f49a32819bb3a12ab85eca_0","mintNumber":"1","rarityLabel":"Uncommon","traits":[{"name":"Type","value":"HTML"},{"name":"Object ","value":"Spiral"},{"name":"Effect","value":"Particle"}]}|SIGMABSM"19LWfSv36ANUAGYbdLpgBREmoDFH1UbL4dA
<5h ð¼_¤×ĶÁ3~Êʤ LGMüP8~(Ûf~ó¢k¨lª·Ü2L Êp Û
TtjV6
Ú0
https://whatsonchain.com/tx/undefined