π€ You
Create a neon sign text generator. Use createInput() for typing. Display the typed text as glowing neon letters in the center of the canvas. Neon effect: draw the text multiple times with decreasing alpha and increasing size to create glow. Use bright neon colors (pink, cyan, or green). Dark brick wall texture background (use rectangles). Add subtle flicker animation (randomly vary brightness). Text should be large and bold. Include a color picker or cycle through colors on click. Keep code under 50 lines.
π€ AI
Hereβs a complete neon text generator with glow, brick wall, flicker, and click-to-cycle colors, with `sketch.js` under 50 lines.
```js
// sketch.js
let inp, cols, ci = 0;
function setup() {
createCanvas(windowWidth, windowHeight);
textAlign(CENTER, CENTER); textStyle(BOLD); noStroke();
inp = createInput("NEON"); inp.position(20, 20); inp.size(200);
cols = [color(255, 60, 200), color(0, 255, 255), color(0, 255, 120)];
}
function draw() {
drawBricks();
let t = inp.value() || " ";
let base = min(width, height) * 0.18, f = map(noise(frameCount * 0.05), 0, 1, 0.7, 1.1);
let c = cols[ci];
for (let i = 12; i > 0; i--) {
let a = 255 * pow(i / 12, 1.5) * f;
fill(red(c), green(c), blue(c), a);
textSize(base + i * 4);
text(t, width / 2, height / 2);
}
}
function drawBricks() {
background(10, 10, 15);
fill(25); stroke(15); strokeWeight(2);
for (let y = 0; y < height + 40; y += 40) {
for (let x = (y / 40) % 2 ? 40 : 0; x < width + 80; x += 80) rect(x, y, 80, 40);
}
noStroke();
}
function mousePressed() { ci = (ci + 1) % cols.length; }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
```
```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Sign Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
```
```css
/* style.css */
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #050509;
font-family: system-ui, sans-serif;
}
canvas {
display: block;
}
input {
position: absolute;
z-index: 10;
padding: 4px 8px;
background: #111;
border: 1px solid #444;
color: #f5f5f5;
}
```
Notes (p5.js 1.11.3):
- `createInput` for typing: [docs](https://p5js.org/reference/#/p5/createInput)
- Text glow is done by drawing the same `text()` multiple times with varying `textSize` and alpha.
- Flicker uses `noise(frameCount * 0.05)` to modulate brightness smoothly.
- Click anywhere to cycle neon colors (pink β cyan β green).
