Add Magic section to README
This commit is contained in:
parent
1cba9adfae
commit
20980a8a9c
27
README.md
27
README.md
@ -6,6 +6,33 @@ with [Jekyll](http://jekyllrb.com/).
|
|||||||
|
|
||||||
See it at [http://www.hallada.net/](http://www.hallada.net/).
|
See it at [http://www.hallada.net/](http://www.hallada.net/).
|
||||||
|
|
||||||
|
##Magic##
|
||||||
|
Most of the development work of this website went into creating what I like to
|
||||||
|
call "magic", or the dynamic background to my homepage. A few seconds after
|
||||||
|
loading the page, a branching web of colored tendrils will grow in the upper
|
||||||
|
left corner of the page, followed soon after by other "spells" sprouting in
|
||||||
|
random locations across the background. Clicking on the background will also
|
||||||
|
initiate a starting point for a new spell to appear.
|
||||||
|
|
||||||
|
It is meant to represent the imaginative and infinite wonders of programming as
|
||||||
|
described eloquently by Fred Brooks in one of my favorite quotes from him in
|
||||||
|
his book *The Mythical Man-Month*, which is featured on the page.
|
||||||
|
|
||||||
|
A canvas element spans the entire background and [my script](js/magic.js)
|
||||||
|
leverages [AnimationFrame](https://github.com/kof/animationFrame) to animate
|
||||||
|
the construction of procedurally generated trees of
|
||||||
|
[B-splines](http://en.wikipedia.org/wiki/B-spline) for a random range of time.
|
||||||
|
I adapted a large portion of the code from Maissian's [tutorial on simulating
|
||||||
|
vines](http://www.maissan.net/articles/simulating-vines), making it more
|
||||||
|
random, colorful, and more CPU efficient.
|
||||||
|
|
||||||
|
It was really fun to tweak various variables in the script and see how the
|
||||||
|
animation reacted. It didn't take much tweaking to get the lines to appear like
|
||||||
|
lightning flashing in the distant background, or like cracks splitting the
|
||||||
|
screen, or like growing forest of sprouting trees. A future project may involve
|
||||||
|
putting the magic up on its own webpage and add UI dials to allow anyone to
|
||||||
|
change these variables in realtime.
|
||||||
|
|
||||||
##Layout & CSS##
|
##Layout & CSS##
|
||||||
I use a [grid system devised by Adam Kaplan](http://www.adamkaplan.me/grid/) and
|
I use a [grid system devised by Adam Kaplan](http://www.adamkaplan.me/grid/) and
|
||||||
with some pieces from [Jorden Lev](http://jordanlev.github.io/grid/). It is
|
with some pieces from [Jorden Lev](http://jordanlev.github.io/grid/). It is
|
||||||
|
Loading…
Reference in New Issue
Block a user