SuperShapes 2

From Baudelaire, Fleurs du Mal (The Flowers of Evil)
[bad translation G LeMasters]

Le Guignon
Pour soulever un poids si lourd,
Sisyphe, il faudrait ton courage!
Bien qu’on ait du coeur à l’ouvrage,
L’Art est long et le Temps est court.

Born Under a Bad Sign
To raise up a burden such as this
Would require the strength of Sisyphus!
My heart is in the work, and yet
Art is long, and Time is short.


fleursdumal3 Finally, the rest of the tutorial. Kinda. I spread this out over the period of a week, in bits and pieces of spare time, and it is a challenge to remember what’s been done and why. (It is a challenge, in part, because I’m figuring it out myself as I go).

Still, the results are compelling (see randomly-generated iterations, below), and if some aspect of the code interests you, let me know and we’ll make sense of it together, in class or via email, etc. As it stands, the comments I’ve included should be fairly useful.

Which brings me to a caveat of sorts: I think there is something wrong in the code, as it evinces a wretched rate of refresh.  Remove the noLoop() function and it slows to about 1 fps (frames per second). That shouldn’t be the case, as it isn’t designing the shapes any more (it is merely drawing them).  It should be instant (or nearly so). If you’re able to discover the source(s) of these issues, please let me know!

See the Pen rrKoar by Garrison LeMasters (@Garrison) on CodePen.22746

Quick challenge

This is usually an interesting exercise:

(1).  Using some of the functions listed below, can you build a functioning digital clock?  I expect that it would actually look like a clock radio or maybe something more sophisticated, but you can always get started by just pushing the current hour and the current minute to the canvas as a text display.  How to do this, you ask?  Here’s the barest outline of one approach:

See the Pen simpleDigiClock by Garrison LeMasters (@Garrison) on CodePen.22746

(2). Once you’ve got the display right, can you make the clock keep correct time? Can you, for example, make the colon between the hour and the minute flash on and off with every second that passes? Can you figure out how to make use of a more suitable typeface?

(3). Brilliant. Now do an analog one. Leave the numbers off the face for now — they’re a distraction. Start with an hour hand and a minute hand. Once that works, add a second hand. Style counts.

SuperShapes the Second

UPDATE: A reminder that class does not meet today (10 October); what's more, you have no assignment due for the day. I encourage you to take advantage of the reprieve and invest extra time in thinking through some difficulty you've been having with code of late.

oopsuperformulae-2016-10-10-09-26-23Here’s a second iteration of the SuperShapes OOP code: It actually does something now (even though its the same thing we’ve been doing for weeks–just concentric circles on a field).

But I’ve also changed a few things in its dark heart, and added something new: I’ve split up my P5JS code into 4 or 5 separate files in order to make them easier to work with (its a personal choice, really; you may find that approach unappealing). Note, though, that in order to have all of them load, I have to include each of them in the HTML index file, tagged with <script> tags. For more information or to download the code, visit the tutorial’s repository on Github.

Note that for simplicity’s sake, the version (below) has all p5 code merged into a single file.

See the Pen OOPSuperShapes Tutorial2 by Garrison LeMasters (@Garrison) on CodePen.22746

OOPs, SuperShapes!

Here’s the first part of the tutorial. If you haven’t already seen it, consider reading this short overview of the project. The notes about what I’m trying to do are strewn throughout the code itself.  There’s no video, as I’m re-factoring this code as I go to make it useful as a tutorial.

See the Pen SuperShapes OOP 1 by Garrison LeMasters (@Garrison) on CodePen.22746

Note that you can also find the code online at Github. You can visit my repository for this tutorial.

Supershape Wallpaper

A few days ago, undone by the prospect of another day of endless rain, I decided to create a new iterative wallpaper series based on the concept of supershapes.

Good Lord and butter, that is a hell of a clause:

...I decided to create a new iterative wallpaper series based on the concept of supershapes.

“Iterative Wallpaper” is my term for a style of expressive computation to which I frequently return: Evenly spaced rows and columns of similar-but-unique shapes (faces, alien masks, plumbing, metro maps, and hexagons are among those I’ve already built). It isn’t really meant to be wallpaper, but I got the idea originally from the custom-made wallpaper featured in my room at a boutique hotel in Tempe, Arizona, called “The Graduate” (very nice place, by the way).


SuperShapes are interesting, but beyond our scope here. In effect, they are complex primitives, if that makes sense, proposed in the late 1980’s, and developed further in the early 2000’s by Paul Bourke (after initial EQNs from Johan Gielis).  See, e.g., Paul Bourke’s site.

After six hours of unusually focused work, I managed to send some proofs to the printer.

They aren’t finished yet, but they are in a fine place to accommodate a new tutorial on object-oriented programming. In this particular tutorial, we’ll look at how we can put objects in arrays inside other objects.

So let’s do this thing!  Let’s light this candle!  Tutorial begins in next post.

Generative Identity algorithm (overview)

So… here’s something that could be the basis for an entire course, but for now will have to remain limited to an off-handed Sunday morning suggestion for coding practice: Today, I’ll be adding a few posts about how to build an algorithm that produces Generative Identity designs.

Look: Generative Identity design has been around for a couple of decades by now. Its a great idea, but it really never took off. In part, I would suggest, because the procedural literacy of our world is still miserably negligible, and (I presume) generative identities are less interesting to folk without some background in proceduralism. (Otherwise, it may just as well be randomized noise, right?)  And Identity Design is (ideally) inclusive and intuitive, not exclusive and opaque.

But the idea of Generative Identity remains appealing (to me, at least) as an academic exercise. Below, I offer some examples I’ve pulled from the internet over the past few years.  I’ve also begun writing guidelines for this exercise, but they go on (and on), and some of the results I’ve gotten from them are less than ideal. SO: Clearly this is a fun idea to begin to explore, but it will take a day or two to unfold how it might work.

In the meanwhile, check out the images below.  Pay attention, for example, to designer Chris O’Shea’s “biometric designs”, below (an alternative to the signature?); to MIT Media Lab’s generative logo (which is everywhere); and (especially) the identities generated for the Alumni Association of L’Ecole Polytechnique (Lausanne, CH), which is among my favorites lately (although I’m not convinced it is a truly generative design — more on this later).

And so perhaps there is an interesting question to ponder as we approach the 20th Anniversary of CCT: How, for example, to generate a novel “identity graphic” for every CCT alum, something that is somehow evokes their time with us? More to the point, perhaps: How to keep that identity graphic from devolving into a mere bar code? In other words, a 1:1 relationship between information and its presentation is not generative — it is merely indexical. A generative graphic ought to emerge from the interaction of fields, not merely from their representation. On scales such as these, this is a thing not easily accomplished.

But enough, or too much.  I’ll post some suggested guidelines shortly.  Feel free to play with the idea on your own, though.

UPDATE:  Here’s a short tutorial (howbeit in Java) that is said to create a “generative identity.”  The exercise is fine, but the outcome is almost entirely randomized; moreover, the randomization can only affect tiny portions of the design, not the thing as a whole.  Without recursive functions or (at the very least) mutually-dependent variables, the logo is not “generative.”  It is randomized (which is fine, but altogether different than generative).


FOOTNOTE: According to IDC’s Worldwide Software Designer and ICT-Skilled Worker Estimates, there were over 18 million programmers on the planet in 2014; almost 8 million of those were not professionals (“hobbyists”). I have seen similar numbers from Evans Data, whose Global Dev Pop Demos put the number at 18.2 million. “ICT-Skilled Worker” is a notoriously slippery term (those skills often have a short shelf life, and are invariably bound to localized cultural contexts of computing, something many organizations find difficult to understand). I don’t have any numbers in front of me about the procedural literacy of Americans… and (as I think about it) I’m not sure that I would want to commit to any single definition of procedural literacy at the moment, in any event. This is an interesting problem and deserves further attention.)

Site update

I have 4 posts and some new exercises to post, but I’m terrible at the blogification, and every hour I spend on a post means it splits into two new posts.  This is the “many-headed hydra” approach to writing, and it is not one I recommend.  In any event, I hope to get those up this afternoon.