Hugging Face's logo

Spaces:
miya3333
/
HeartFunctionArt
Running

App Files Community
miya commited on
Commit
a81e51a
·
1 Parent(s): 523da68

各種ファイルの追加

Browse files
Files changed (5) hide show
  1. README.md +0 -11
  2. README_en.md +30 -0
  3. README_ja.md +30 -0
  4. index.html +100 -19
  5. style.css +0 -28
README.md DELETED
@@ -1,11 +0,0 @@
1
- ---
2
- title: HeartFunctionArt
3
- emoji: 📈
4
- colorFrom: red
5
- colorTo: purple
6
- sdk: static
7
- pinned: false
8
- license: mit
9
- ---
10
-
11
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
 
 
 
 
 
 
 
 
 
README_en.md ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: HeartFunctionArt
3
+ emoji: ❤️
4
+ colorFrom: red
5
+ colorTo: purple
6
+ sdk: static
7
+ pinned: false
8
+ license: mit
9
+ ---
10
+ # Overview
11
+ This script draws heart function art.
12
+
13
+ # Formula used
14
+ ```math
15
+ 10\ge x^{2}+\left(y-\log\left(\left|x+\sin\left(\frac{y}{5}\right)\right|+0.05\right)\right)^{2}
16
+ ```
17
+
18
+ # Techniques used
19
+ 1. [o3](https://openai.com/index/introducing-o3-and-o4-mini/)
20
+ Used to create source codes.
21
+
22
+ 2. [Codex CLI](https://openai.com/index/introducing-o3-and-o4-mini/)
23
+ Used to create source codes.
24
+
25
+ 3. HTML/CSS/JavaScript
26
+ 4. p5.js
27
+
28
+ # Related URLs
29
+ - [Formula used | Desmos](https://www.desmos.com/calculator/krz8dcoeea?lang=ja)
30
+ - [Referenced Formula | Blog - What I Consider When Creating Functional Graph Art](https://compositecomputer.club/blog/1H3nHjVrWQ3cYSLJ4OFTKp)
README_ja.md ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: HeartFunctionArt
3
+ emoji: ❤️
4
+ colorFrom: red
5
+ colorTo: purple
6
+ sdk: static
7
+ pinned: false
8
+ license: mit
9
+ ---
10
+ # 概要
11
+ ハートの関数アートを描画するスクリプトです。
12
+
13
+ # 使用数式
14
+ ```math
15
+ 10\ge x^{2}+\left(y-\log\left(\left|x+\sin\left(\frac{y}{5}\right)\right|+0.05\right)\right)^{2}
16
+ ```
17
+
18
+ # 使用技術
19
+ 1. [o3](https://openai.com/index/introducing-o3-and-o4-mini/)
20
+ ソースコードの作成に利用しました。
21
+
22
+ 2. [Codex CLI](https://openai.com/index/introducing-o3-and-o4-mini/)
23
+ ソースコードの作成に利用しました。
24
+
25
+ 3. HTML/CSS/JavaScript
26
+ 4. p5.js
27
+
28
+ # 関連URL
29
+ - [使用数式 | Desmos](https://www.desmos.com/calculator/krz8dcoeea?lang=ja)
30
+ - [参考にした数式 | ブログ - 関数グラフアートを制作する際に考えていること](https://compositecomputer.club/blog/1H3nHjVrWQ3cYSLJ4OFTKp)
index.html CHANGED
@@ -1,19 +1,100 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
6
+ <title>Heart – implicit function art</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ min-height: 100vh;
14
+ background: radial-gradient(circle at center, #222 0%, #000 100%);
15
+ color: #fff;
16
+ font-family: "Helvetica Neue", Arial, sans-serif;
17
+ }
18
+
19
+ canvas {
20
+ border-radius: 10px;
21
+ width: min(90vmin, 600px);
22
+ height: auto;
23
+ box-shadow:
24
+ 0 0 30px rgba(255, 0, 100, 0.6),
25
+ 0 0 60px rgba(255, 0, 100, 0.4);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body>
30
+ <script>
31
+
32
+ const RANGE_X = 4;
33
+ const RANGE_Y_TOP = 4;
34
+ const RANGE_Y_BOTTOM = 6.5;
35
+
36
+ const CANVAS_WIDTH = 600;
37
+ const UNIT_PER_PIXEL = (2 * RANGE_X) / CANVAS_WIDTH;
38
+ const CANVAS_HEIGHT = Math.round(
39
+ (RANGE_Y_TOP + RANGE_Y_BOTTOM) / UNIT_PER_PIXEL
40
+ );
41
+
42
+ let currentPixel = 0;
43
+ const BATCH_SIZE = 8000;
44
+
45
+ function setup() {
46
+ createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
47
+ pixelDensity(1);
48
+
49
+ background(255);
50
+ loadPixels();
51
+ }
52
+
53
+ function draw() {
54
+ const totalPixels = width * height;
55
+
56
+ let processed = 0;
57
+ while (processed < BATCH_SIZE && currentPixel < totalPixels) {
58
+ const px = currentPixel % width;
59
+ const py = Math.floor(currentPixel / width);
60
+
61
+ const x = map(px, 0, width, -RANGE_X, RANGE_X);
62
+ const y = map(py, 0, height, RANGE_Y_TOP, -RANGE_Y_BOTTOM);
63
+
64
+ const f =
65
+ x * x +
66
+ Math.pow(
67
+ y - Math.log(Math.abs(x + Math.sin(y / 5)) + 0.05),
68
+ 2
69
+ );
70
+
71
+ const inside = f <= 10;
72
+
73
+ if (inside) {
74
+ const idx = currentPixel * 4;
75
+
76
+ const factor = (RANGE_Y_TOP - y) / (RANGE_Y_TOP + RANGE_Y_BOTTOM);
77
+
78
+ const r = 255;
79
+ const g = Math.round(50 * (1 - factor));
80
+ const b = Math.round(150 * (1 - factor));
81
+
82
+ pixels[idx] = r;
83
+ pixels[idx + 1] = g;
84
+ pixels[idx + 2] = b;
85
+ pixels[idx + 3] = 255;
86
+ }
87
+
88
+ currentPixel++;
89
+ processed++;
90
+ }
91
+
92
+ updatePixels();
93
+
94
+ if (currentPixel >= totalPixels) {
95
+ noLoop();
96
+ }
97
+ }
98
+ </script>
99
+ </body>
100
+ </html>
style.css DELETED
@@ -1,28 +0,0 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }