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
510
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
110
iElm-Tech-JB.pdf
shamansir
0
90
"iElm"
shamansir
0
71
Elm Revolution
shamansir
0
91
Про Гит
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
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Formの複雑さに立ち向かう
bmthd
1
720
sappoRo.R #12 初心者セッション
kosugitti
0
230
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
チームリードになって変わったこと
isaka1022
0
190
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Designing for Performance
lara
604
68k
It's Worth the Effort
3n
184
28k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Become a Pro
speakerdeck
PRO
26
5.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Building Your Own Lightsaber
phodgson
104
6.2k
RailsConf 2023
tenderlove
29
1k
Git: the NoSQL Database
bkeepers
PRO
427
64k
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