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
82
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
OSS開発者という働き方
andpad
5
1.7k
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
Improving my own Ruby thereafter
sisshiki1969
1
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
430
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
はじめてのMaterial3 Expressive
ym223
2
910
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
780
Navigating Dependency Injection with Metro
zacsweers
3
3.7k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
160
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.4k
速いWebフレームワークを作る
yusukebe
5
1.7k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Gamification - CAS2011
davidbonilla
81
5.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building an army of robots
kneath
306
46k
A designer walks into a library…
pauljervisheath
207
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
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