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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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);
}
|
