Spaces:
Running
Running
File size: 2,151 Bytes
a81e51a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<!DOCTYPE html>
<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> |