@aparrish this is really neat

@aparrish ooooh I like this!

based on yesterday's code, here's the entire alphabet (uppercase and lowercase) with each letter's points a little more than halfway lerped to the next https://mastodon.social/media/WsrdYvLeDyuV7MXCTWM

@aparrish The Xs look inviting!

@aparrish or in fact the Ws... I apparently no longer know the order of the alphabet :-/

@aparrish my son has been demanding i read Chicka Chicka Boom Boom to him all day and now this is breaking my brain

@phooky hahaha

perhaps not surprisingly, a little less successful with a delicate serif font https://mastodon.social/media/sh4XjS9VxO7UmLWFgME

@aparrish omg i love this

is this a typeface you're working on?

@envgen the typefaces are both from https://www.theleagueofmoveabletype.com/ I'm just making a mess out of them with p5js

@aparrish it's really good, i'd use the shit out of this

@aparrish could you do this with comic sans? I think all the distinct shapes would make it interesting.

@zatnosk 🤔 https://mastodon.social/media/9cf0N4ZKV8f2RswrzEU

again building off the same code, a matrix showing all possible halfway-interpolations between points in the letters (i.e., top row is (A+A)/2, (A+B)/2, (A+C)/2, etc.) (matrix is not symmetric because letters have different numbers of points)

hi-res here since mastodon downsampled it http://static.decontextualize.com/alphabet-lerp-matrix-2018-01-07.png

today: speculative letterforms made from stitching together top/bottom halves of randomly rotated letters (I have more ambitious ideas for this, just trying to do some foundation work today) https://mastodon.social/media/IqrbvTrThNYXQkt8jrs

@aparrish

Hell's own CAPTCHA's right there.

@aparrish next step: rotate the angle at which you half the letters (not just top-down)

@aparrish home world's horrible crystal lettershards fusion experiments

@aparrish
Have you read The Invisibles?

Basically every time somebody experiments with creating new alphabets via transformations of existing letter-forms, I think of a short sub-plot near the tail end of that comic, involving computer-generated asemic writing combined with a drug that caused people to believe everything they read (causing them to hallucinate things that couldn't be represented in any human language).

@enkiv2 i haven't, seems up my alley though!

@aparrish
It's big, sprawling, and messy, but it's basically a big 90s update of Illuminatus! & interesting for the same reasons. Highly recommended, if you're willing to read a comic book that's literally a thousand pages long.

continuing this experiment: trying to match top halves to bottom halves based on how similar the points are through their horizontal center line (also fixed the rotation here to increments of π/8 radians) https://mastodon.social/media/JTU2hQbVTvoqYYC1Szc

@aparrish I’m enjoying watching these permutations!

@aparrish I love the look of these, keep going!

stringing together middle segments of letterforms based on similarity at the top and bottom of the segments https://mastodon.social/media/gvRrkTRdANymacTOuFI

(has some random rotation on the points of the letterforms themselves and on where each segment is drawn beneath the previous)

little experiment with animating this (reeeeally need to start doing all of this in webgl so I can get decent framerates) https://mastodon.social/media/u8A3eQR29dlibPKx0EA

@aparrish That is both super cool and wigs out my eyes something fierce.

@hummingrain my poetics is to make people woozy with language

@aparrish Really enjoying this, please keep going!

@aparrish (you could also use https://github.com/spite/ccapture.js/ to make videos at a consistent framerate!)

@six oh that's good to know about, thanks!

back to perlin noise experiments, setting offsets and line thickness with thresholds https://mastodon.social/media/VZ8iUyK3ysVjh2xk63s

@aparrish gestalt worms

@aparrish this is wonderful. reminds me a lot of the work tomato did for underworld in the late nineties

@aparrish e.g. https://youtu.be/5nyOdMyzemo

trying to figure out three.js. I am really not used to working with scene graphs https://mastodon.social/media/GquowEs33Gj5qrNuKaY

@aparrish humble request to see the word "blep" using this animation

I feel it is an excellent candidate

@midgetnazgul https://mastodon.social/media/4P6fCgCA5g-oEAADS9o

@aparrish [SQUEALS OF DELIGHT]

YOU MADE MY WEEK, THANK YOU SO MUCH

I keep on posting examples that look the same, but this one was made with a completely different set of tools: opentype.js -> svg-mesh-3d -> p5.js (kind of a hassle to get working tbh but will hopefully be wayyy more versatile for these experiments moving forward) https://mastodon.social/media/Mwq4ZesNa2DTzAv2_Qo

much smoother with the webgl renderer in p5.js but I need to figure out why it's drawing these extraneous lines. tomorrow i guess https://mastodon.social/media/-eQ4kYNUiHtKXISv7Vc

@aparrish for a sec i thought this was a procedural animated captcha, its a cool effect

@chr the effect is just adding perlin noise to the coordinates of each point! just an easy way to verify that I'm drawing the triangles in the right place and that I can write code that affects the way the shapes are drawn by modifying those coordinates

@aparrish I've been digging around this space a bit while trying to find a good rendering library.

One of the reasons I chose to avoid rune.js was it targets svg. It has some neat font stuff too http://printingcode.runemadsen.com/examples/typography/font/ (apparently using opentype behind the scenes).

I saw that someone was using two.js to generate sprites from svg for pixi.js to render. http://uihacker.blogspot.com/2014/10/javascript-use-twojs-to-prepare-svg.html - Doesn't help for me wanting to realtime game stuff, but two.js might be a more direct alternative vs meshifying?

@ultimape thanks for the pointers! i didn't know about two.js. ultimately i don't care about fast rendering, what i want is just intuitive access to the geometry in a way that makes it easy to play around with the glyphs procedurally... ultimately i don't think the mesh is what i want but all of the other ways of converting the shapes to xy coords make it difficult to render the glyphs as solid w/o filling in holes. probably i just need to get used to working with the path data itself 🤷🏻‍♀️

@aparrish Ah, if you're not focused performance, maybe that rune library would actually work then?

font-> rune.js -> svg ->two.js -> canvas?

As an aside, how are you exporting those gifs?

I haven't looked at it yet for p5.js, but I know processing proper could record canvas's pretty easily. I've used https://github.com/spite/ccapture.js/ in the past and https://github.com/Automattic/node-canvas seems like it might work too. I wanna let people capture high quality anim's from the game i'm working on.

@ultimape thanks! i've been using licecap because it's easy for now. very familiar with node-canvas but these are just daily experiments, not trying to do anything high quality yet. just a note, i am not a beginner—i teach creative coding (with processing and p5js) at the college level and have written a book on the topic for maker media. i actually used to share an office with rune madsen (who made rune.js)!

@aparrish whoa! I knew you were pretty cool, but that's awesome.
Rune seemed like a diamond in the rough when I found it.

Hope I didn't come off as patronizing. It looked like you were exploring workflows for rendering text and ran into a snag.

The frameworks I dug into are fresh on my mind and it makes me happy when I can help people do more cool stuff.

Please keep blogging your progress. It is very inspiring to me. 👍

@aparrish is p5.js your preferred framework/library? I've tried a few of the Ruby versions of processing (JrubyArt, propane) but never quite got them working right. I have tried p5.js, processing and even paperscript.js. I'm simply not too fond of working in JS.

@luisroca oh I hate working in javascript, it's a truly lousy language with lousy toolchains. I do like p5js, though, for certain applications (interactive sketches where you don't want or need a scene graph). p5js is also the framework that my department uses for the intro programming classes (which I teach), so another benefit of using p5js for my own experiments is that I can easily incorporate them into tutorials for my students