<style>
.reveal, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", Meiryo, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
text-transform: none !important;
}
.color-yellow{
color: yellow;
}
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
text-align: left;
padding: 10px 0;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.reveal .slides span {
text-align: left;
display: inline-block;
}
p, li {
font-size: 0.88em !important;
}
li>p {
font-size: 1em !important;
}
</style>
# JuliaTokai #14 (2023/03/26)
###### tags: `JuliaTokai` `prezentation`
---
# Desmos.jlを<br>つくってる話
[堀川 由人, ほりたみゅ, @Hyrodium](https://hyrodium.github.io/ja)
----
### おしながき
* 自己紹介
* Desmosとは？
* Desmos Text I/O
* Desmos.jlの紹介
* まとめ
---
## 自己紹介
* Desmosがスキ！(10年目)
* [Desmos公式マニュアル](https://desmos.s3.amazonaws.com/Desmos_User_Guide_JA.pdf)の翻訳やってます
---
## Desmosとは？
グラフ描画アプリ
* 陽関数 $y=f(x)$
* 陰関数 $0=f(x,y)$
* 媒介変数曲線 $(f(t),g(t))$
* 微積分
* データフィッティング
----
### 陽関数 $y=f(x)$
<iframe src="https://www.desmos.com/calculator/kbkn9cf1ya" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
----
### 陰関数 $0=f(x,y)$
<iframe src="https://www.desmos.com/calculator/zqm4bypwqn" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
----
### 媒介変数曲線 $(f(t),g(t))$
<iframe src="https://www.desmos.com/calculator/tsif8n39mc" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
----
### 微積分
<iframe src="https://www.desmos.com/calculator/c9rrxjgiey" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
(微分もあるよ)
----
### データフィッティング
<iframe src="https://www.desmos.com/calculator/qrdbrcfnsl" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
---
## Desmos Text I/O
私が開発した**ブラウザ拡張機能**
* Desmosの不満点3つ
* 拡張機能(Desmos Text I/O)のデモ
* 不満点3つを解決できる！
----
### Desmosの不満点
* 標準で使える色が6色しかない
* 画像サイズが圧縮されて解像度が下がる
* オンラインでしかグラフを保存できない
----
### 色数が少ない
6色しかない
----
### 画像圧縮問題
容量削減のために画像が不可逆圧縮されてしまう
 
https://www.desmos.com/calculator/fe7sjsg6wd
----
### オンラインでしか保存・共有できない
Desmosはグラフの保存・共有ができて便利！
しかし…
* Staff picksに選ばれると恥ずかしい
* テキスト保存してバージョン管理したい
----
### そこでDesmos Text I/O！
グラフをテキスト(json)としてimport/exportできる！
 ←ロゴ
* [GitHub repo](https://github.com/hyrodium/desmos-text-io)
* [Chrome拡張](https://chrome.google.com/webstore/detail/desmos-text-io/ndjdcebpigpfidnilppdpcdkibidfmaa)
* [Firefox拡張](https://addons.mozilla.org/en-US/firefox/addon/desmos-text-i-o/)
----
### 拡張機能のデモ
{%youtube cwNIwvL-a2U %}
----
### 前述の不満点を全て解決！
* 標準で使える色が6色しかない
→ `#FF00FF`の形式で色を設定可能
* 画像サイズが圧縮されて解像度が下がる
→ 画像urlを直接埋め込めばOK (:no_good: gif, apng)
* オンラインでしかグラフを保存できない
→ git管理でも何でもござれ
---
## Desmos.jl
JuliaからDesmos用のJSONを生成したいですよね！！
* つかいかた
* デモ
GitHub repo: https://github.com/hyrodium/Desmos.jl
----
### グラフを定義
```julia=
using Desmos, JSON
state = @desmos begin
@expression cos(x) color=RGB(1,0,0)
@expression sin(x) color=RGB(0,0,1)
tan(x)
end
clipboard(JSON.json(state, 4))
```
----
### 変数を定義
```julia=
using Desmos, JSON
b = 3
state = @desmos begin
a = 4
@variable c = 5 2..6
$(2+2)
sin($(2b)*a-c)
end
clipboard(JSON.json(state, 4))
```
----
### 画像を埋め込む
```julia=
using Desmos, JSON, Images, LaTeXStrings
# なんらかの計算で画像を生成
# https://github.com/hyrodium/Visualize2dimNewtonMethod
img = load("/home/hyrodium/Git/Visualize2dimNewtonMethod/example1a.png")
state = @desmos begin
f(x,y) = x^2+y^2-3.9-x/2
g(x,y) = x^2-y^2-2
@expression 0=f(x,y) color=Gray(0.3)
@expression 0=g(x,y) color=Gray(0.6)
a₀=1
b₀=1
(a₀,b₀)
f_x(x,y)=(d/dx)(f(x,y))
f_y(x,y)=(d/dy)(f(x,y))
g_x(x,y)=(d/dx)(g(x,y))
g_y(x,y)=(d/dy)(g(x,y))
d(x,y)=f_x(x,y)*g_y(x,y)-f_y(x,y)*g_x(x,y)
A(x,y)=x-(g_y(x,y)*f(x,y)-f_y(x,y)*g(x,y))/d(x,y)
B(x,y)=y-(-g_x(x,y)*f(x,y)+f_x(x,y)*g(x,y))/d(x,y)
a₁=A(a₀,b₀)
b₁=B(a₀,b₀)
a₂=A(a₁,b₁)
b₂=B(a₁,b₁)
a₃=A(a₂,b₂)
b₃=B(a₂,b₂)
a₄=A(a₃,b₃)
b₄=B(a₃,b₃)
a₅=A(a₄,b₄)
b₅=B(a₄,b₄)
a₆=A(a₅,b₅)
b₆=B(a₅,b₅)
@raw_expression L"a = [a_{0},a_{1},a_{2},a_{3},a_{4},a_{5},a_{6}]"
@raw_expression L"b = [b_{0},b_{1},b_{2},b_{3},b_{4},b_{5},b_{6}]"
@image $img width=20 height=20
@table a b
end
clipboard(JSON.json(state, 4))
```
----
### 今後の開発予定
* Desmosの機能対応
* Tableの対応
* フォルダの対応
* Desmos.jlの改善
* for文の対応
* 文法の見直し
* テスト追加
* ドキュメント追加
---
## まとめ
* Desmosは便利！
* Desmos Text I/Oも便利！
* JuliaはDesmosと連携しやすい！
* マクロが便利
* Latexify.jlが便利
{"metaMigratedAt":"2023-06-18T00:21:10.519Z","metaMigratedFrom":"YAML","title":"JuliaTokai #14 (2023/03/26)","breaks":true,"lang":"ja","dir":"ltr","robots":"noindex, nofollow","slideOptions":"{\"theme\":\"white\",\"transition\":\"slide\"}","description":"堀川 由人, ほりたみゅ, @Hyrodium","contributors":"[{\"id\":\"41421433-16a1-4a57-ac11-6f7b7becb765\",\"add\":13754,\"del\":8236}]"}