Processing {Tools}

From personal use

Related code https://github.com/Utopiah/Processing.JS-old-code

• to try to save canvas to images as a form of preprocessing as a wiki skin
  • var image = document.getElementsByTagName("canvas")[0].toDataURL();
• SVG shape used in WikiBrainMapping
• explanations of Innovativ.IT
• ./pub/skins/glossyhue/skin.tmpl deactivated for now
  • few bugs, bit slow, out of date, still didn't integrated it as a full interface
  • some visitors keep JS deactivated thus wondering why there is a blank space on top of each page
  • now using Path:/pub/processingjsgraph/index.php to browse through Path:/pub/processingjsgraph/ generated visuals
    • using graphprocessing.php and gp_pageview_withingroup.php in code repository to generate visualizations
  • adapted to I:Person/ based on Person principles
    • note that the path is not handled properly and only quick fixes were applied here
    • axes have been switched and scales increased to fit the property of the graph
    • improved a group version and a page version by using different canvas size and scales
    • improved by displaying little pictures of friends' head over their ellipse (not displayed for privacy reasons)
      • use Vimperator#write to save a JPG picture in the right location faster
    • e.g. (names replaced with partial MD5 for privacy reasons, non log scale)
    • new circular visualization and supporting dragging
      • but without proper angles and text/image dragging
• add pictures embedding (used with the "flower" of edition viz)
  • image() (without forgetting preload!) tint()
• structuring functions
  • setup() draw()
• drawing functions
  • text() ellipse() fill() background() size() line() stroke()

Processing.js specific

• one can load multiple images using a list Processing.js for Processing Devs MozillaWiki
• Reference all the commands available
• http://dev.w3.org/html5/spec/the-canvas-element.html
• setting up the size in <canvas> is optional if done through size()
• Path:/pub/processing.js
• init.js allows to pull in <script type="application/processing"> (deprecated)
  • else generate .pjs file and load it within the canvas with canvas data-src="path/to/file.pjs" cf http://processingjs.org/blog/?p=122
• a page can have multiple <canvas> and each can be transparent and positioned (including with z-index) through CSS
• display texts (including links) over canvas like http://processingjs.org/ do
  • but then if the object the text is associated too is moved, it will not be followed, it has to be rendered again
  • example with JQuery updating CSS by Xavura

Conversion

Note: keep a minimalist mindset, Form follows function, the objective still is to be efficient (cf Information Visualization Manifesto) so visualization should provide a way to interact with data, providing affordance to detect patterns, infer correlations, modify the structure but not to "look pretty" (cf The Self Made Tapestry).

• bar graph
  • now mostly using Gnuplot
  • Exercises graphic currently using sparklines
  • try Sparklines by Will Larson
• graph layout engine
  • Graphviz using Cookbook:pmGraphViz through AT&T public webdot server
• specialized nodes visualization
  • Seedea.org main visualization thanks to SeedeaOimpInterface.php cookbook
  • try Wiki visualisations with JavaScript: Processing.js and Raphael by Matt Ryall
    1. root = list everything -> remove "/*" -> uniq(array) ->
    2. make new skin if required, easier to embed
  • consider Seedea:Seedea/Visualization and its Ghost in the Shell proposal
    • including the "personal" barriers that could be used not on Seedea but here for the PIM ( FB_Wiki )and especially the transitions Internal_wiki <-> FB_Wiki
  • consider Cognition#WikiBrainMapping for here ( FB_Wiki )
  • use httpd or browser logs for activities, including paths
  • use locally define (:pagelogo: path/file.png:) with transparent form and correct size within ellipses to improve uniqueness
• social network
  • Person visualization currently based on pmGraphViz
• use treemap to display data on the server
  • not in Processing but with PHP http://www.neurofuzzy.net/2006/04/28/treemap-php-source-code/
    • quick demo at http://www.caseariasylvestrisswartz.org/thesis/PaolaSpandre/pub/treemap/index.php
    • listing could be improve by listing periodically with crontab
  • in Processing but with Java http://benfry.com/writing/treemap/library.zip
  • history of edits per page
    • Seedea:Seedea/SandIdeabox#seedeaimp
• meeting timing as color moving borders
  • cf... PIM? Seedea?
• live browsing visualization
  • probably inspired by WebAtlas NaviCrawler (unmaintained as of March 2010)
  • jbilcke's tinaweb Standalone web project for the Tinaviz Java Applet
  • Processing.js + Greasemonkey

Tests

The entire website (without PmWiki and Site goups) : (:GraphProcessingEntryPoint:) Very large, too slow, to correct.

Generated Processing.js code : http://fabien.benetou.fr/pub/rootgraph.pjs , note that as of April 2010 that's about 300 nodes and 600 links between them.

There is still to do

1. groups by color
2. zooms
3. filter by groups
4. filter as texts at the bottom of the page
5. basket and other actions to drop pages on

Alternatives

• Raphael JavaScript Library to work with vector graphics on the web.
• http://vis.stanford.edu/protovis/

To explore

• Processing.org initiated by Ben Fry and Casey Rea
• Processing.js open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets.
• Seedea:Research/Visualization
• Drawing a Hexagon in Processing / Java by Grant Muller 2009
  • as am very interested, probably because of Japanese animation style in hexagonal HUD
• Junk Charts by Kaiser Fung
• OpenProcessing Share Your Sketches
  • Processing code under CC GPL license with visualization
• 16 Javascript Libraries for Visualizations by Benjamin Wiederkehr, Datavisualization.ch 2009
• Learning WebGL lessons 'n' links
• RADart # 5 : interfaces multitouch et/ou naturelles, 18h45 September the 23rd La Cantine
• Introduction and A Brief History of Visualization by Shawn Allen, mfa in interaction design July 2010
• InfoVis:Wiki community platform and forum integrating recent developments and news on all areas and aspects of Information Visualization.
• Choosing a good chart by Andrew Abela, The Extreme Presentation(tm) Method 2006
• ExplorerCanvas brings the same functionality [canvas] to Internet Explorer
• packet-flight script that turns a TCP packet dump (tcpdump) data into a Processing animation.
  • Packet Flight: RickRoll @ 12X by Carlos Bueno, September 2010
• impure.com
• ProcessingJS for DokuWiki (via Pomax on mozilla/#processing.js )
• Processing on the web - a tutorial
  • especially section making your sketch and your page see each other
• VOID by coffeemakescreative, a conceptional processing magazine for the iPad.
• openFrameworks (aka OF)
• Processing.js projects @ nihongoresources, repository domain for Mike "Pomax" Kamermans' processing.js projects

Note

My notes on Tools gather what I know or want to know. Consequently they are not and will never be complete references. For this, official manuals and online communities provide much better answers.