Antigravity × クリエイティブコーディング — p5.js・Three.js・WebGL でインタラクティブアートを AI と共創する

npm install three @types/three

// Three.js シーンの基本セットアップ
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 
// ============ シーン初期化 ============
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x0a0a14)
 
// カメラ（視野角75度、画面のアスペクト比、近クリップ/遠クリップ）
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.set(0, 0, 5)
 
// レンダラー（アンチエイリアスON）
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  powerPreference: 'high-performance'
})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))  // Retinaは最大2倍まで
document.body.appendChild(renderer.domElement)
 
// マウスでカメラを操作できるコントロール
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true  // 慣性を有効化（動きが滑らかになる）
 
// ============ ジオメトリとマテリアル ============
// Icosahedronは球に近い多面体。ジェネレーティブアートに使いやすい
const geometry = new THREE.IcosahedronGeometry(1.5, 1)
const material = new THREE.MeshPhongMaterial({
  color: 0x6644aa,
  emissive: 0x220044,
  wireframe: true,  // ワイヤーフレームで構造を見せる
  transparent: true,
  opacity: 0.8
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
 
// ライティング
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3)
scene.add(ambientLight)
 
const pointLight = new THREE.PointLight(0x8866ff, 2, 20)
pointLight.position.set(3, 3, 3)
scene.add(pointLight)
 
// ============ アニメーションループ ============
let time = 0
 
function animate() {
  requestAnimationFrame(animate)
 
  time += 0.01
 
  // 頂点をノイズで動かす（Antigravityに「有機的な変形」と伝えて実装してもらった）
  const positions = geometry.attributes.position
  for (let i = 0; i < positions.count; i++) {
    const x = positions.getX(i)
    const y = positions.getY(i)
    const z = positions.getZ(i)
 
    // 単純な正弦波による変形（本来はSimplexNoiseを使うとより有機的）
    const offset = Math.sin(x * 2 + time) * 0.15 + Math.cos(y * 2 + time * 0.7) * 0.1
    const len = Math.sqrt(x * x + y * y + z * z)
    const scale = (1.5 + offset) / len
 
    positions.setXYZ(i, x * scale, y * scale, z * scale)
  }
  positions.needsUpdate = true
  geometry.computeVertexNormals()
 
  mesh.rotation.y += 0.003
  mesh.rotation.x += 0.001
 
  controls.update()
  renderer.render(scene, camera)
}
animate()
 
// リサイズ対応
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

// fragmentShader.glsl — ノイズベースの宇宙的表現
// Three.js の ShaderMaterial に渡す GLSL コード
 
uniform float uTime;
uniform vec2 uResolution;
 
varying vec2 vUv;  // 頂点シェーダーから受け取る UV 座標
 
// 2D のハッシュ関数（疑似乱数）
vec2 hash22(vec2 p) {
  p = vec2(dot(p, vec2(127.1, 311.7)),
           dot(p, vec2(269.5, 183.3)));
  return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
}
 
// 2D の Gradient Noise（Perlin ノイズに似た滑らかなノイズ）
float noise(vec2 p) {
  vec2 i = floor(p);
  vec2 f = fract(p);
 
  // Hermite 補間（滑らかな遷移）
  vec2 u = f * f * (3.0 - 2.0 * f);
 
  return mix(
    mix(dot(hash22(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),
        dot(hash22(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),
    mix(dot(hash22(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),
        dot(hash22(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x),
    u.y
  );
}
 
// フラクタルブラウン運動（FBM）— ノイズを重ねて複雑な模様を作る
float fbm(vec2 p) {
  float value = 0.0;
  float amplitude = 0.5;
  float frequency = 1.0;
 
  // 5オクターブ分のノイズを重ねる
  for (int i = 0; i < 5; i++) {
    value += amplitude * noise(p * frequency);
    frequency *= 2.0;   // 周波数を倍に（細かさが増す）
    amplitude *= 0.5;   // 振幅を半分に（影響が弱まる）
  }
  return value;
}
 
void main() {
  vec2 uv = vUv * 3.0;  // UV をスケールして模様の大きさを調整
 
  // 時間とともにゆっくり動くノイズ
  float n = fbm(uv + uTime * 0.1);
  float n2 = fbm(uv * 1.5 + vec2(n, n) + uTime * 0.07);
 
  // 色の計算：青から紫、白への変化
  vec3 colorA = vec3(0.1, 0.1, 0.4);   // 深い青
  vec3 colorB = vec3(0.5, 0.2, 0.8);   // 紫
  vec3 colorC = vec3(0.9, 0.8, 1.0);   // 白みがかった光
 
  vec3 color = mix(colorA, colorB, n);
  color = mix(color, colorC, pow(n2, 3.0));  // 明るい部分を際立たせる
 
  // ビネット効果（端が暗くなる）
  float vignette = 1.0 - length(vUv - 0.5) * 1.5;
  color *= max(0.0, vignette);
 
  gl_FragColor = vec4(color, 1.0);
}

// Three.js で ShaderMaterial を使う実装
const shaderMaterial = new THREE.ShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uResolution: {
      value: new THREE.Vector2(window.innerWidth, window.innerHeight)
    }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: fragmentShaderCode,  // 上記のGLSLコードを文字列として渡す
})
 
// アニメーションループでtimeを更新
function animate() {
  requestAnimationFrame(animate)
  shaderMaterial.uniforms.uTime.value += 0.01
  renderer.render(scene, camera)
}

// コンテキスト喪失への対応
const canvas = renderer.domElement
 
canvas.addEventListener('webglcontextlost', (event) => {
  event.preventDefault()
  console.warn('WebGL context lost. Pausing animation.')
  cancelAnimationFrame(animationId)
}, false)
 
canvas.addEventListener('webglcontextrestored', () => {
  console.log('WebGL context restored. Reinitializing.')
  // シーンを再初期化する
  initScene()
  animate()
}, false)

// パフォーマンスを考慮したピクセル比の設定
// 最大2に抑えることでRetinaの恩恵を受けつつ負荷を下げる
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

// 頂点を変形した後は必ず法線を再計算する
positions.needsUpdate = true
geometry.computeVertexNormals()  // これを忘れがち！

// setup に追加してフレームレートを表示
p.setup = () => {
  // ... 通常の初期化
  p.createP('').id('fps-display')
}
 
// draw の最後に追加
p.draw = () => {
  // ... 描画処理
  document.getElementById('fps-display').innerHTML =
    `FPS: ${p.frameRate().toFixed(1)}`
}

# ビルド
npm run build
 
# Cloudflare Pages へデプロイ（wranglerが必要）
npx wrangler pages deploy dist --project-name my-generative-art

// 高解像度エクスポートのための実装
p.keyPressed = () => {
  if (p.key === 's' || p.key === 'S') {
    // 4K解像度でオフスクリーンに描画
    const exportGraphics = p.createGraphics(3840, 2160)
    drawArtwork(exportGraphics, 3840, 2160)  // 描画ロジックを関数化しておく
    p.save(exportGraphics, `artwork_${Date.now()}.png`)
    exportGraphics.remove()
  }
}