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
540
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
110
"iElm"
shamansir
0
81
Elm Revolution
shamansir
0
100
Про Гит
shamansir
2
120
RPD — Reactive Patch Development, Extended Cut
shamansir
0
210
RPD: Reactive Patch Development
shamansir
0
310
Animatron Player API in Details v3
shamansir
0
450
Other Decks in Programming
See All in Programming
AIエージェント開発、DevOps and LLMOps
ymd65536
1
380
ソフトウェアテスト徹底指南書の紹介
goyoki
1
140
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.8k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
270
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
260
Swift Updates - Learn Languages 2025
koher
2
450
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
400
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
私の後悔をAWS DMSで解決した話
hiramax
4
190
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
110
AIコーディングAgentとの向き合い方
eycjur
0
260
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Fireside Chat
paigeccino
39
3.6k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Designing Experiences People Love
moore
142
24k
Building an army of robots
kneath
306
46k
What's in a price? How to price your products and services
michaelherold
246
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The World Runs on Bad Software
bkeepers
PRO
70
11k
A Tale of Four Properties
chriscoyier
160
23k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
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