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
530
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
220
The Future of Web UI Development
shamansir
0
130
iElm-Tech-JB.pdf
shamansir
0
100
"iElm"
shamansir
0
76
Elm Revolution
shamansir
0
100
Про Гит
shamansir
2
120
RPD — Reactive Patch Development, Extended Cut
shamansir
0
200
RPD: Reactive Patch Development
shamansir
0
300
Animatron Player API in Details v3
shamansir
0
450
Other Decks in Programming
See All in Programming
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
410
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
PicoRuby on Rails
makicamel
2
140
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Writing Fast Ruby
sferik
628
62k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Optimizing for Happiness
mojombo
379
70k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
KATA
mclloyd
30
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
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