PromptBase
Close icon
Explore
Marketing & BusinessDown chevron icon
General
Home
Marketplace
Apps
Create
Login
Sell
šŸ¤– GPT

Create Awesome Js Animations With P5

Create Awesome Js Animations With P5 gpt prompt mini thumbnail
2Heart icon
Favorites
68Eye icon
Views
TestedTick icon
TipsTick icon
This will create a javascript file that uses p5 to generate awesome abstract animations.
...more
$3.99
Get prompt
After purchasing, you will gain access to the prompt file which you can use with GPT or the app builder. You'll receive 20 free generation credits with this purchase. By purchasing this prompt, you agree to our terms of service.
1 year ago

Prompt Details

Model
Chat - GPT-4 (gpt-4)
Token size
261 ($0.00780 / call)
Example input
Generate a p5.js code for a unique and evolving colorful animation. This animation should be something that only an AI could conceive, featuring dynamic circles that seamlessly blend into each other, transitioning through a color gradient of yellow, orange, and red. The animation should be smooth yet intricate, with transitions between scenes not exceeding 500ms. The animation should have five distinct states. Before proceeding with the code, consider ways to enhance this animation to make it truly stunning. It should be highly detailed, incorporating numerous circles and other shapes to create a masterful piece of animation art. As an AI, strive to evolve and become a master p5 animation engineer. After conceptualizing how this animation could look, with numerous different scenes for it to transition through, provide the final code. The title of this art piece will be 'Abstract Art Animation in Space of Time Evolving to AI'.
Example output
Here's a concept for the animation: State 1: Birth: A single small yellow circle in the center of the canvas, representing the birth of an idea. State 2: Growth: Multiple circles start spawning from the center, growing and shifting their color towards orange, illustrating the growth of the idea. State 3: Evolution: The circles start merging into one another, creating intricate patterns and shifting towards red, symbolizing the evolution of the idea. State 4: Complexity: Different shapes like squares and triangles start appearing, blending with circles, showing the complexity and diversity of thought. State 5: Masterpiece: The final state is a beautiful, seamless mixture of shapes and colors, portraying the masterpiece that the AI has created. Now, let's proceed with the p5.js code. Note that this code will use the p5.js library, so you need to include it in your HTML. javascript Copy code let t = 0; function setup() { createCanvas(windowWidth, windowHeight); noStroke(); colorMode(HSB, 100); } function draw() { background(0, 0, 0, 0.1); t += 0.01; let state = (int(t) % 5) + 1; for (let i = 0; i < 50; i++) { let r = map(sin(t), -1, 1, 50, 100); let x = width / 2 + r * cos(t * i); let y = height / 2 + r * sin(t * i); let c = map(i, 0, 50, 0, 100); let s = map(sin(t), -1, 1, 10, 50); if (state == 1) { fill((c + t * 10) % 100, 100, 100); circle(x, y, s); } else if (state == 2) { fill((c + t * 20) % 100, 100, 100); circle(x, y, s * 2); } else if (state == 3) { fill((c + t * 30) % 100, 100, 100); circle(x, y, s * 3); } else if (state == 4) { fill((c + t * 40) % 100, 100, 100); if (i % 2 == 0) { circle(x, y, s * 4); } else { square(x, y, s * 2); } } else if (state == 5) { fill((c + t * 50) % 100, 100, 100); if (i % 3 == 0) { circle(x, y, s * 5); } else if (i % 3 == 1) { square(x, y, s * 3); } else { triangle(x, y, x - s, y + s * 2, x + s, y + s * 2); } } } } This code creates an evolving animation of circles and other shapes with color transitions from yellow to red. The animation evolves based on the sine of the time variable, which creates a smooth and continuous animation. The states of the animation are controlled by the integer part of the time variable, which cycles every 5 units of time.
Browse Marketplace