diff options
| author | nsfisis <nsfisis@gmail.com> | 2023-09-07 22:27:48 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2023-09-07 22:35:53 +0900 |
| commit | 994e0114d76ae19768d5c303874a968cf6369fd0 (patch) | |
| tree | 5fd3f8b169eea00084b24fbae820f75273864d2a /vhosts/blog/static/my-icon.js | |
| parent | 57f015992f678bfd7281f171fb9d71349c96a1a0 (diff) | |
| download | nsfisis.dev-994e0114d76ae19768d5c303874a968cf6369fd0.tar.gz nsfisis.dev-994e0114d76ae19768d5c303874a968cf6369fd0.tar.zst nsfisis.dev-994e0114d76ae19768d5c303874a968cf6369fd0.zip | |
meta: migrate to monorepo
Diffstat (limited to 'vhosts/blog/static/my-icon.js')
| -rw-r--r-- | vhosts/blog/static/my-icon.js | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/vhosts/blog/static/my-icon.js b/vhosts/blog/static/my-icon.js new file mode 100644 index 00000000..5b52ca3d --- /dev/null +++ b/vhosts/blog/static/my-icon.js @@ -0,0 +1,121 @@ +const colorBackground = 'white'; +const color蜜柑の果実 = [255, 165, 0]; +const color蜜柑の内果皮 = [255, 255, 255]; +const color蜜柑のじょうのう = [255, 255, 255]; +const colorMosaic = [ + [255, 165, 0], + [255, 140, 0], + [255, 215, 0], + [255, 205, 114], + [255, 210, 127], + [255, 192, 76], + [255, 169, 12], + [255, 228, 178], +]; +const colorEye = [0, 0, 0]; + +function setup() { + const container = document.getElementById("p5jsMyIcon"); + const canvas = createCanvas(100, 100); + canvas.parent(container); + + background(colorBackground); + frameRate(15); +} + +function draw() { + if (4 <= frameCount % 15) { + return; + } + + clear(); + + draw蜜柑(); + applyMosaicEffect([10, 5, 2, 0][frameCount % 15]); + drawMosaic(); + drawEyes(); +} + +function applyMosaicEffect(k) { + if (k === 0) { + return; + } + + loadPixels(); + noStroke(); + const d = pixelDensity(); + for (let y = 0; y < 100; y += k) { + for (let x = 50; x < 100; x += k) { + var r = 0, g = 0, b = 0; + for (let i = 0; i < k; i++) { + for (let j = 0; j < k; j++) { + const offset = 4 * d * ((y + i) * 100 * d + (x + j)); + const r_ = pixels[offset]; + const g_ = pixels[offset + 1]; + const b_ = pixels[offset + 2]; + const a_ = pixels[offset + 3]; + r += a_ === 0 ? red(colorBackground) : r_; + g += a_ === 0 ? green(colorBackground) : g_; + b += a_ === 0 ? blue(colorBackground) : b_; + } + } + fill(r / k**2, g / k**2, b / k**2); + rect(x, y, k, k); + } + } +} + +function draw蜜柑() { + // 果実、外果皮 + fill(color蜜柑の果実); + noStroke(); + ellipse(50, 50, 100, 100); + + // 内果皮 + noFill(); + stroke(color蜜柑の内果皮); + strokeWeight(4); + ellipse(50, 50, 90, 90); + + // じょうのう + stroke(color蜜柑のじょうのう); + strokeWeight(2); + for (let t = 0; t < 10; t++) { + push(); + translate(50, 50); + rotate(t * PI / 5); + line(0, -45, 0, 0); + triangle(0, -40, -4, -45, 4, -45); + triangle(0, -20, -3, 0, 3, 0); + pop(); + } +} + +function drawMosaic() { + for (let dy = 0; dy < 10; dy++) { + for (let dx = 0; dx < 10; dx++) { + const y = dy * 10; + const x = dx * 10; + if (x < 50) { + continue; + } + if ((x - 45)**2 + (y - 45)**2 > 55**2) { + continue; + } + if (random() < 0.5) { + continue; + } + const [r, g, b] = random(colorMosaic); + noStroke(); + fill(r, g, b, 192); + rect(x, y, 10, 10); + } + } +} + +function drawEyes() { + noStroke(); + fill(colorEye); + rect(30, 35, 6, 25, 2); + rect(64, 35, 6, 25, 2); +} |
