You are currently browsing the tag archive for the ‘svg’ tag.
So GridMaths.com is in open beta, now works reasonably well on iPad and recent desktop browsers. Android browser support coming sometime soon.
Heres a pic my 9yo created while testing things out on the iPad.. with the obligatory battle scene [ dad vs browser quirks ? ] :
Here’s a couple of sheets on how I like to present long multiplication…
Firstly a concrete rectangle where you can actually count the squares to satisfy yourself its right…
Then move to a more compact form, which still shows the rectangle grid, but not to scale..
This shows that lots of digits should not induce panic.. the same systematic approach works [ which is why computers can do multiplication so well ].
I think having the box grid is a nice way to remember where all the pieces come from [ single digit products ]. Also I think it really helps to use the blank grid spaces, rather than fill in every 0.
The lattice method is slightly more compact, but I think this box approach reminds students of whats really going on.
Thanks for all the emails and encouragement so far as I build this.
Enjoy, and let me know how your using GridMaths.
My 9 year old son has discovered Chess, after watching the movie “Searching for Bobby Fischer”.
We bought a chess set so we could play with some chess puzzles and strategies.. but we were a bit dismayed at the quality of the plastic pieces. Anyway one thing led to another, and so I spent a couple days hacking up a web based Chess app.
The basics are there :
- the board
- piece movements
- loading puzzles in FEN format
- chess move notation / SAN
As time allows I’ll gradually add the remaining features, such as :
- en-passant for pawns, pawn promotion
- check-detection for kings
- pgn game import/export
- design & share chess board puzzle
In other news, Ive been fighting stockfish chess AI.. and it wins every time, except on the lowest setting. But its been fun to take up the game again, so I can play against my son and answer some of his questions/attacks.
The other day I was really enjoying some Anatomy Physiology lectures on YouTube by Professor Marian Diamond, who is in her 80s and still fired up with plenty of passion for the topic.
I made some handwritten notes as I followed along with the lectures, but wanted to try out some other ways to visualise things.
3D anatomy in the browser
To get a feel for the placement of everything, I found it very handy to see things in 3D. The only serious web based anatomy browser I could find is biodigitalhuman.com .. its pretty impressive running in chrome or firefox. You can hide parts by anatomical system and drill down.. so you see only what your interested in. Then there is a way to generate a public link, to effectively save that view.
As an example, here is a 3D scene showing the heart, which you can rotate in 3D : https://www.biodigitalhuman.com/#/pubkid=17a
One of the things that works in these youtube lectures above is the simplified schematic diagrams she uses to show the essentials of whats going on. When you look at real anatomy, there is so much detail you cant parse it all until you know the ‘lay of the land’.
SVG for lecture notes [ and interactive lessons ] ?
I’ve also been experimenting with SVG as a way to create notes with diagrams.. here is a diagram showing the two pumps of the heart [ click image for svg file ]:
This diagram took a bit long as I was being too picky about how it looks – I used Inkscape on Linux, which is reasonably feature rich and stable these days. I also tried the web based editor svg-edit … its getting there, but the alpha was a bit unstable and the stable version didn’t have a spline tool as far as I could see.
For making ‘high-yield’ succinct summary notes it would be really nice to have a nested text tree widget – so you can make bullet points that are indented several levels [ click to hide/expand would be handy too, for review].
These tools are getting pretty close to something that you can use for science or medicine lecture notes where you need text and diagrams in a web-friendly open format – something a bit more diagrammatic / visual than a wiki. SVG support is really improving with latest Android, and I think it was well supported previously on iPad/iPhone.
Here’s a great example from svg-whiz.com
Viewing Molecules in the Browser
The other web based tool I have been really impressed with is the ChemDoodle web component that shows molecules in 3D using webGL in browser – proteins, amino acids etc – which you can manipulate with the mouse. I found it more responsive than jMol, which is the most well known molecule viewer, implemented in Java.
I see a lot of interest in custom UI for iPad. There are wonderful interactive books such as Alice and Im sure well see some very interesting interactive comics and graphic novels come out for the platform this Christmas.
Some brands have a certain graphic look and feel that is distinctive and they want to preserve that instead of the Apple ‘native’ look. Other clients want a native looking app done in HTML5 delivered faster than an approval process would allow.
I recently developed an iPad app for an US based startup company. The app gathers medical data at the scene of an emergency, and the designer came up with some excellent visual motifs, mixed in with traditional native UI elements.
Ive tended to develop custom UI in native Cocoa until this point, but the technology has been there for a while, as evidenced by apples own PastryKit. Now there are several good frameworks like jQTouch, Sencha and jQueryMobile, but more importantly one can google for the grab-bag of techniques and examples that showcase the power of accelerated webkit animations.
For a clickable early version of the app, open this link in Safari on iPad or Safari on Mac – iPad Demo
[ chrome on Linux will also work, for example, as it too is webkit under the hood ]
As you can see Ive implemented boolean [ ON | OFF ] slide toggle switches using an alpha mask and webkit transitions – pretty much any native UI is doable.
The other win is that my code seems a _lot_ smaller than if I did this in Cocoa / Objective C. I’m not knocking UIKit / iOS, the APIs are generally excellent.. but they are verbose in comparison.
The native look and feel and immediate response is achievable [ make sure you implement touchstart and don’t rely on the click event or your user will be waiting 250ms for the UI to respond… ]
I prototype a number of techniques to deliver interactive floor maps.
These kind of maps would be very useful navigating large Expos, so here are some demos…
Standard divs approach :
SVG versions, for modern browsers only :
All in all SVG is an incredible format for these kinds of graphics, and I think well see a lot more interactive books, comics and StarTrek inspired custom UIs developed in SVG. Its a sane way to deliver to iPhone, iPad and various Android screen sizes with common code base and one set of graphics assets.
After many years of neglect and non-standards-compliance, I’m looking forward to seeing the upcoming IE9 release of Internet Explorer browser with accelerated graphics and native SVG support. Graphic designers will be set free to create and developers will be empowered to push the boundaries of the web to the next level.
On the jsxGraph blog, there is a video showing a construction being manipulated by touch on the iPhone – very cool.
Experimenting with their circles-on-circles web app, by sliding the parameters around I uncovered this delightful piece, which reminded me of those ornate calligraphy end-notes you see in olde books.
Its a lot of fun to experiment. For the curious, the parameters of this specimen are : c1:0.51 f1:7 c2:0.32 f2:17
I think SVG is the right way to go, and a more natural approach than using canvas [as I did for my interactive sine generator last week].
There’s no technical reason now why something as featured as GeoGebra or KGeo could not be implemented directly in the browser.. it just has to be done!
Geogebra is really nice, but I do prefer the simplicity of not having to download the java applet and approve it for access. Each extra step supposedly halves the audience, and I want math to be interactive and accessible.
I wanted to explain the math-magic of the circle generating the sine wave with a simple animation of a point rotating on the edge and the height matching the sine wave.
This is what I came up with, [click to view animation] –
I tried several approaches to get this working, not perfectly happy with any of them, although I did get a basic demo up and running as you see above.
First approach was using SVG, but for some reason I had problems getting svg to appear at all in an html5 page… go figure, this should be simple. In the process I was impressed by SVGEdit which is an early stage, usable if not polished, in browser SVG editor. cool.. I just couldnt get any of my pages to show svg. Ill have another go when the frustration has been forgotten, its possibly some syntax glitch I missed.
I then tried RaphaelJS library which did work reasonably well. Its a nice api. Some things like animating along a path you get out of the box, which is nice. After some basic success I did find myself scratching my head on how to rotate a path – and I’m not sure how to apply a rotate transformation to an item generally [which is a cool feature of SVG ].
Partial demo of sine wave animation implemented in Raphael here. Animates quickly in Safari on mac, Chrome on mac, slightly choppy on Firefox on mac, and quite slow but functional on Safari iPod/webkit.
Wanting a bit more control over exact placement, I decided to try pure HTML5 Canvas rendering. This worked well, was simpler to understand exact x,y pixel placement. I haven’t solved a side issue which is that for some reason if I have the preferred HTML5 “<DOCTYPE html>” tag it ignores exact placement of div elements.. finding this side effect drove me nuts! Im wondering if this is in the spec, it seems it would break a lot of code.
Anyway, layout of the animation was easy in HTML5 canvas. See sine animation demo here.
It does seem to be busy drawing, and Id like to eliminate back flicker [which you’d normally do by drawing to back buffer, or having dirty regions]. Performs ok on desktop safari, firefox and chrome [which seems fastest of all the browsers]. Comes up on iPhone but animates slowly as you’d expect.
A faster approach might be to render the background into a separate layer and draw the dots and lines per frame, as its probably touching only 1 in 1000 of the total pixels.