Xah Web Dev Blog 2017-12
massive upgrade my js tutorial to js es2015.
here's 5 pages for end of the year day.
JS: Function's “arguments” Object (updated)
JS: global variable (on its own page)
JS: var Name Scope (more updates)
JS: var Declaration Order (major rewrite)
svg length complexity
got ill after reading this.
one of the most useful, is a percentage, which means relative to view port. So,
0.2% is a nice value. This way, lines are just the right thickness in 5 inch screen or 24 inch screen.
0.2% has different meanings depending on where you use it. e.g. in
<rect x="0" y="0" width="9" height="9" stroke-width="0.2%" />
<rect x="0" y="0" width="9" height="9" style="stroke-width:0.2%" />
The meaning of percentage unit in css depends on which attribute it is used. But since
stroke-width is svg only, i suppose in this case, both use of percentage have the same meaning.
on the math intrinsics of animation or what i've learned!
now, Xah's Edu Corner Extempore! episode №20171221120845, on the math intrinsics of animation or what i've learned!
so, in the past weeks, i've been studying svg animation or web animation tech. Basically read the whole svg 1.1 v2 spec on animation. It turns out, there's something intrinsically complex about 2D animation, and quite interesting.
imagine, you have a rectangle, and a small circle inside. The circle is a billiard ball, you want to bounce it around the rect, as a pool table animation.
normally, you do animation by drawing each frame. Basically, write a timed loop, and in each, say the position of the circle. This, we might call the imperative approach, as in imperative programing, where you say exactly what to do in each step.
but there's a declarative approach. That is, instead of a timed loop, you specify the drawings of the start frame, and end frame, and give a path, and a time duration. The ball, will move thru the path, in linear time, of the given duration. That's declarative approach, and is what svg/css/web animation is about.
note that in this declarative approach, the compiler, still actually need to figure out at what frame/time the ball is, and draw it. So, it's like function programing, the compiler, generate things for you.
the declarative approach seems simple. But actually, not quite. There are lots intrinsic complexity. Imagine the billiard ball again. Now, as your ball moves, it needs to slow down. So the timing, isn't “linear”
So, now you need a spec of what's called “calcMode” in svg, that controls the pace of animation. possible values are • linear • discrete • paced • spline. In css animation, you have similar called “animation-timing-function”.
Now, suppose there are 2 billiard balls. 1 hits the other, stops, and the other moves. So, now you kinda have 2 animations, one starts after the other stops. So, now in declarative way, you need to have a spec of when animations starts or connect.
now, look at this animation. The imperative approach, you just draw the thing for each loop, easy. In declarative approach, you draw line segment, then specify a path this thing will move, and the corresponding rotation (of the line). Actually slightly more complex.
the declarative approach, in fact you may break it down into 4 animation sequences. Using mirror (transform) of the 1st part to produce the other 3 animation sequences. It is actually much more complex than the imperative approach.
also, as far as i know, in svg/css/web animation tech, there's no way to create a “leave a trace” effect, as needed in this animation (for the line). So the declarative approach is either impossible by itself, or far more complex to create.
Now, imagine you want to do animation of swarm of birds. You might have seen 3d boids. (web search it) Or, in 2d, a bunch of dots moving about in a particular pattern. (lets stick with 2D) Or, imagine, the flight of 5 jet planes in a air show. Or, many of the screen saver patterns.
so, when the animation becomes complex, the declarative approach breaks down. Cuz it is impossible to nice math describe the change of shapes/orientation/path especially when they change in a pace that's not simply linear or simple function.
The imperative approach, where we “hard code” each shape (2d or 3d)'s position/orientation for each frame. Is actually simpler to do when the animation is complex.
JS: Source Code Encoding (minor update)
Mozilla Secretly Install Ad-Ware to Firefox
one sad news after another.
[Firefox is on a slippery slope By Drew Devault. At https://drewdevault.com/2017/12/16/Firefox-is-on-a-slippery-slope.html ]
SVG, and an Insider's Look at W3C Standardization Process
[Me and SVG By Amelia Bellamy-Royds. At https://codepen.io/AmeliaBR/post/me-and-svg ]
what a fantastic article!
truly informative, on svg, and the standard process, the innards, and situation of tech industry!
SVG 2 is dead
looks like SVG 2 is dead. it will not be implemented. Right now, Firefox support maybe 20% of its features. Chrome maybe 10%. Safari, Edge, 0.
svg2 feature support https://nikosandronikos.github.io/svg2-info/svg2-feature-support/
here's w3c's naming of their standard progress
- Working draft
- Candidate recommendation
- Proposed recommendation
- W3C recommendation
usually take years to go from one to the next.
jargon ridden bureaucratic shit.
Note also, now we have 2 html standards, from whatwg and from w3c. each declare theirs is the standard.
Note also, now we have 2 html standards, from whatwg and from w3c. Each declare theirs is the standard. most hackers don't know, it's all politics. This is partly why, “standards” are often complex and incomprehensible. it's that way not because tech necessity.
Web Design: Grey Text on White Background? (updated. now macOS)
a sketchy intro on the state of svg animation.
learn web animation in 3 minutes.
however, it doesn't work as a temp toggle. That is, if you have js off, and just want to turn it on for a tab, this method doesn't work.
JS: Object.prototype.toString (minor update)
If you have a question, put $5 at patreon and message me.