Xholon focuses on inner structures. Many Xholon apps also include some graphics. This page links to some apps where graphics are especially important. The HTML5 technologies used on these pages includes Scalable Vector Graphics (SVG), Canvas, and WebGL.
The Cell Metabolism app includes an SVG block diagram that was automatically generated from the app using GraphViz. You can click and right-click on each object to learn more about it. When the app finishes, it displays an SVG-based line graph.
The Life - cells, organism, ecology app is a complex biology simulation with 20,000+ nodes. The page displays a single SVG image that includes all nodes. It use D3 Circle Packing. Hover above a node to see its full name, and to highlight which other nodes it references and which nodes reference it. Right-click a node to learn more about it. Nodes are nested up to 25 levels deep. Right-click a container node and select Export > d3 > CirclePack to see more detail.
The Conway's Game of Life app uses the HTML5 canvas to display an evolving cellular automaton in a 100 x 100 grid.
The simple Hello World (with timeouts) app displays itself as an SVG image. The clickable Hello and World nodes change size slightly every time step or every second time step.
The energy balance model uses a Wikipedia SVG image. As the app runs it updates the numeric values in the image.
The carbon cycle app uses another Wikipedia SVG image. It also updates the numeric values in the image as the app runs.
The Black Geese app displays a sequence of SVG-based D3 Circle Packing diagrams as the children's story evolves. It's also available as an experimental stand-alone SVG video.
Danny and the Dinosaur is another children's story.
A day in the life of a preschooler, presented as an animated children's story. There's a different routine each day of the week.
Harold and the Purple Crayon is another children's story. Another version uses graphic symbols (icons) rather than letters.
The Tale of Peter Rabbit is another children's story. Peter Rabbit with speech (experimental, Chrome only), and Peter Rabbit with full text from the original Beatrix Potter book, and just the full text and original pictures with speech (experimental, Chrome only).
And of course there's Cinderella. This is a very simple version for young children. It's also available as an experimental stand-alone SVG video.
In Do Re Mi, a xylophone repeatedly moves up and down through a color-coordinated scale. There is no sound yet.
The Snowman is another popular children's story.
You can build your own story using the story template.
Social stories are simple stories that preview some new activity that will happen in the near future. They are primarily intended for children (and others) on the autistic spectrum. To experiment with how I might use Xholon as a tool for implementing social stories, I have written this and this about Going to School. The second is scene-based, where the child moves from scene to scene.
This is a first test of moving nodes around on the graphic, using a mouse with interact.js .
IcoMoon makes it easy to build symbol fonts. Some early experiments are here, here, and here.
The Bestiary app features an open-ended dynamic environment with cats, humans, zombies and more. Creatures move around on a HTML5 canvas and interact when they meet. Users can add new types of creatures, new behaviors, new houses and other artifacts, and so forth, while the app is running.
The Turtle examples app demonstrates NetLogo-like Turtle Graphics on a large grid.
The MeTTTa app is a simple game of tic tac toe, played on an HTML table.
In the Hexagonal grid app, creatures move through a random maze, laid out on an HTML5 canvas. Users can add a Monster that gradually converts other creatures into monsters, as they all move around the maze.
The Spatial Games app is an example from the book 'Evolutionary Dynamics', laid out on a rectangular grid. Colorful shapes continuously evolve into each other.
Xholon GWT is a Xholon project. Copyright (C) 2013 - 2016 Ken Webb
@QWERTYUIk OPASmDFGHe primordion JKLZcXCVB.