basic functionality
This commit is contained in:
parent
59a816b96f
commit
361c7a8734
3 changed files with 100 additions and 41 deletions
|
@ -27,7 +27,6 @@ in
|
|||
buildPhase = ''
|
||||
elm make ./Main.elm --optimize --output=tmp.js
|
||||
esbuild ./tmp.js --minify --target=es5 --outfile=main.js
|
||||
echo "<!DOCTYPE html><html><head><script type = 'text/javascript' src = './main.js'></script></head><body><script type = 'text/javascript' src = './init.js'></script></body></html>" > index.html
|
||||
'';
|
||||
installPhase = ''
|
||||
mkdir $out/bin -p
|
||||
|
@ -41,7 +40,6 @@ in
|
|||
|
||||
cp index.html $out/src/index.html
|
||||
cp main.js $out/src/main.js
|
||||
cp init.js $out/src/init.js
|
||||
'';
|
||||
meta = {
|
||||
mainProgram = "math-project";
|
||||
|
|
126
src/Main.elm
126
src/Main.elm
|
@ -25,7 +25,7 @@ type alias Coords =
|
|||
|
||||
init : Memory
|
||||
init =
|
||||
{ dx = 100
|
||||
{ dx = 0.8
|
||||
}
|
||||
|
||||
|
||||
|
@ -41,47 +41,65 @@ view computer memory =
|
|||
let
|
||||
bounds =
|
||||
{ ymin = 0
|
||||
, ymax = 511
|
||||
, ymax = 32 * computer.screen.height / computer.screen.width
|
||||
, xmin = 0
|
||||
, xmax = 511 * computer.screen.width / computer.screen.height
|
||||
, xmax = 32
|
||||
}
|
||||
|
||||
at =
|
||||
placeAtCoords computer bounds
|
||||
|
||||
fx x =
|
||||
(x - (bounds.xmax - bounds.xmin) / 2) ^ 2 / 1000
|
||||
atCorner =
|
||||
placeCornerAtCoords computer bounds
|
||||
|
||||
fx x = x * x * x / 32 / 32
|
||||
in
|
||||
List.append
|
||||
[ P.words purple "Welcome to my math project! Use arrow keys to adjust the width of each rectangle."
|
||||
|> at ( (bounds.xmax - bounds.xmin) / 2, bounds.ymax - 10 )
|
||||
, P.words purple "The current equation is y=0.25x^2."
|
||||
|> at ( (bounds.xmax - bounds.xmin) / 2, bounds.ymax - 20 )
|
||||
, P.words purple ("The current dx is " ++ (String.fromInt <| truncate memory.dx))
|
||||
|> at ( (bounds.xmax - bounds.xmin) / 2, bounds.ymax - 30 )
|
||||
, P.square purple 10
|
||||
|> at ( 100, 100 )
|
||||
]
|
||||
(makeRectangles computer atCorner fx bounds memory [])
|
||||
<|
|
||||
makeRectangles at fx bounds memory []
|
||||
List.append
|
||||
(makeCircles computer fx bounds memory [])
|
||||
([ P.words black "Welcome to my math project! Use arrow keys to adjust the width of each rectangle."
|
||||
|> at ( (bounds.xmax - bounds.xmin) / 2, bounds.ymax - 1)
|
||||
, P.words black ("The current dx is " ++ (String.fromFloat memory.dx))
|
||||
|> at ( (bounds.xmax - bounds.xmin) / 2, bounds.ymax - 2)
|
||||
])
|
||||
|
||||
|
||||
makeRectangles : (Coords -> Shape -> Shape) -> (Number -> Number) -> Bounds -> Memory -> List Shape -> List Shape
|
||||
makeRectangles at fx bounds memory prev =
|
||||
|
||||
makeCircles : Computer -> (Number -> Number) -> Bounds -> Memory -> List Shape -> List Shape
|
||||
makeCircles computer fx bounds memory prev =
|
||||
let
|
||||
height =
|
||||
fx <| toFloat (List.length prev + 1) * memory.dx
|
||||
|
||||
numOfRecs =
|
||||
1 + (truncate <| toFloat (List.length prev) * memory.dx)
|
||||
|
||||
newRec =
|
||||
rectangle red memory.dx height
|
||||
|> at ( memory.dx / 4 + memory.dx * toFloat (List.length prev) / 2, height / 4 )
|
||||
resolution = (bounds.xmax - bounds.xmin) / 512
|
||||
xcoord = toFloat (List.length prev) * resolution
|
||||
ycoord = fx xcoord
|
||||
newCirc =
|
||||
circle purple 2
|
||||
|> placeAtCoords computer bounds (xcoord, ycoord)
|
||||
in
|
||||
if toFloat (List.length prev) <= 1 + 2 * (bounds.xmax - bounds.xmin) / memory.dx then
|
||||
makeRectangles at fx bounds memory <|
|
||||
List.append prev [ newRec ]
|
||||
if
|
||||
xcoord < bounds.xmax
|
||||
then
|
||||
makeCircles computer fx bounds memory <| List.append prev [ newCirc ]
|
||||
else
|
||||
prev
|
||||
|
||||
|
||||
|
||||
makeRectangles : Computer -> (Coords -> Corner -> (Number, Number) -> Shape -> Shape) -> (Number -> Number) -> Bounds -> Memory -> List Shape -> List Shape
|
||||
makeRectangles computer atCorner fx bounds memory prev =
|
||||
let
|
||||
xcoord = toFloat (List.length prev) * memory.dx
|
||||
ycoord = fx xcoord
|
||||
widthOfCell = computer.screen.width / (bounds.xmax - bounds.xmin)
|
||||
newRec =
|
||||
rectangle red (memory.dx * widthOfCell) (ycoord * widthOfCell)
|
||||
|> atCorner (xcoord, ycoord) TopLeft (memory.dx, ycoord)
|
||||
in
|
||||
if
|
||||
xcoord < bounds.xmax
|
||||
then
|
||||
makeRectangles computer atCorner fx bounds memory <| List.append prev [ newRec ]
|
||||
|
||||
else
|
||||
prev
|
||||
|
@ -89,8 +107,24 @@ makeRectangles at fx bounds memory prev =
|
|||
|
||||
update : Computer -> Memory -> Memory
|
||||
update computer memory =
|
||||
let
|
||||
step = 0.02
|
||||
threshold = 0.02
|
||||
in
|
||||
{ memory
|
||||
| dx = memory.dx + 0.2 * toX computer.keyboard
|
||||
| dx =
|
||||
(toFloat
|
||||
<| round
|
||||
<| toFloat 100 * (
|
||||
if memory.dx > threshold then
|
||||
memory.dx + step * toX computer.keyboard
|
||||
else
|
||||
computer.keyboard
|
||||
|> toX
|
||||
|> max 0
|
||||
|> (*) step
|
||||
|> (+) threshold
|
||||
)) / toFloat 100
|
||||
}
|
||||
|
||||
|
||||
|
@ -107,12 +141,28 @@ placeAtScreen computer coords shape =
|
|||
|
||||
|
||||
placeAtCoords : Computer -> Bounds -> Coords -> Shape -> Shape
|
||||
placeAtCoords computer bounds coords shape =
|
||||
let
|
||||
x =
|
||||
first coords
|
||||
placeAtCoords computer bounds (x, y) shape =
|
||||
placeAtScreen
|
||||
computer
|
||||
( computer.screen.width * x / (bounds.xmax - bounds.xmin)
|
||||
, computer.screen.height * y / (bounds.ymax - bounds.ymin)
|
||||
)
|
||||
shape
|
||||
|
||||
y =
|
||||
second coords
|
||||
in
|
||||
placeAtScreen computer ( x / (bounds.xmax - bounds.xmin) * computer.screen.width, y / (bounds.ymax - bounds.ymin) * computer.screen.height ) shape
|
||||
|
||||
type Corner = TopLeft | TopRight | BottomLeft | BottomRight
|
||||
|
||||
placeCornerAtCoords : Computer -> Bounds -> Coords -> Corner -> (Number, Number) -> Shape -> Shape
|
||||
placeCornerAtCoords computer bounds (x, y) corner (width, height) shape =
|
||||
shape
|
||||
|> placeAtCoords computer bounds
|
||||
(case corner of
|
||||
TopLeft ->
|
||||
(x + width / 2, y - height / 2)
|
||||
TopRight ->
|
||||
(x - width / 2, y - height / 2)
|
||||
BottomLeft ->
|
||||
(x + width / 2, y + height / 2)
|
||||
BottomRight ->
|
||||
(x - width / 2, y + height / 2)
|
||||
)
|
||||
|
|
11
src/index.html
Normal file
11
src/index.html
Normal file
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type = 'text/javascript' src = './main.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
var app = Elm.Main.init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue