Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Elm: 2D and 3D Graphics
Search
Ulric Wilfred
June 19, 2017
Programming
1
520
Elm: 2D and 3D Graphics
Munich Lambda Meetup 19 June 2017
Ulric Wilfred
June 19, 2017
Tweet
Share
More Decks by Ulric Wilfred
See All by Ulric Wilfred
Generative Animation with Elm
shamansir
0
200
The Future of Web UI Development
shamansir
0
120
iElm-Tech-JB.pdf
shamansir
0
91
"iElm"
shamansir
0
73
Elm Revolution
shamansir
0
95
Про Гит
shamansir
2
100
RPD — Reactive Patch Development, Extended Cut
shamansir
0
180
RPD: Reactive Patch Development
shamansir
0
290
Animatron Player API in Details v3
shamansir
0
430
Other Decks in Programming
See All in Programming
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
230
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
0
140
requirements with math
moony
0
520
CQRS+ES勉強会#1
rechellatek
0
390
ベクトル検索システムの気持ち
monochromegane
29
8.6k
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
350
goにおける コネクションプールの仕組み を軽く掘って見た
aronokuyama
0
120
Compose Navigation実装の見通しを良くする
hiroaki404
0
180
RCPと宣言型ポリシーについてのお話し
kokitamura
2
140
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
120
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
190
Kubernetesで実現できるPlatform Engineering の現在地
nwiizo
2
1.7k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Side Projects
sachag
452
42k
Typedesign – Prime Four
hannesfritz
41
2.6k
A Philosophy of Restraint
colly
203
16k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
How STYLIGHT went responsive
nonsquared
99
5.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Building Adaptive Systems
keathley
40
2.5k
We Have a Design System, Now What?
morganepeng
51
7.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Transcript
2D & 3D Graphics in Elm What we have
now and what we may do with this… by @shamansir, 2017
Write Art
What we have now…
Elm Time-Travelling Debugger (R.I.P. …?)
2D: elm-lang/svg view : Model -> Html Msg view model
= let angle = turns (Time.inMinutes model) handX = toString (50 + 40 * cos angle) handY = toString (50 + 40 * sin angle) in svg [ viewBox "0 0 100 100", width "300px" ] [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] [] , line [ x1 "50", y1 "50", x2 handX, y2 handY , stroke "#023963" ] [] ]
2D: evancz/elm-graphics main : Element main = collage 300 300
(star blue) triangle color size angle = ngon 3 size |> filled color |> rotate (degrees angle) star color = map2 (triangle color) [100, 100] [30, 90]
3D: elm-community/webgl https://ellie-app.com/3wmPk4PGf8Ja1/0
3D: elm-community/webgl https://github.com/elm-community/webgl/blob/master/examples/first-person.elm
3D: TheSeamau5/GraphicsEngine import Engine (render, cube, pyramid, scene) import Math.Vector3
(vec3) myCube = { cube | position <- vec3 0 0 0, rotation <- vec3 45 0 45, scale <- vec3 1.5 1.5 1.5 } myPyramid = { pyramid | position <- vec3 2 0 0, scale <- vec3 0.5 1 0.5 } myScene = { scene | objects <- [myCube, myPyramid] } main = render myScene
What we may do with this…
fluxus https://github.com/zzkt/fluxus
shamansir/elm-fluxus https://github.com/shamansir/elm-fluxus https://vimeo.com/202176855
shamansir/elm-fluxus https://github.com/shamansir/elm-fluxus https://vimeo.com/202176855 import Math.Vector3 as Vec3 exposing (Vec3, vec3)
import Fluxus.Program as Fx import Fluxus.State exposing ( ..) import Fluxus.Primitive as Primitive exposing ( ..) drawRow : Int -> State -> State drawRow count state = if (count > 0) then state |> translate (vec3 4 0 0) |> drawCube |> rotate (vec3 (10 * (sin (time state))) 0 0) |> withState (\state -> state |> rotate (vec3 0 25 0) |> drawRow (count - 1) ) |> withState (\state -> state |> rotate (vec3 0 -25 0) |> drawRow (count - 1) ) else state main : Fx.FluxusProgram main = Fx.everyFrame (drawRow 10)
shamansir/elm-fluxus https://github.com/shamansir/elm-fluxus https://vimeo.com/202176855 drawRow count state = if (count >
0) then state |> translate (vec3 4 0 0) |> drawCube |> rotate (vec3 (10 * (sin (time state))) 0 0) |> withState (\state -> state |> rotate (vec3 0 25 0) |> drawRow (count - 1) ) |> withState (\state -> state |> rotate (vec3 0 -25 0) |> drawRow (count - 1) ) else state main = Fx.everyFrame (drawRow 10)
Pict3D from DrRacket
Pict3D from DrRacket
Pict3D from DrRacket http://docs.racket-lang.org/pict3d/constructors.html
So… Why bother?
3D REPL?
Playgrounds?
EVE by Chris Granger https://www.youtube.com/watch?v=5V1ynVyud4M
Chris Granger: In Search of Tomorrow https://www.youtube.com/watch? v=VZQoAKJPbh8&t=1047
Chris Granger: Aurora (2013)
Chris Granger: Aurora https://www.youtube.com/watch?v=L6iUm_Cqx2s
Apparatus http://aprt.us/
So… Why Elm?
None
Strict. Minimal. Functional. Web.
Bring functionaλ!
Bring fun!
Thanks. Yours, @shamansir