p5.js Playground

Save

Publish

index.html

sketch.js

// p5.js Playground - Generative Art
import p5 from 'p5'
const sketch = (p) => {
  const container = document.getElementById('sketch-container')
  let particles = []
  let hueOffset = 0
  let colorMode = 0 // 0: rainbow, 1: pink, 2: cyan
  
  const colorPalettes = [
    null, // rainbow mode
    [[330, 80, 70], [350, 80, 60], [310, 70, 65]], // pinks
    [[180, 80, 60], [200, 70, 55], [160, 75, 65]], // cyans
  ]
  
  class Particle {
    constructor(x, y) {
      this.pos = p.createVector(x, y)
      this.vel = p5.Vector.random2D().mult(p.random(2, 5))
      this.acc = p.createVector(0, 0)
      this.size = p.random(10, 30)
      this.life = 1
      this.decay = p.random(0.01, 0.03)
      this.hue = hueOffset + p.random(-20, 20)
    }
    
    update() {
      this.vel.add(this.acc)
      this.pos.add(this.vel)
      this.vel.mult(0.98)
      this.acc.mult(0)

Web View

Console

Grok 4.1 Fast Reasoning

Grok 4.1 Fast Non-Reasoning

Grok Code Fast 1

Gemini Flash (Latest)

Claude Haiku 4.5

GPT-5.1 Codex Mini

Claude Sonnet 4.5

GPT-5.1 Codex Max

GPT-5.1 Codex

Gemini 3 Pro

Claude Opus 4.5

GPT-5.2