[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useRef } from "react" import dynamic from "next/dynamic" import { Button } from "@/components/ui/button" // Dynamically import the P5Component to avoid SSR issues const P5Component = dynamic(() => import("@/components/p5-component"), { ssr: false, }) export default function Home() { const regenerateRef = useRef<() => void>() const handleRegenerate = () => { if (regenerateRef.current) { regenerateRef.current() } } return (

Oil Painting Style Flower Garden

An interactive flower garden with oil painting aesthetics

(regenerateRef.current = fn)} />

Move your mouse over the canvas to interact with the flowers.
Click to add new flowers at the cursor position.

) } [V0_FILE]typescriptreact:file="components/p5-component.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef } from "react" import p5 from "p5" interface P5ComponentProps { onSetRegenerate?: (fn: () => void) => void } export default function P5Component({ onSetRegenerate }: P5ComponentProps) { const containerRef = useRef(null) const sketchRef = useRef() useEffect(() => { if (!containerRef.current) return // Define the p5 sketch const sketch = (p: p5) => { // Canvas settings const canvasWidth = Math.min(800, window.innerWidth - 40) const canvasHeight = 500 // Mouse tracking for velocity const mouseX = 0 const mouseY = 0 let pmouseX = 0 let pmouseY = 0 let mouseVelocityX = 0 let mouseVelocityY = 0 const velocityHistory: number[] = [] const velocityHistoryMax = 5 // Color palettes for oil painting style const skyColors = [ [135, 206, 235], // Sky blue [176, 226, 255], // Light blue [200, 230, 255], // Very light blue [255, 200, 200], // Light pink (for sunset effect) ] const groundColors = [ [120, 100, 80], // Brown [150, 130, 100], // Light brown [130, 150, 100], // Olive green [160, 140, 120], // Tan ] const hillColors = [ [70, 100, 50], // Dark green [90, 120, 70], // Medium green [110, 140, 90], // Light green [130, 160, 110], // Very light green ] const flowerPalettes = [ // Red/pink flowers [ [180, 40, 60], [220, 60, 80], [240, 100, 120], [200, 50, 70], ], // Yellow/orange flowers [ [240, 180, 40], [250, 200, 60], [230, 160, 30], [255, 220, 80], ], // Purple/blue flowers [ [100, 80, 180], [120, 100, 200], [80, 60, 160], [140, 120, 220], ], // White/cream flowers [ [240, 240, 240], [250, 250, 240], [245, 245, 235], [255, 250, 245], ], ] const stemColors = [ [40, 120, 60], [60, 140, 80], [30, 110, 50], [70, 150, 90], ] // Flower data let flowers: any[] = [] let skyPalette: number[] let groundPalette: number[] let hillPalette: number[] // Brush settings const brushSizes = [2, 3, 4, 5] const brushDensity = 80 // Higher means more brush strokes // Background elements let horizonY: number let hillsCount: number let hills: any[] = [] let cloudCount: number let clouds: any[] = [] // Initialize the sketch p.setup = () => { p.createCanvas(canvasWidth, canvasHeight) p.colorMode(p.RGB) // Remove noLoop() to enable continuous animation generateGarden() if (onSetRegenerate) { onSetRegenerate(generateGarden) } } // Generate a new garden function generateGarden() { flowers = [] hills = [] clouds = [] // Select color palettes skyPalette = p.random(skyColors) groundPalette = p.random(groundColors) hillPalette = p.random(hillColors) // Set horizon line horizonY = p.random(canvasHeight * 0.3, canvasHeight * 0.5) // Generate hills hillsCount = p.floor(p.random(2, 5)) for (let i = 0; i < hillsCount; i++) { hills.push({ height: p.random(20, 80), frequency: p.random(0.005, 0.02), phase: p.random(p.TWO_PI), color: hillPalette.map((c) => c + p.random(-20, 20)), y: horizonY - i * p.random(5, 20), }) } // Generate clouds cloudCount = p.floor(p.random(3, 8)) for (let i = 0; i < cloudCount; i++) { clouds.push({ x: p.random(canvasWidth), y: p.random(horizonY * 0.8), width: p.random(50, 150), height: p.random(20, 50), puffiness: p.floor(p.random(3, 7)), speed: p.random(0.1, 0.3), color: [255, 255, 255, p.random(150, 200)], }) } // Create random flowers const flowerCount = p.floor(p.random(15, 25)) for (let i = 0; i < flowerCount; i++) { createRandomFlower() } } // Create a random flower function createRandomFlower() { const x = p.random(50, canvasWidth - 50) const y = p.random(horizonY + 20, canvasHeight - 50) const size = p.random(30, 80) const palette = p.random(flowerPalettes) const stemColor = p.random(stemColors) const petalCount = p.floor(p.random(5, 12)) const stemHeight = p.random(size * 1.5, size * 3) flowers.push({ x, y, size, palette, stemColor, petalCount, stemHeight, rotation: p.random(p.TWO_PI), swayAmount: p.random(0.01, 0.03), swayOffset: p.random(p.TWO_PI), // Add properties for mouse interaction baseX: x, // Original x position baseY: y, // Original y position bendX: 0, // Current x bend amount bendY: 0, // Current y bend amount bendFactor: p.random(0.5, 2), // How much this flower bends (personality) recovering: false, // Whether it's recovering from a bend }) } // Draw the sketch p.draw = () => { // Update mouse velocity updateMouseVelocity() // Paint background with brush strokes paintBackground() // Update flower positions based on mouse updateFlowers() // Sort flowers by y position for proper layering flowers.sort((a, b) => a.y - b.y) // Draw stems first for (const flower of flowers) { drawStem(flower) } // Then draw flowers for (const flower of flowers) { drawFlower(flower) } // Update clouds updateClouds() } // Update mouse velocity function updateMouseVelocity() { mouseVelocityX = p.mouseX - pmouseX mouseVelocityY = p.mouseY - pmouseY // Store velocity history for smoother effect velocityHistory.push(Math.sqrt(mouseVelocityX * mouseVelocityX + mouseVelocityY * mouseVelocityY)) if (velocityHistory.length > velocityHistoryMax) { velocityHistory.shift() } // Update previous mouse position pmouseX = p.mouseX pmouseY = p.mouseY } // Get average mouse velocity function getAverageVelocity() { if (velocityHistory.length === 0) return 0 return velocityHistory.reduce((sum, v) => sum + v, 0) / velocityHistory.length } // Update flowers based on mouse position function updateFlowers() { const mouseInfluenceRadius = 100 // How far the mouse influence reaches const maxBend = 30 // Maximum bend amount const recoveryRate = 0.1 // How quickly flowers recover for (const flower of flowers) { // Calculate distance from mouse to flower const dx = p.mouseX - flower.baseX const dy = p.mouseY - flower.baseY const distance = Math.sqrt(dx * dx + dy * dy) if (distance < mouseInfluenceRadius) { // Mouse is close enough to influence this flower const influence = 1 - distance / mouseInfluenceRadius const velocity = getAverageVelocity() // Calculate bend amount based on mouse velocity and distance const bendStrength = influence * velocity * 0.2 * flower.bendFactor // Bend away from mouse flower.bendX = (-dx / distance) * bendStrength flower.bendY = (-dy / distance) * bendStrength // Clamp maximum bend const bendMagnitude = Math.sqrt(flower.bendX * flower.bendX + flower.bendY * flower.bendY) if (bendMagnitude > maxBend) { const scale = maxBend / bendMagnitude flower.bendX *= scale flower.bendY *= scale } flower.recovering = false } else if (!flower.recovering) { // Start recovery when mouse moves away flower.recovering = true } // Recover to original position if (flower.recovering) { flower.bendX *= 1 - recoveryRate flower.bendY *= 1 - recoveryRate } // Update actual position flower.x = flower.baseX + flower.bendX flower.y = flower.baseY + flower.bendY } } // Update clouds function updateClouds() { for (const cloud of clouds) { cloud.x += cloud.speed if (cloud.x > canvasWidth + cloud.width) { cloud.x = -cloud.width } } } // Paint background with brush strokes function paintBackground() { // Clear canvas p.background(255) // Paint sky paintSky() // Paint hills paintHills() // Paint clouds paintClouds() // Paint ground paintGround() } // Paint sky function paintSky() { // Create gradient sky for (let y = 0; y < horizonY; y++) { const t = y / horizonY const skyColor = skyPalette.map((c) => c * (1 - t * 0.3)) // Lighter at top // Add brush strokes for texture for (let x = 0; x < canvasWidth; x += 20) { const r = skyColor[0] + p.random(-10, 10) const g = skyColor[1] + p.random(-10, 10) const b = skyColor[2] + p.random(-10, 10) p.noStroke() p.fill(r, g, b, p.random(100, 200)) // Draw brush stroke for (let j = 0; j < 3; j++) { const offsetX = p.random(-10, 10) const offsetY = p.random(-5, 5) const brushSize = p.random(15, 25) p.ellipse(x + offsetX, y + offsetY, brushSize, brushSize * 0.5) } } } } // Paint hills function paintHills() { for (const hill of hills) { p.push() // Draw hill with brush strokes for (let x = 0; x < canvasWidth; x += 5) { const hillHeight = Math.sin(x * hill.frequency + hill.phase) * hill.height for (let y = hill.y; y < hill.y + hillHeight; y += 5) { const r = hill.color[0] + p.random(-10, 10) const g = hill.color[1] + p.random(-10, 10) const b = hill.color[2] + p.random(-10, 10) p.noStroke() p.fill(r, g, b, p.random(150, 200)) // Draw brush stroke const brushSize = p.random(5, 10) p.ellipse(x + p.random(-2, 2), y + p.random(-2, 2), brushSize, brushSize * 0.7) } } p.pop() } } // Paint clouds function paintClouds() { for (const cloud of clouds) { p.push() // Draw cloud with brush strokes for (let i = 0; i < cloud.puffiness; i++) { const puffX = cloud.x + i * (cloud.width / cloud.puffiness) const puffY = cloud.y + Math.sin(i * 0.8) * (cloud.height * 0.2) const puffSize = cloud.height * p.random(0.8, 1.2) // Draw puffy part with brush strokes for (let j = 0; j < 20; j++) { const r = cloud.color[0] + p.random(-5, 5) const g = cloud.color[1] + p.random(-5, 5) const b = cloud.color[2] + p.random(-5, 5) const a = cloud.color[3] + p.random(-20, 20) p.noStroke() p.fill(r, g, b, a) // Draw brush stroke const offsetX = p.random(-puffSize / 2, puffSize / 2) const offsetY = p.random(-puffSize / 4, puffSize / 4) const brushSize = p.random(puffSize * 0.5, puffSize) p.ellipse(puffX + offsetX, puffY + offsetY, brushSize, brushSize * 0.6) } } p.pop() } } // Paint ground function paintGround() { // Create textured ground for (let y = horizonY; y < canvasHeight; y += 5) { const t = (y - horizonY) / (canvasHeight - horizonY) for (let x = 0; x < canvasWidth; x += 10) { const colorIndex = p.floor(p.random(groundPalette.length)) const color = groundPalette[colorIndex] // Darken color slightly as it gets closer to viewer (for depth) const r = color[0] * (1 - t * 0.2) + p.random(-10, 10) const g = color[1] * (1 - t * 0.2) + p.random(-10, 10) const b = color[2] * (1 - t * 0.2) + p.random(-10, 10) p.noStroke() p.fill(r, g, b, p.random(150, 200)) // Draw brush stroke const brushSize = p.random(5, 15) p.ellipse(x + p.random(-5, 5), y + p.random(-2, 2), brushSize, brushSize * 0.5) } } } // Draw a flower stem function drawStem(flower: any) { const stemColor = flower.stemColor const startX = flower.x const startY = flower.y const endY = startY + flower.stemHeight // Calculate curve control points // Add mouse influence to the stem curve const controlX = startX + p.sin(p.frameCount * 0.01 + flower.swayOffset) * 30 + flower.bendX * 1.5 // Draw stem with brush strokes for (let i = 0; i < 15; i++) { const r = stemColor[0] + p.random(-20, 20) const g = stemColor[1] + p.random(-20, 20) const b = stemColor[2] + p.random(-20, 20) p.stroke(r, g, b, p.random(150, 200)) p.strokeWeight(p.random(1, 3)) p.noFill() // Add slight variation to control points const ctrlXVar = controlX + p.random(-5, 5) p.beginShape() p.vertex(startX + p.random(-2, 2), startY + p.random(-2, 2)) p.quadraticVertex( ctrlXVar, startY + (endY - startY) / 2 + p.random(-10, 10), startX + p.random(-2, 2), endY + p.random(-5, 5), ) p.endShape() // Add some leaves if (i % 5 === 0) { drawLeaf( startX + p.random(-5, 5), startY + p.random(flower.stemHeight * 0.3, flower.stemHeight * 0.7), p.random(10, 20), stemColor, flower.bendX * 0.5, // Pass bend amount to leaves ) } } } // Draw a leaf function drawLeaf(x: number, y: number, size: number, stemColor: number[], bendX = 0) { const leafColor = [ stemColor[0] + p.random(-20, 20), stemColor[1] + p.random(-20, 20), stemColor[2] + p.random(-20, 20), ] p.push() p.translate(x, y) // Add bend influence to leaf rotation p.rotate(p.random(p.TWO_PI) + bendX * 0.05) // Draw leaf with brush strokes for (let i = 0; i < 10; i++) { const r = leafColor[0] + p.random(-20, 20) const g = leafColor[1] + p.random(-20, 20) const b = leafColor[2] + p.random(-20, 20) p.fill(r, g, b, p.random(150, 200)) p.noStroke() // Draw leaf shape with slight variations p.beginShape() p.vertex(0, 0) p.bezierVertex( size / 2 + p.random(-2, 2), -size / 4 + p.random(-2, 2), size + p.random(-2, 2), -size / 4 + p.random(-2, 2), size + p.random(-2, 2), 0, ) p.bezierVertex( size + p.random(-2, 2), size / 4 + p.random(-2, 2), size / 2 + p.random(-2, 2), size / 4 + p.random(-2, 2), 0, 0, ) p.endShape(p.CLOSE) } p.pop() } // Draw a flower function drawFlower(flower: any) { const x = flower.x const y = flower.y const size = flower.size const palette = flower.palette const petalCount = flower.petalCount p.push() p.translate(x, y) // Add mouse influence to the flower rotation p.rotate( flower.rotation + p.sin(p.frameCount * flower.swayAmount + flower.swayOffset) * 0.1 + Math.atan2(flower.bendY, flower.bendX) * 0.2, ) // Draw petals for (let i = 0; i < petalCount; i++) { const angle = (p.TWO_PI / petalCount) * i const petalX = (p.cos(angle) * size) / 2 const petalY = (p.sin(angle) * size) / 2 // Draw each petal with brush strokes drawPetal(0, 0, petalX, petalY, size / 3, palette) } // Draw flower center drawFlowerCenter(0, 0, size / 4, palette) p.pop() } // Draw a petal with brush strokes function drawPetal(x1: number, y1: number, x2: number, y2: number, width: number, palette: number[][]) { const colorIndex = p.floor(p.random(palette.length)) const color = palette[colorIndex] // Calculate perpendicular vector for width const dx = x2 - x1 const dy = y2 - y1 const len = p.sqrt(dx * dx + dy * dy) const perpX = -dy / len const perpY = dx / len // Draw petal with brush strokes for (let i = 0; i < brushDensity; i++) { // Randomize color slightly const r = color[0] + p.random(-20, 20) const g = color[1] + p.random(-20, 20) const b = color[2] + p.random(-20, 20) p.fill(r, g, b, p.random(150, 200)) p.noStroke() // Random position within petal shape const t = p.random(1) const w = p.random(-width, width) * p.sin(t * p.PI) const px = x1 + t * dx + perpX * w const py = y1 + t * dy + perpY * w // Draw brush stroke const brushSize = p.random(brushSizes) p.ellipse(px, py, p.random(1, brushSize * 2), p.random(1, brushSize * 2)) } } // Draw flower center function drawFlowerCenter(x: number, y: number, size: number, palette: number[][]) { // Use a contrasting color for center let centerColor if (p.random() > 0.5) { centerColor = [240, 220, 80] // Yellow center } else { centerColor = [100, 60, 20] // Brown center } // Draw center with brush strokes for (let i = 0; i < brushDensity; i++) { // Randomize color slightly const r = centerColor[0] + p.random(-20, 20) const g = centerColor[1] + p.random(-20, 20) const b = centerColor[2] + p.random(-20, 20) p.fill(r, g, b, p.random(150, 200)) p.noStroke() // Random position within center circle const angle = p.random(p.TWO_PI) const radius = p.random(size) const px = x + p.cos(angle) * radius const py = y + p.sin(angle) * radius // Draw brush stroke const brushSize = p.random(brushSizes) p.ellipse(px, py, p.random(1, brushSize), p.random(1, brushSize)) } } // Mouse interaction p.mousePressed = () => { if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 0 && p.mouseY < p.height) { // Add a new flower at mouse position const newFlower = { x: p.mouseX, y: p.mouseY, baseX: p.mouseX, // Store original position baseY: p.mouseY, // Store original position size: p.random(30, 80), palette: p.random(flowerPalettes), stemColor: p.random(stemColors), petalCount: p.floor(p.random(5, 12)), stemHeight: p.random(100, 200), rotation: p.random(p.TWO_PI), swayAmount: p.random(0.01, 0.03), swayOffset: p.random(p.TWO_PI), bendX: 0, bendY: 0, bendFactor: p.random(0.5, 2), recovering: false, } flowers.push(newFlower) return false // Prevent default } } // Window resize handler p.windowResized = () => { const newWidth = Math.min(800, window.innerWidth - 40) p.resizeCanvas(newWidth, canvasHeight) } } // Create new p5 instance const p5Instance = new p5(sketch, containerRef.current) sketchRef.current = p5Instance // Cleanup return () => { if (sketchRef.current) { sketchRef.current.remove() } } }, [onSetRegenerate]) return

}

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This