evy: Add canvas text builtins #124
Conversation
|
firebase-deployment: https://evy-lang--124-48m7ji2d.web.app (67bdff1) |
| text "all 🖖" | ||
|
|
||
| move 10 40 | ||
| fontfamily "Luminari, fantasy" |
There was a problem hiding this comment.
I dont have this font. Is this a mac thing? Perhaps you should stick to common web fonts?
There was a problem hiding this comment.
fantasy is the fallback. I searched for "common web fantasy fonts" and this is what came up, e.g.: https://blog.hubspot.com/website/web-safe-html-css-fonts or https://www.w3.org/Style/Examples/007/fonts.en.html
What does it display for you?
There was a problem hiding this comment.
I dont see the font changing at all. Just the same as the previous line (although it's a bit hard to tell for sure because the previous line is just "all", which is not much to compare with).
There was a problem hiding this comment.
That's kinda sad.
This is what it looks like for me:
|
|
||
| move 10 35 | ||
| fill "grey" | ||
| font "italic max(2rem, 2vh) \"Comic Sans MS\", cursive" |
There was a problem hiding this comment.
🍍 I dont understand this max(2rem, 2vh) thing - I know it's from the canvas or web or something, but i feel whatever it is is going against the simplicity you're going for with evy (I thought the same with the colour definitions too, but I know you felt differently - still feel I need to say it though).
I've always though of font sizes in points - that is the sizing that is pretty much universal when it comes to text. px, rem, vh, etc all seem to be webby things and I dont know what they mean. Should you be expecting leaning programmers to know?
There was a problem hiding this comment.
I know you have point.
For me all the recent additions are "advanced".
A lot of things can be done with move, line, rect, text, textsize.
However, if there is more nuance desired this is what you can use.
Maybe that's a mistake, maybe I will get rid of it again.
I have noticed however, that sometimes for Mali at least it is nice to consolidate knowledge without learning "hard" new things. So if she can draw circles it might be fun to challenge her with an ellipse, without requiring abstraction / higher order data structures or even the understanding of functions (breadth first vs depth first).
Maybe all of this is a mistake. Not sure. I think most text things can be done with text, textsize and fontfamily (I added this separately because of your suggestion even though it is a little hacky). However, if you want to do bold and/or cursive, font on canvas is the way.
Maybe I should add a comment on where to read up on it?
There was a problem hiding this comment.
It's again: make easy things easy but hard stuff possible.
There was a problem hiding this comment.
But also to more properly answer: I believe there are layers of progression to evy - we have discussed this before. Start with simple drawing / printing to given an intuition on how code is executed sequentially. Add basic variables, while loops, reading input, if's. once that understanding is solid: functions, arrays. Lastly functions with parameters and return values, maps, recursion, list trees etc.
My feeling is, giving enough drawing primitives to write games is desirable, e.g.: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#making_combinations
Imo that includes curves and flexible fonts but I reserve the rights to change my mind.
There was a problem hiding this comment.
Last max(2rem, 2vh) is a CSS thing. it is literally the maximum of 2rem and 2vh (2root element size; by default a rem is 16px in most browser vs. 2viewport height - viewport height is the browser window height).
This are things to be read up on at
Add canvas text builtins `text`, `textsize`, `fontfamily`, and `font`. Add new example #text. These new primitives are only concerned with text and text styles on the evy output canvas.
Add canvas text builtins
text,textsize,fontfamily, andfont.Add new example #text. These new primitives are only concerned with
text and text styles on the evy output canvas.