Claude 3 で画像連携のクリエイティブコーディング

<!DOCTYPE html>
<html>
<head>
  <title>Particle Image Animation with Three.js</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    // シーンの作成
    const scene = new THREE.Scene();

    // カメラの設定
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 500;

    // レンダラーの設定
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 画像の読み込み
    const loader = new THREE.TextureLoader();
    const texture = loader.load('image.jpg', () => {
      const imageData = getImageData(texture.image);
      createParticles(imageData);
    });

    // 画像データの取得
    function getImageData(image) {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const context = canvas.getContext('2d');
      context.drawImage(image, 0, 0);
      return context.getImageData(0, 0, image.width, image.height);
    }

    let particles;
    let targetPositions;
    let initialPositions;
    let step = 0;
    const totalSteps = 200;
    let expanding = false;

    // 粒子の作成
    function createParticles(imageData) {
      const geometry = new THREE.BufferGeometry();
      const positions = new Float32Array(imageData.data.length / 4 * 3);
      const colors = new Float32Array(imageData.data.length / 4 * 3);

      for (let i = 0; i < imageData.data.length; i += 4) {
        const x = (i / 4) % imageData.width;
        const y = Math.floor((i / 4) / imageData.width);

        const r = imageData.data[i] / 255;
        const g = imageData.data[i + 1] / 255;
        const b = imageData.data[i + 2] / 255;

        const index = (i / 4) * 3;
        positions[index] = x - imageData.width / 2;
        positions[index + 1] = -y + imageData.height / 2;
        positions[index + 2] = 0;

        colors[index] = r;
        colors[index + 1] = g;
        colors[index + 2] = b;
      }

      geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
      geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

      const material = new THREE.PointsMaterial({ size: 2, vertexColors: true });

      particles = new THREE.Points(geometry, material);
      scene.add(particles);

      // アニメーションの設定
      targetPositions = positions.slice();
      initialPositions = new Float32Array(positions.length);
      for (let i = 0; i < initialPositions.length; i += 3) {
        initialPositions[i] = Math.random() * 2000 - 1000;
        initialPositions[i + 1] = Math.random() * 2000 - 1000;
        initialPositions[i + 2] = Math.random() * 2000 - 1000;
      }

      // 初期位置の設定
      particles.geometry.attributes.position.array.set(initialPositions);
      particles.geometry.attributes.position.needsUpdate = true;

      animate();
    }

    function animate() {
      requestAnimationFrame(animate);

      const positions = particles.geometry.attributes.position.array;

      if (!expanding) {
        for (let i = 0; i < positions.length; i += 3) {
          positions[i] += (targetPositions[i] - positions[i]) * 0.05;
          positions[i + 1] += (targetPositions[i + 1] - positions[i + 1]) * 0.05;
          positions[i + 2] += (targetPositions[i + 2] - positions[i + 2]) * 0.05;
        }

        if (step < totalSteps) {
          step++;
        } else {
          expanding = true;
          step = 0;
        }
      } else {
        for (let i = 0; i < positions.length; i += 3) {
          positions[i] += (initialPositions[i] - positions[i]) * 0.01;
          positions[i + 1] += (initialPositions[i + 1] - positions[i + 1]) * 0.01;
          positions[i + 2] += (initialPositions[i + 2] - positions[i + 2]) * 0.01;
        }

        if (step < totalSteps) {
          step++;
        } else {
          expanding = false;
          step = 0;
        }
      }

      particles.geometry.attributes.position.needsUpdate = true;

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