// PixiJS Playground - 2D Graphics
import * as PIXI from 'pixi.js'
const container = document.getElementById('pixi-container')
const objectCountEl = document.getElementById('object-count')
const addBtn = document.getElementById('btn-add')
const clearBtn = document.getElementById('btn-clear')
// Initialize PIXI Application
const app = new PIXI.Application({
width: container.clientWidth,
height: container.clientHeight,
backgroundColor: 0x09090b,
resolution: window.devicePixelRatio || 1,
antialias: true,
})
container.appendChild(app.view)
// Shapes container
const shapes = new PIXI.Container()
app.stage.addChild(shapes)
// Shape colors
const colors = [0xe11d48, 0xf97316, 0xeab308, 0x22c55e, 0x06b6d4, 0x8b5cf6, 0xec4899]
// Create a shape
function createShape(x, y) {
const graphics = new PIXI.Graphics()
const color = colors[Math.floor(Math.random() * colors.length)]
const shapeType = Math.random()
const size = 20 + Math.random() * 30
graphics.beginFill(color)
if (shapeType < 0.33) {
// Circle
graphics.drawCircle(0, 0, size)
} else if (shapeType < 0.66) {
// Rectangle
graphics.drawRoundedRect(-size, -size, size * 2, size * 2, 8)
} else {
// Star
const points = []
for (let i = 0; i < 10; i++) {