
Your Random Numbers – Getting Started with Processing and Data Visualization Over the last year or so, I’ve spent almost as much time thinking about how to teach data visualization as I’ve spent working with data. I’ve been a teacher for 10 years – for better or for worse this means that as I learn new techniques and concepts, I’m usually thinking about pedagogy at the same time. Lately, I’ve also become convinced that this massive ‘open data’ movement that we are currently in the midst of is sorely lacking in educational components. This post, then, is a first sketch of what a lesson plan for teaching Processing and data visualization might look like. Let’s Start With the Data We’re not going to work with an old, dusty data set here. Even on a Saturday, a lot of helpful folks pitched in, and I ended up with about 225 numbers. I wrote a quick Processing sketch to scrape out the numbers from the post, and then to put them into a Google Spreadsheet. It’s about time to get down to some coding. Got it? Now we need to get our data from the spreadsheet. OK.
Learning Processing 2nd Edition The Tweet button is a small button displayed on your website to help viewers easily share your content on Twitter. A Tweet button consists of two parts: a link to the Tweet composer on Twitter.com and Twitter for Websites JavaScript to enhance the link with the easily recognizable Tweet button. The publish.twitter.com website provides a simple, form-based approach to generate HTML markup for a Tweet button you may copy-and-paste into your website template. A tweet event is triggered on your webpage when the Tweet button is tapped or clicked. How to add a Tweet button to your website 1. 2. Tweet text components text A text parameter appears pre-selected in a Tweet composer. The text parameter may be auto-populated from the webpage’s <title> element if not explicitly set. url The url parameter contains an absolute HTTP or HTTPS URL to be shared on Twitter. hashtags Add a comma-separated list of hashtags to a Tweet using the hashtags parameter. via Button customization Size
Night #6: Image Sequence Object (with variable speed) I have an example from Learning Processing which demonstrates how to package a “pre-made” animation (i.e. sequence of images) into an object in Processing so that it can be duplicated many times on screen. For tonight’s example, I’m going to make a new version that improves a few key points. First, in the original example the the image files are loaded in the class itself. This is problematic. Sure, if you make one object then you are loading files from the hard drive once. However, if you make many objects, then you are loading the same images over and over again which is totally unnecessary (and can cause problems like using too much memory, stuttering if objects are made during draw(), taking too long to start up, etc.). We can fix this by loading an array of images in setup() and passing it to the object. Animation a; void setup() { // Load the image sequence first! The class then receives the array in the constructor and passes it to its own array. Here is the example.
Generative Design Persönlich haftende Gesellschafterin Schmidt-Friderichs GmbH, Mainz Vertretungsberechtigter Geschäftsführer Karin und Bertram Schmidt-Friderichs Registergericht Amtsgericht HRA 35 80 Registernummer HRB 67 15 Verkehrsnummer 43 990 Umsatzsteuer-Identifikationsnummer (gem. 27 Umsatzsteuergesetz) DE 197734146 Inhaltlich Verantwortlicher (gem. 10 Absatz 3 MDStV) Karin und Bertram Schmidt-Friderichs (Anschrift wie unten) Konzeption und Gestaltung Gold & Wirtschaftswunder, Benedikt Groß Web Development Niels Poldervaart Anschrift Verlag Hermann Schmidt GmbH & Co.
Augmented Reality with #Processing - Tutorial by Amnon Owed All of the visuals in the above video were created using NyArtoolkit for Processing. NyARToolkit is an augmented reality toolkit built with 100% pure Java. It is derived from ARToolkit-2.72.1. Like Processing itself it’s open source and free! All right so let’s start with the general setup. 1. 2. 3. 4. All right, time to recap. Example 1: Basic The first example is basic, but holds all of the important techniques that are necessary for more advanced uses of the NyArtoolkit. If you input the following image (place it in the sketch’s data subdirectory)… …into the first code example, you should end up with something like this… Example 2: Dynamic Time to get a little more dynamic. Example 3: OOP The third example serves two purposes. Main Sketch ARObject Troubleshooting & General Tips If you get an “Exception occurred at Multimarker.Multimarker” you probably haven’t changed the camPara String.
Learning Processing 2nd Edition The Tweet button is a small button displayed on your website to help viewers easily share your content on Twitter. A Tweet button consists of two parts: a link to the Tweet composer on Twitter.com and Twitter for Websites JavaScript to enhance the link with the easily recognizable Tweet button. The publish.twitter.com website provides a simple, form-based approach to generate HTML markup for a Tweet button you may copy-and-paste into your website template. A tweet event is triggered on your webpage when the Tweet button is tapped or clicked. How to add a Tweet button to your website 1. 2. Tweet text components text A text parameter appears pre-selected in a Tweet composer. The text parameter may be auto-populated from the webpage’s <title> element if not explicitly set. url The url parameter contains an absolute HTTP or HTTPS URL to be shared on Twitter. hashtags Add a comma-separated list of hashtags to a Tweet using the hashtags parameter. via Button customization Size
Ani - An animation library for Processing An animation library by Benedikt Groß for the programming environment Processing. Last update, 2013/02/28. Ani 2.5 is a lightweight library for creating animations and transitions. Easily spoken Ani helps you to move things around on the screen or a bit more abstract, to animate any numeric variable. Most of the time a single line of code like the following one is enough: Ani.to(object, duration, variable name, target position, easing); Target object ("this" or any reference to an object), duration of animation specified in seconds or frames, variable name (which numeric variable is used), easing (the characteristic of motion) ... The syntax of Ani is created with simplicity of use in mind. Feedback is very welcome, but please use the processing discourse forum for that. Installation ↑Up Unzip and put the extracted Ani folder into the libraries folder of your processing sketches. Demos Check the demos in the distribution of Ani (zip file), or have a look at them by watching the videos. Ani
Nervous System | Tools | OBJExport library for Processing OBJExport latest v0.2.4 04/21/2013 DescriptionThis is a library to export meshes from Processing as OBJ or X3D files. It can export color meshes with triangle and quad shaped faces as an OBJ or X3D with a PNG texture map. It can also export meshes with faces with an arbitrary number of sides (without color support). OBJExport works with beginRecord(), beginRaw(), and createGraphics(). The library also supports color mesh export creating a .png texture and a .mtl material file to go along with the obj. The library does not support stroke(), texture() or normal() in the export. Tested on Windows 7, Processing 2.0b8 Warning This library is brand spanking new and probably has bugs! Installation To install simply download the zip file, and extract the contents to your Processing libraries folder. Basic Example Color Example Author Jesse Louis-Rosenberg, Nervous System jesse@n-e-r-v-o-u-s.com
Fritzing Pdf \ Libraries \ Processing 1.0 PDF Export This library makes it possible to write PDF files directly from Processing. These vector graphics files can be scaled to any size and output at very high resolutions. There is also a contributed library for exporting images to SVG format; check the libraries section of the website for more information. The PDF library can flatten 3D data into a 2D vector file, but to export 3D data, use the DXF library. This library is frequently used with the core Processing function size(), with a combination of beginRecord() and endRecord(), or with beginRaw() and endRaw(). A series of examples demonstrating some basic uses of the library appear below: Single Frame (No Screen Display) This example draws a single frame to a PDF file and quits. import processing.pdf.*; void setup() { size(400, 400, PDF, "filename.pdf"); } void draw() { // Draw something good here line(0, 0, width/2, height); // Exit the program println("Finished."); exit(); } Multiple Pages (No Screen Display)
Nest Nest A library by Eric Socolofsky for the Processing programming environment. Last update, 10/28/2013. Nest provides a high-level, simple scenegraph for Processing, modeled on the API for the scenegraph and display list implemented by ActionScript 3. Nest is targeted toward developers familiar with AS3, who wish to organize on-screen objects in a display list hierarchy. In addition to the scenegraph, Nest also includes an event-based communication system (built on the Observer pattern as implemented by Java's Observer interface), and some minimal UI components. Download Download Nest version 0.7.0 (9) in .zip format. Installation Unzip and put the extracted Nest folder into the libraries folder of your Processing sketches. Keywords. scenegraph,event,parent,child,actionscript,as3 Reference. Source. Tested
Toxiclibs.js - Open-Source Library for Computational Design There are several areas where toxiclibs.js stands apart to remain more idiomatic and helpful in the javascript environment. For a complete description of the conveniences added to toxiclibs.js, read the sugar file in the repository. Some examples of these differences are: loose-typed for working more naturally with javascript objects, no instanceof tests are ever usedtoxi.THREE.ToxiclibsSupport for easing work with Three.jstoxi.color.TColor additions for complete interoperability with CSS and X11 color names.toxi.geom.mesh.OBJWriter‘s getOutput() for getting OBJ contents back as a string (helpful in js environments that don’t have file system access). Arrays / Collections The Java version frequently uses Collections, Iterators, and java-specific for-loops[2]. var len = mesh.faces.length, i = 0;for(i = 0; i < len; i++){ doSomething( mesh.faces[i] );} This section will occassionally be expanded on.
Quarks Place This library is useful for any one wishing to do some 3D graphics/games programming in P3D or OPENGL modes. It not only provides a number of 3D shapes but enables simple creation of a 3D terrain and user controllable camera that can traverse over the terrain. Movement on the terrain can be clamped to prevent moving off the edges or wrapped so that as you move off the terrain your position is wrapped to the other side. The terrain class has a method to create a height map based on perlin noise that is seamless, this gives the impression of travelling over an infinite world. As of version 2.0.0 the library provides a method to enable shape selection and thus user interaction. The library only uses available Processing methods to access the OpenGL commands so should be compatible with future releases of Processing. Shapes available include: Images can be used to texture any of these shapes and all (apart from Cone and Box) support texture tiling.