Claude 3 で書くクリエイティブコーディング

2024年3月25日
AI BLOG Technology

非常に精度が高い、Claude 3、その精度は日本語だけで無く、プログラミングの側面でもかなりの精度を誇っています。今回はClaude 3を活用することで、より直感的かつクリエイティブなアプローチのコーディングを自然言語で行うことが可能です。

今回はThree.jsを指定した上でコーディングに挑戦してみました。

生成したプログラム

今回は立方体のキューブが空間を飛び交いつつ、マウスの位置によって立方体の色を変えるというアニメーションを自然言語でClaude 3に依頼。Claude 3は、シンプルな自然言語で内容を理解し、対応するコードを自動的に生成します。

実際のコード

<!DOCTYPE html>
<html>
<head>
  <title>Creative Animation with Three.js</title>
  <style>
    body { margin: 0; }
    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 = 5;

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

    // 立方体の作成
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const cubes = [];

    for (let i = 0; i < 50; i++) {
      const materials = [
        new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.8 }),
        new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.6 }),
        new THREE.MeshBasicMaterial({ color: 0x0000ff, transparent: true, opacity: 0.4 }),
        new THREE.MeshBasicMaterial({ color: 0xffff00, transparent: true, opacity: 0.6 }),
        new THREE.MeshBasicMaterial({ color: 0xff00ff, transparent: true, opacity: 0.8 }),
        new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 1.0 })
      ];
      const cube = new THREE.Mesh(geometry, materials);
      cube.position.x = Math.random() * 10 - 5;
      cube.position.y = Math.random() * 10 - 5;
      cube.position.z = Math.random() * 10 - 5;
      scene.add(cube);
      cubes.push(cube);
    }

    // 境界線の作成
    const edgesMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
    cubes.forEach((cube) => {
      const edges = new THREE.EdgesGeometry(cube.geometry);
      const line = new THREE.LineSegments(edges, edgesMaterial);
      cube.add(line);
    });

    // アニメーションループ
    function animate() {
      requestAnimationFrame(animate);

      cubes.forEach((cube, index) => {
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        cube.position.y = Math.sin(Date.now() * 0.001 + index * 0.1) * 2;
      });

      renderer.render(scene, camera);
    }

    // マウスムーブイベントの処理
    document.addEventListener('mousemove', onDocumentMouseMove, false);

    function onDocumentMouseMove(event) {
      const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
      const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

      cubes.forEach((cube) => {
        const distance = Math.sqrt(Math.pow(mouseX - cube.position.x, 2) + Math.pow(mouseY - cube.position.y, 2));
        const hue = Math.floor(distance * 100) % 360;
        cube.material.forEach((material) => {
          material.color.setHSL(hue / 360, 1, 0.5);
        });
      });
    }

    // ウィンドウリサイズ時の処理
    window.addEventListener('resize', onWindowResize, false);

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    // アニメーションの開始
    animate();
  </script>
</body>
</html>