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
|
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蜜柑();
drawMosaic();
drawEyes();
}
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, -04, -45, 04, -45);
triangle(0, -20, -03, 0, 03, 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, 06, 25, 2);
rect(64, 35, 06, 25, 2);
}
|
