Home

Constant Inputs Schedule

By Bryce Summers

Every week, I will implement a Planar Graph Illustration tool in fullfillment of Requirements. Dates in the past coorespond to finished work. Dates in the future coorespond to work that I plan to do. I reserve the right to reorder, modify, or substitute future work. I hope that you (the reader) receives some of my enthusiasm for 2-Dimensional Imagery, Graph theory, and Meaningful Illustration.

Date Tool Name Description Links
Jan.30.2017 Eraser Tool
To kick things off, here is an eraser tool that area erases planar graph elements. This tool was made as part of my ScribbleJS project and many of these future tools will be extensions of that project.
ScribbleJS, Eraser Tool
Feb.06.2017 Drawing Additional Lines
I've implemented line linking within my Sim Urban Game. I will update this algorithm to a stand alone example when I have some time.
Sim Urban Game
Feb.13.2017 Coloring For this week, I explored graph colorings, where adjacent faces do not share colors. In other words, I implemented computational color by numbers.
Coloring Book page shaded with non-conflicting colors.
I wanted to achieve an effect like the page from this coloring book that I colored ffor 10 hours on a train to Pittsburgh.
Automatically colored Image
This is a coloring that I automatically generated this week. Please use the Demo
2 - Colored Scribble Image.
When my naive greedy colorings produced bipartite coloring for the random scribbles, I was surprised. Evidently a single line going through space actually produces bipartite graphs in most situations.
All-black Coloring.
I tried coloring all of the faces black, and I found it interesting that various topology can easily be seen from this visual perspective.
Online Demo Graph Coloring Wiki
Feb.20.2017 Additive Line Drawing For this week, I made it so that users can draw lines with proper topological updates as desired. This took a while, since there are a lot more moving parts than creating embeddings from scratch. There were a lot of new functions and edge cases that I hadn't thought much about before. I think that standard tools such as Inkscape would be improved if used this functionality.
Demonstration of graph made using the line adding tool.
Demo!
Feb.27.2017 Bezier Curves
Demonstration of a graph that intersects 3 Bezier curves.
This week I implemented functionalities related to Cubic curves. Users can now:
  • Instantiate 3rd order Hermite or Bezier curves.
  • Discretize the curves into polylines that are each associated with a curve and a start and ending time parameter.
  • Embed the curves using the polyline graph embedder.
  • Convert Embedding faces back into curves by converting the polygonal split paths into subcurves from the originals and reparameterizing them into new valid cubic curves.
  • Draw curves by converting them to Bezier form and using the canvas. They may also be drawn directly from their discretized polylines.
I learned something new this week! Evidently I've been appreciating Hermite curves for their lovely representations using points and tangents. Bezier curves on the other hand are made from sequences of control points that involve layers of linear interpolation. I was happy to learn that Hermite curves are equivalent to Bezier curves with tangents scaled up by a factor of 3. I continue to think about splines over the years, but they continue to amaze me in their usefulness, elegance, and depth.
Demo! Code! Blog Post about cubic spline mathematics. Blog Post about cubic spline mathematics. De Casteljau's Algorithm Spline Conversions
Mar.6.2017 Internal Continents This week, I worked on handling the drawing of internal continents and the embedding of internal complemented lines.
Firstly, I fixed a bug in the eraser tool, where it is now rendering internal continents overtop of the faces that they are embedded on top of. I accomplished this by sorting all of the faces by area. A natural benefit is that complemented faces have negetive area, so they are last in the sorted order, which is great, because they are drawn as boundary line segments, without interiors, so they are highlighted as white over top of everything, but it they don't obscure any of the internal regions for the other faces.


For comparison, this is an example of the previous erroneous behavior, where the internal face was occluded by a large enclosing face.

Demo!
Mar.27.2017 Holes This week, I've been continuing working on Hole rendering, embedding, and collision detection.



I've begun to integrate the canvas and SVG even-odd path rendering into the Scribble.JS representations. I've also implemented primitivve collision detection, where a geometry G intersects a shape S with a hole H if and only if G intersects S, but not H. To improve this, I should instead detect intersections when G intersects S and G is not contained within the interior of H.

Another challenge is figuring out how treat the holes as native objects within the halfedgegraph. This will perhaps require me to start doing 2D Constructive Solid Geometry.
Demo!
Apr.5.2017 Vector Graphics Editor This week, I refactored and standardized my user input routines and implemented some rudimentary button systems. Users can now use multiple tools within the same demo and it will become more impressive as I continue to add more tools.

Screenshot of Editor demo.

The icing on the cake will be when I include the ability to export or import svg or Bryce-vg files. Wouldn't it be neat if I could show the class a media creation tool akin to the one's they've been using in their work? Since I've been monitoring my time more closely these days, I believe that this iteration took approximatly 11 hours of work from planning to execution to working through the small details with the editor (It is still not very stylish, but that wasn't my goal this week.) This week, I also put together the first draft of a style guide for this whole general endeavor.
Screenshot of Editor demo.

I'm going to bed around 3 am today on the morning of April 5th, since I was pretty excited about this project. I'll go back and hunt for some typos and bugs on some other day.
Demo!
Apr.17.2017 SVG File Saving This week, I added a button to the editor that allows users to save their work as a self contained svg file. Note: SVG stands for Scalable Vector Graphics.

Screenshot of Editor demo, now with a save icon.

After I was done editing the example image above, I clicked on the floppy disk looking, blue save button at the top left of the editor which downloaded the following svg file. You can download the following image if you want to see that it is a genuine svg image that is composed of face paths, rather than the original line paths.

Example Saved SVG file.

The greatest thing of all is that now you can create illustrations in the editor and instantly get an svg with individual paths for each face. I've made many illustrations in programs such as Inkscape before and it annoyed me that I had to manually trace all of the faces if I wanted to color them. Using Scribble.js, I can now just draw my line strokes and the face paths are automatically computed along the way.

Example Saved SVG file.

Here are some next steps:
  • Allowing self intersecting curves, I've been procrastinating on getting to this.
  • SVG loading feature. This may be involved. I may only support svg files exported by this program.
  • Vertex movement. Wouldn't it be awesome if users like you could drag a node to modify an illustration.
  • Maybe if I get movement working, I'll get around to some animation.
  • I still want to integrate my beam tracer, since it is amazing and I'm not sure people realize how amazing it is because I didn't quite finish it enough to show people its amazing capabilities and potential after I stopped working on it last summer.
Demo!
Apr.29.17 Self Intersecting Line Drawing This week, I tackled the self intersecting line problem. I had already solved the static case, but I've worked on integrating self-intersecting lines into the draing tool.

A user can start out with a self-intersecting line.
Self intersecting line picture 1.
It will produce a segmented scribble with no trouble, but it is not yet robust many cases, such as when intersections are spaced close to each other. This issue of numerical stability and topological degeneracy will be addressed in the future by combining elements that are close to each other.
Self intersecting line picture 2.
A user can then draw another line on top of the drawing, again making use of a self_intersection.
Self intersecting line picture 3.
The Scribble is again segmented correctly. Self intersecting line picture 4.
Here are some next steps:
  • Fixing Numerical Stability issues.
  • Merging vertices near edges.
  • Merging Vertices near vertices.
  • Implementing a freeform line tool that draws a curve with the mouse, in contrast to the original click based straight line tool.
  • Bezier line tool. We have the mathematics, now we just need the UI.
Demo!
SVG File
Red Lines SVG File
May.1.17 Drag Line Drawing Tool This week, I've implemented a draggable line drawing tool, where the users can create freeform paths in a less controlled manner than the click line drawing tool.

Draggable Line Tool.
Bryce letter forms using drag line tool.
Here are some thoughts:
  • The freeform line tool produces a lot more vertices, but fewer intersections per vertex. This is similar to the cercumstances found in my Sim Urban game.
  • I think that this tool taxes the topology update functions too much, especially when they need to relink a face. I could probably optimize this process using a union-find structure or other tricks.
  • I wonder whether the Bounding volume hiearchies are performing well? I am doing any load rebalancing yet.
Demo!
May.10.17 PNG File Saving As of this week, users can save PNG files of their work with transparent backgrounds. Note: PNG stands for Portable Network Graphics and they may be used to store fixed resolution views of a scene, whereas SVG (Scalable Vector Graphics) files store the mathematical forms themselves, which may then be manipulated and modified in useful ways in vector graphics applications.

Saved PNG image.
Here are some thoughts:
  • Right now the images are exported at a fixed resolution of around 1200 by 800. Perhaps I should change this when I get some menu systems in.
  • At first I was accidently exporting the menu buttons in the png files. To fix this, I redraw the screen without the UI before exporting the picture.
  • The drawing will have a transparent background, I'm not sure if the white lines are the most useful default setting for people, but this feature is mainly a convenience for people who want a quick image.
  • I've done some house keeping on the wording of the tools and I think that some feedback would do the users good regarding then the line may be completed. Like in my Sim Urban project, a user should see a green line when their mouse is in a complete state.
Demo!
May.15.17 Vertex Movements (Coming along)

Thoughts:
  • The lines will be able to automatically re-embed themselves.
  • Future features should include the ability to mark vertices as bezier vertices and allow for the user to modify them.
Demo!
Future Future
The Line between work done and work yet
Demo!
Future Symmetry Improve user feedback in the editor. Handle tough numerically and geometrically degenerate situations. [DESCRIPTION] Ideas: Editing positions. Expanding network from previous nodes. Bezier curve input / output. Flows. User input. Areas. Smoothing. Symmetry. Randomized bouncing of a geometric form that results in a particular behavior. A study of popcorn probability. Beaches and Oceans. Fix up line segment intersection functions for intersection reporting and monolithic intersection routines. [LINKS]
Future Packing Graphs Take a collection of drawings and pack them into a polgonal region of space without collision. Blue Noise.
[Future] Beam Tracer
Compute the Geometric Filled Regions that coorespond to beams of light traveling through a scene. I will spend this week ironing out the last bugs. TODO: Consider moving hole representations as native properties of a Halfedge Graph.
Online Demo! Git Repository
[Future] [Spring Break]
[Future] Offsets [DESCRIPTION] [LINKS]
[Future] Flows and/or Smoothing [DESCRIPTION] [LINKS]
[Future] Topological Constructions Construction of graphs fitting various parameters, such as descriptions of set theoretic structure. [LINKS]
[Future] Demuth Styling (Or other texturing) [DESCRIPTION] [LINKS]
[Future] Support Degenerate Geometries I will try to make the algorithms more robust and will process perfectly overlapping collinear line segments and the like. [LINKS]
[Future] [TOOL NAME] [DESCRIPTION] [LINKS]
[Future] [TOOL NAME] [DESCRIPTION] [LINKS]

End of Constant Inputs Vector Tools Site