1.   the skinny

I’ve been making some [visual|web|epoetry] sketches.


Sketch because they are not necessarily complete, finished works.
Instead, they are tests, experiments, trials.
I’m making them and tweaking them, so they aren’t necessarily firmly fixed.
But once I get to where I think I’m going, I should move on to another sketch.


These are experiments in both text+image, text-vs-image, text, web, javascript, html, or G-d-knows-what.


These are not designed to show a mastery of html, javascript, jQuery, css, or any other technology. Rather, they are designed to present texts, and a familiarity with the above technologies. I hope to get some sort of good coding practices inside of them, but please be aware that these are sketches -- experimental quick takes, and code-reuse and perfection is not the end-goal.


The libraries I use are generally served up from my own server, instead of a CDN. This is mostly for personal reasons, as I tend to have caching turned off in my development browsers for development reasons. And I don’t expect a large server-load anyway.



2.   the sketchy


when in doubt, click-n-drag, or hit the spacebar


Sketch:001 - my original idea was that most sketches would look like this.

Sketch:002 - iteration 1 wouldn’t work in Fire Fox; this is essentially iteration 2. I’d like some more control over stacking.

Sketch:003 - click. there’s not a lot going on here, but just enough. Maybe alternate black-to-white.
Sketch:004 - closely related to the ideas from 001. need to get it to repeat. (I generated my own gif [online] for this)
Sketch:005 - version 2 (or 3 or 5 or something) of 005.5. Drag left or right-aligned columns, other column is mirrored. No flickering. Append url params “count=[n]” and/or “height=[n]” to change the text count (from default of 50) or line-height (from default of 15px).
Sketch:005.5 - A left-aligned column of text has it’s alignment shifted to the right every 50 milliseconds, giving the appearance of two semi-mirrored columns. not functioning “correctly” after spending far too much time on the algorithm.

Sketch:006 - A little visual play, and obscuring some text.

Sketch:007 - each character of the center text can be re-arranged using gridster.js. Not perfect. Interesting tool.

Sketch:008 - two XRML-style texts in supraimposition
Sketch:009 - eight smaller XRML-style texts start superimposed. They have been swiss-cheesed: the period-grid replaced by spaces.
Sketch:010 - riff off 005. New set of texts, completely different behavior. The merged colors are approaching that weird place.
Sketch:011 - 2012.11.02 riff off 003. I was wondering what would happen if the text-transitions were automated, and fast. No background, not a lot of styling going on. Space-bar to pause. There are 280+ text fragments inside.
Sketch:012 - 2012.11.05 riff on 011 leads me back to a project I’ve wanted to do since perhaps 1996 or 1997 but never really got around to it. XraysMonaLisa.WorkingScript was originally written in WordPerfect 5.1 for DOS and intended as an XRML-style animation, but only ever saw animations by me flipping through the pages on an amber monitor late at night. Many, if not most, of the frames are the empty, baseline-grid of dots. Space to pause; up/down to increase/decrease animation speed; right/left to change direction of animation (or step through if paused). Also takes initial frame and animation speed as parameters.
Sketch:013 - 2012.11.15 riff on 007 008 009 - grid of 30 small XRML-style blocks can be re-arranged, roughly staying in grid. Realisation of a note formerly in ideas. The jQuery plugin used limits columns, but does not limit rows.
Sketch:014 - 2012.11.27 Probably the simplest so far. This goes back to a fascination of mine in the late 90s. I must have written/drawn this dichotomy a hundred times.
Sketch:015 - 2013.01.14 incomplete. The effect is not what I was hoping for, and I don’t have an appropriate text-resizing algorithm.
Sketch:016 - 2013.01.25 very similar to Sketch:011, but with a little color, an interesting font choice, and a dynamic resizing library. That is pretty slow. <faster> is about as fast as it gets (append ?speed=n to redefine the speed).
Sketch:017 - 2013.02.12 uses a markov engine modified from Edde Addad’s charNG code. It tries to avoid repetition, but can end up in some long loops due to a poor implementation of that logic. Takes a handful of query-params to change engine type, ngram-length, and switch between one of 3 source texts. I would rather the chunks wrap on line-endings, but need to do more display tweaks....


Query params include: engine={markov|cento|overlap} to specify the engine (defaults to markov), ngram={1..n} for length, and content={raw|material|test} for three different text sources (defaults to raw).


http://www.xradiograph.com/netart/017.html?content=material (defaults to markov engine with ngram=5)


NOTE: the HTML file contains two entire gutenberg e-texts shoved into it, so it takes a while to load; regenerate with r instead of F5.
If those two files were includes, they would be cached better. (they should be anyway, no? Maybe I’ve turned off caching in my browser again. argh.)


UPDATE 2013.08.15: With a longer view of this, the character-based engine is poorly suited for the non-repeating word-based strait-jacket I tried to stuff it into. As a character engine it’s nifty! My stuffing is poor and buggy.
Sketch:018 - 2013.03.04 an extension of the core-idea in 012, extended to allow editing of the animation pages, and saving changes into local storage. It opens with 5-mostly blank templates, with the frame-numbers embedded to make it clear that it’s animating. There is a minimal status line. Still in-progress as of 2013.03.04.


Animation keybindings: p: pause, up/down: increase/decrease speed, left/right: forward/backward motion, ctrl-alt-e: toggle edit mode


Edit keybindings: alt-a: append [blank] frame to end, alt-i: insert [blank] frame after current frame, alt-ctrl-left/alt-ctrl-right: forward/backward one frame. NOTE: changing frames or leaving edit mode saves all changes (NO UNDO).


Single query-param is clearstorage=true which... clears local storage. NOTE: since the param is not removed, refreshing this URL after editing will ONCE AGAIN clear all changes you’ve made.
Sketch:019 - 2013 not really what I had planned. Needs some work.
Sketch:020 - 2103 should be an infintely-draggable plane of text; but due to text rendering differently in different browsers and machines, it sometimes has gaps between the charNG-created blocks. Thus rendering discrete islands, adrift in a sea of incoherent texts that refuse to cohere). There’s an alternate version Sketch:020b that renders the text to PNGs which seems to always work in Chrome.
Sketch:021 - 2013.11 not a sketch, not text. A simple drag-the-monster-trucks-around “game” for my son.
Sketch:022 - 2014.01.17 Selects a random Don Martin sound effect (from the array-based code that was adapted from the (totally tabular) Don Martin Dictionary) and loads up an associated image (via google-image-search). Click image to see original size; hover over image to see description, issue and date; press <space> to load a new SFX + image. If nothing appears, image might be taking a long-time to reload. It would be nice if there was a method to go back to previous images.... a local history.
Sketch:023 - 2014.02.14 elaboration of Sketch:007; new texts, outermost boxes rotate char-by-char in a gyre, center-box rotates line-by-line on mouse click. Hope to change to line-by-line on hover (with decent interval). Still some layout issues to fix.
Sketch:024 - 2014.03 “Polychrome Text” is a processing.js sketch-cum-text-painter.
Mouse click and drag to paint (previous paints will fade slightly).
Color and size are based on mouse position.
SPACE to paint without fading previous actions.
RIGHT/LEFT to increase/decrease rotation of letters.
R to reset rotation to 0.
UP/DOWN to change paint mode.
M to switch between grids and circles
Delete or Backspace to clear the screen.
S to Save. [not currently working]
Sketch:025 - 2014.03 "ImageTexter" makes images... from text! duh. Paint, grid, or automatic-spray.


Sketch:026 - 2014.03 “flocklex” is the processing.org flicking example with lexical (alphabetic) elements showing flocking affinity with “similar” lexical elements. So far, “similarity” is defined as alphabetic-distance (case-insensitive). Consider this a very early version. I’m hoping for a merging behavior of elements, allowing them to build up into words. Not sure how that will affect flocking.


Sketch 27 has not yet launched.



For Great Juche combines 310 slogans from the PDRK with google-images; very similar to Sketch:022. It’s also got a new naming and storage convention. Which I’m sure interests you greatly!


3.    Notes

  • Files are named with numbers, to avoid the the implications of a title both during and after development.
    • sketches are usually given an internal title. This usually appears during development.
  • The code should be reasonably good code. But not astronaut-architected.
  • The simplest thing that can possibly work
  • If I codify some practices (display, js, etc) I may go back and integrate them into earlier pieces. Currently, there is not much shared js or css.
  • When I look at some of this code, I cringe. I wrote it a couple of weeks ago. UGH. But they are sketches, not finished artworks.
  • Some ideas are coalescing into a library.



4.    ideas

in-page info, that can be hidden easily, and recalled easily. hrm.


(Perl?) based landing page, that auto-indexed available documents
Some sort of hover-area popup that contains popup-box-links for notes, citations, inspiration, etc. And/or links to related or prev/next works.


Something with scrapings from the dictionary of reduplicated words? - http://www.allusional.info/dictRedup/wiki/DictionaryEntries
Have to munge the scrape into a parseable, usable format.
And then.... what????


Use Content Editable combined with Local Storage to allow for in-browser editing by the viewer, with storage of edits that are restorable
NOTE: this required further finessing with scenarios such as that in Sketch:011, as the rendered text is not a static element, but embedded by JS from an array of texts. The changes would have to be pushed back to the array
The storage example uses a blur-event to trigger storage, but mor finessing will be needed, as any bound keys affect the animation would have to fire storage; or perhaps be disabled in some manner. The space-key, is the most obvious issue, since that resumes animation.....
OtherMichael February 15, 2013, at 03:39 PM


inspired by (not-working-in-Firefox) code in bgrin’s comment @ https://coderwall.com/p/lhsrcq
It _does_ work in Chrome, though, so you can test it out.
As one types, the background (slowly) changes.
But.... why would the user be typing in such an implementation?
There needs to be some sort of invitation, and a payoff.
And some other effect has to happen.
the text changes as one types.
Which reminds me, there was a net.art word “processor” that did this at some point, I think....


OtherMichael March 11, 2013, at 02:49 PM



http://jukkapekkakervinen.blogspot.com/2010/08/diitdiit.html - three columns, the first and third scrolling themselves (a text gyre). The central column static, or on-click change.
Partially realized in 007


http://ricostacruz.com/jquery.transit/ SCALE -- text expands (and grows transparent) on-hover


Just one or two (or three or something short) large words on-screen at a time.
Transitions via Airport
Modified airport. I don’t like how the length keeps changing due to the proportional spacing of the intermediate forms. A “real” airport display is fixed-width tiles.


I like the idea of interactivity. Reading as a game.
But not so far down the rabbit hole as InteractiveFiction


A Markov chainer. No need for an intake engine -- nobody will be dynamically/interactively providing source-texts. I (ahem) will decide that ahead of time. Some application (probably TextMunger) will digest text and excrete in some format.
The web-page code (js, presumably) will loop through that.
this way, each page can theoretically have new text, but w/o the overhead of all of that pre-processing. Output takes some time, but nowhere near the time of first munching.
OtherMichael February 15, 2013, at 03:49 PM Partially realized in Sketch17 The engine-work is ongoing.


Every few seconds, an individual (at random) character in the text runs through a randomization-sequence, blurring through the chars. And back to the original char.
Alternatively, all chars will be randomized at this rate until ALL are; the process then reverses.
Another block of text remains unchanged.


Tiles of text (words) fly away from the cursor, thus re-organizing the text, without allowing direct click-n-drag control. By avoiding the reader, the text is re-aligned.
The text is readable, but in opposition to the reader?
Reactive to, anyway.
Not the reader’s gaze, unfortunately.


http://ianli.com/infinitedrag/ tiles are markov-generated from a pre-existing map. new tiles are manufactured as scrolled.


BONUS: extra algorithm to have some sort of matching between the tile edges.
Or is that the usual “exercise for the reader” where they make up patterns where none were “intended” ?


OtherMichael February 15, 2013, at 03:49 PM
Bonus 2: once tiles are generated, they are dumped into Local Storage?.
So subsequent visits maintain a map of pre-explored space, allowing the viewer-author to continue to write new areas of the map.
If there was more feedback between what has already been generated and what is generated next, that gives a greater reason to return.
Not just increased complexity (because that would have some sort of diminishing return). Some other increasing/complication metric


Bonus 3: tiles are editable


More color play (as in 002)
OtherMichael February 15, 2013, at 03:49 PM other color comes in with 005 010  016 017


Copy or copies of text are rotated in superimposition


Copy or copies of text are mirrored/inverted in superimposition


texts start out same color as background (which is... black)
as you approach a text, it becomes visible, but fades as you move away - using the “opacity of multiple elements” option from this jQuery Approach plugin
(non-linkable, non-default demo; select from dropdown under demos)
I tried this, and the plugin was unworkable for my large dataset (200-300 text pieces).


text shuffles itself as you watch
the sense/nonsense re-orgs @ jhave-about using jquery-easing is a nice effect



5.   Online Repo

See the code online @ https://github.com/MichaelPaulukonis/WebText


Processing.js sketches have original versions @ https://github.com/MichaelPaulukonis/processing



6.   See Also




7.   Tags

epoetry javascript writing



Comment Page  

  Extremely Cheap Nike Air Max 2013 For Gentlemen Lower Cost With Latest Fashion   - 18.03.2015 - 01:04    
8.1   http://www.basingstokesikhs.co.uk/images/config.php?Nike-Air-Max-2013-Running-Leather-Mens-Black-Gray-t-3000_687.html(approve sites)

Hello! I could have sworn I’ve been to this website before but after reading through some of the post I realized it’s new to me. Nonetheless, I’m definitely happy I found it and I’ll be book-marking and checking back frequently!

  New Free 3.0 V6 Blue White Black Mens   - 18.03.2015 - 00:46    
8.2   http://www.psp-repairs.co.uk/images/config.php?Nike-Free-3.0-V6--Running-Mens-Blue-White-Black-t-1338_169.html(approve sites)

Today, I went to the beachfront with my children. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is entirely off topic but I had to tell someone!

  Cheap Air Max 2011 Coffee Mens Running   - 17.03.2015 - 22:18    
8.3   http://www.tarrantandsonproperty.co.uk/images/config.php?Nike-Air-Max-2011--Running-Mens-Coffee-t-2170_417.html(approve sites)

I was wondering if you ever thought of changing the structure of your website? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or two pictures. Maybe you could space it out better?

  Buy Nike Free 5.0 V4 Gold Womens   - 17.03.2015 - 12:12    
8.4   http://www.candida.bionetics.co.uk/images/config.php?Nike-Free-5.0-V4-Running--Womens-Gold-t-2230_359.html(approve sites)

Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You definitely know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving us something informative to read?

  Nike Free 2.0 Fast Shipping Of High Standard   - 17.03.2015 - 09:57    
8.5   http://www.philcrick.co.uk/images/config.php?Nike-Free-2.0--Running-Mens-Sky-t-1429_54.html(approve sites)

Hi there! I just wanted to ask if you ever have any issues with hackers? My last blog (wordpress) was hacked and I ended up losing many months of hard work due to no back up. Do you have any methods to stop hackers?

  OtherMichael   - 13.02.2013 - 23:11    

They probably won’t change all that much -- they are sketches.


Hopefully, their half-formed natures will inform other, more-complete works.

  BECKY   - 18.10.2012 - 14:42    

These are awesome. do i understand correctly that they are works in progress so they will likely change?



9.   Add Comment

 Your Message
 Enter value ← Have you entered the code number?