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
430
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
160
The Future of Web UI Development
shamansir
0
96
iElm-Tech-JB.pdf
shamansir
0
47
"iElm"
shamansir
0
60
Elm Revolution
shamansir
0
79
Про Гит
shamansir
2
87
RPD — Reactive Patch Development, Extended Cut
shamansir
0
100
RPD: Reactive Patch Development
shamansir
0
250
Animatron Player API in Details v3
shamansir
0
400
Other Decks in Programming
See All in Programming
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.1k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
470
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
2
220
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
430
Ruby Function Composition
bkuhlmann
1
330
Git Rebase
bkuhlmann
11
1.6k
PostmanでAPIの動作確認が楽になった話
h455h1
0
130
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Large-scale JavaScript Application Architecture
addyosmani
503
110k
Producing Creativity
orderedlist
PRO
336
39k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Atom: Resistance is Futile
akmur
258
25k
RailsConf 2023
tenderlove
2
530
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Embracing the Ebb and Flow
colly
79
4.1k
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