Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script> | |
| <title>Heart – implicit function art</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: radial-gradient(circle at center, #222 0%, #000 100%); | |
| color: #fff; | |
| font-family: "Helvetica Neue", Arial, sans-serif; | |
| } | |
| canvas { | |
| border-radius: 10px; | |
| width: min(90vmin, 600px); | |
| height: auto; | |
| box-shadow: | |
| 0 0 30px rgba(255, 0, 100, 0.6), | |
| 0 0 60px rgba(255, 0, 100, 0.4); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| const RANGE_X = 4; | |
| const RANGE_Y_TOP = 4; | |
| const RANGE_Y_BOTTOM = 6.5; | |
| const CANVAS_WIDTH = 600; | |
| const UNIT_PER_PIXEL = (2 * RANGE_X) / CANVAS_WIDTH; | |
| const CANVAS_HEIGHT = Math.round( | |
| (RANGE_Y_TOP + RANGE_Y_BOTTOM) / UNIT_PER_PIXEL | |
| ); | |
| let currentPixel = 0; | |
| const BATCH_SIZE = 8000; | |
| function setup() { | |
| createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT); | |
| pixelDensity(1); | |
| background(255); | |
| loadPixels(); | |
| } | |
| function draw() { | |
| const totalPixels = width * height; | |
| let processed = 0; | |
| while (processed < BATCH_SIZE && currentPixel < totalPixels) { | |
| const px = currentPixel % width; | |
| const py = Math.floor(currentPixel / width); | |
| const x = map(px, 0, width, -RANGE_X, RANGE_X); | |
| const y = map(py, 0, height, RANGE_Y_TOP, -RANGE_Y_BOTTOM); | |
| const f = | |
| x * x + | |
| Math.pow( | |
| y - Math.log(Math.abs(x + Math.sin(y / 5)) + 0.05), | |
| 2 | |
| ); | |
| const inside = f <= 10; | |
| if (inside) { | |
| const idx = currentPixel * 4; | |
| const factor = (RANGE_Y_TOP - y) / (RANGE_Y_TOP + RANGE_Y_BOTTOM); | |
| const r = 255; | |
| const g = Math.round(50 * (1 - factor)); | |
| const b = Math.round(150 * (1 - factor)); | |
| pixels[idx] = r; | |
| pixels[idx + 1] = g; | |
| pixels[idx + 2] = b; | |
| pixels[idx + 3] = 255; | |
| } | |
| currentPixel++; | |
| processed++; | |
| } | |
| updatePixels(); | |
| if (currentPixel >= totalPixels) { | |
| noLoop(); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |