Andy Clarke on Designing Your Site Like It’s 1998.
Man, it took a long time to get to Grid and Flexbox :-D
Also, he leaves out the annoyance of being so careful about extra whitespace in tables and what not..
Friday, December 28, 2018
Tuesday, December 25, 2018
fakin' spheres
There's an old edutainment toy Thinkin' Things Collection 2 - I cued that link to what I thought was the most interesting bit, wrapping bitmaps around spheres and cones and whatnot.
For funsies, I wanted to see if I could replicate the effect by (somewhat linear) taking a "view window" that slid across the square bitmap, then stretching it into a circle. The result, "sphereit", made an interesting visual effect but wasn't quite what I had hoped for... (in retrospect, too-cheat-y; the full width of each row gets stretched exactly the same amount, which isn't the case for a sphere.)
Also I made it MUCH harder on myself in solving the "what to do when the 'window' that we're using to map onto the front of the 'sphere' falls off the side" problem. The easiest solution would have been to construct a double-image offscreen graphic and slide the window across the center of that, resetting before reaching the edge. Instead I used two "windows" on a single-width bitmap, which made the math really tough to glue 'em back together at exactly the right proportions for displaying as a single thing. (I put back in a broken version at the lower right, since it was visually interesting.) Here are the notes I scrabbled onto my iPad to work it through.
I've always been interested in ways of faking 3D. One of the coolest I used in my 2012 Advent Calendar entries frostyspin and treemergent - I first saw the effect on a interactive exhibit at the defunct Boston Computer Museum - if you have enough particles following a simple rule of "if you're left of center accelerate to the right a bit, and vice-versa" a pleasing illusion of rotating depth soon appears. (Interestingly, there's nothing in the display that says "this is going clockwise" or counter-clockwise, and with some mental effort you can get it spinning the other way.)
Anyway, Happy Holidays to all!
For funsies, I wanted to see if I could replicate the effect by (somewhat linear) taking a "view window" that slid across the square bitmap, then stretching it into a circle. The result, "sphereit", made an interesting visual effect but wasn't quite what I had hoped for... (in retrospect, too-cheat-y; the full width of each row gets stretched exactly the same amount, which isn't the case for a sphere.)
Also I made it MUCH harder on myself in solving the "what to do when the 'window' that we're using to map onto the front of the 'sphere' falls off the side" problem. The easiest solution would have been to construct a double-image offscreen graphic and slide the window across the center of that, resetting before reaching the edge. Instead I used two "windows" on a single-width bitmap, which made the math really tough to glue 'em back together at exactly the right proportions for displaying as a single thing. (I put back in a broken version at the lower right, since it was visually interesting.) Here are the notes I scrabbled onto my iPad to work it through.
I've always been interested in ways of faking 3D. One of the coolest I used in my 2012 Advent Calendar entries frostyspin and treemergent - I first saw the effect on a interactive exhibit at the defunct Boston Computer Museum - if you have enough particles following a simple rule of "if you're left of center accelerate to the right a bit, and vice-versa" a pleasing illusion of rotating depth soon appears. (Interestingly, there's nothing in the display that says "this is going clockwise" or counter-clockwise, and with some mental effort you can get it spinning the other way.)
Anyway, Happy Holidays to all!
Thursday, December 20, 2018
reviewing flexbox with flexbox froggy
A coworker mentioned flexboxfroggy.com - it's a fun little review of flexbox's ordering and alignment, but maybe it's a bit limited: like, you don't see the underlying DOM the frogs represent, and really the power of flexbox is dealing gracefully for times when things need to jump to another line, the toy only offers a fixed-size pond. (Good to remember how flex-flow = flex-direction + flex-wrap e.g. "row wrap" or "column-reverse nowrap")
Overall I think I get better results just going to CSS-tricks' guide to flexbox (not coincidentally the first google hit for flexbox) which has a lot of visual examples, usually that guides me to the property I'm looking for.
Grid Garden is similar to Flexbox Froggy but for grids.
It's easy for an old caveman ui guy to scoff a bit as I see CSS in browsers finally catching up to what was trivial to do in the Bad Old Tables For Layout Days. Though obviously it's an old and settled issue, still Eric Meyer put it pretty well in 2009:
I always thought my lack of concern about using tables when expedient reflected by engineer side. A designer might think, this HTML Dom is the pure, canonical representation of information! For developers used to working at layers lower than that front end, though - that's hardly ever the case, there's always a database and so the form of the DOM can be thought of as more transient. On the other hand, in a world ruled by Google scrapers and what not, in some ways the DOM is a bit canonical, in terms of it being the primary representation of your information that the outer world has access to (not to mention accessibility things like screenreaders, but doing a perfect or even completely adequate job there is beyond what most developers will put into it.)
Overall I think I get better results just going to CSS-tricks' guide to flexbox (not coincidentally the first google hit for flexbox) which has a lot of visual examples, usually that guides me to the property I'm looking for.
Grid Garden is similar to Flexbox Froggy but for grids.
It's easy for an old caveman ui guy to scoff a bit as I see CSS in browsers finally catching up to what was trivial to do in the Bad Old Tables For Layout Days. Though obviously it's an old and settled issue, still Eric Meyer put it pretty well in 2009:
All this is why the old “only use tables for layout” argument keeps coming up over and over: strip away the overheated rhetoric and obvious link-baiting, and you find the core of a real need. Because as powerful as CSS can be, table cells do certain things very easily that CSS makes very, very hard. Cells stretch vertically, keeping equal heights as a matter of their intrinsic nature. They stay out of each others’ way, while still being allowed to sit next to each other and use any sizing dimensions. They tie their layout to their parent elements, and vice versa.Flexbox and Grid finally get back to some of that, but neither either completely, and you still gotta think of browser support and what not.
I always thought my lack of concern about using tables when expedient reflected by engineer side. A designer might think, this HTML Dom is the pure, canonical representation of information! For developers used to working at layers lower than that front end, though - that's hardly ever the case, there's always a database and so the form of the DOM can be thought of as more transient. On the other hand, in a world ruled by Google scrapers and what not, in some ways the DOM is a bit canonical, in terms of it being the primary representation of your information that the outer world has access to (not to mention accessibility things like screenreaders, but doing a perfect or even completely adequate job there is beyond what most developers will put into it.)
Saturday, December 15, 2018
i'm ping pong king, an analysis
Daring Fireball uncharacteristically recommended a game for mobile called "I'm Ping Pong King" and it is indeed pretty great - incredibly minimalist in both game play and presentation - yet compelling, and very easy to pay in small but satisfying doses. I've been thinking about what it does right, and how it compares to some previous similar games --
It's Ping Pong stripped to an almost absurdist minimum - if the ball lands on the left side of the table hit left, if it lands on the right side, hit right. (There's a visual telltale, a little "X" that emerges from the where the ball strikes) Despite the seeming triviality of that, game play is still compelling - I haven't quite worked out if it's the "body language" of the opponent and the motion of the ball before it hits the table that sometimes fools me or what, but this game finds a great place on the fine line between too easy and too reflex-demandingly hard.
(Of course in my history, I'm a big fan of games with a Ping Pong / Pong mechanic and a minimalistic control scheme - my own Joust Pong for the Atari 2600 (later renamed FlapPing to avoid Atari lawyers who claim to exclusive naming rights involving "Pong") is similar in that regard, using a single button to let the player maneuver into ball-returning position.)
Swinging back to what makes a popular mobile game - the "single button the flap against gravity" mechanic of JoustPong was later reinvented for the infamously difficult Flappy Bird. There the single button lets the player push the bird up through gaps between (or more often, directly into) big pipes. This game was difficult enough to be considered "masocore" (masochist + hardcore) but was still ragingly popular for a time.
The simplified control scheme suits mobile well. The other thing Flappy Bird and I'm Ping Pong King have in common is a demand for focus - if you are not concentrating, you will lose quickly. IPPK is a bit more forgiving, though, since a match is "first to five points", thus offering a chance for redemption.
I'm Ping Pong King has a meta-match structure that Flappy Bird lacked - you work your way through a series of 50 opponents. In theory each one might be a bit harder, but maybe that only matters in the last ten, and even then the game never gets crushingly difficult. (At least for a guy who has spent too much of his life playing games, but might be getting slower in his middleage) That sense of progression adds a lot to the package, along with great aesthetics of the motion of the ball and the character.
It's Ping Pong stripped to an almost absurdist minimum - if the ball lands on the left side of the table hit left, if it lands on the right side, hit right. (There's a visual telltale, a little "X" that emerges from the where the ball strikes) Despite the seeming triviality of that, game play is still compelling - I haven't quite worked out if it's the "body language" of the opponent and the motion of the ball before it hits the table that sometimes fools me or what, but this game finds a great place on the fine line between too easy and too reflex-demandingly hard.
(Of course in my history, I'm a big fan of games with a Ping Pong / Pong mechanic and a minimalistic control scheme - my own Joust Pong for the Atari 2600 (later renamed FlapPing to avoid Atari lawyers who claim to exclusive naming rights involving "Pong") is similar in that regard, using a single button to let the player maneuver into ball-returning position.)
Swinging back to what makes a popular mobile game - the "single button the flap against gravity" mechanic of JoustPong was later reinvented for the infamously difficult Flappy Bird. There the single button lets the player push the bird up through gaps between (or more often, directly into) big pipes. This game was difficult enough to be considered "masocore" (masochist + hardcore) but was still ragingly popular for a time.
The simplified control scheme suits mobile well. The other thing Flappy Bird and I'm Ping Pong King have in common is a demand for focus - if you are not concentrating, you will lose quickly. IPPK is a bit more forgiving, though, since a match is "first to five points", thus offering a chance for redemption.
I'm Ping Pong King has a meta-match structure that Flappy Bird lacked - you work your way through a series of 50 opponents. In theory each one might be a bit harder, but maybe that only matters in the last ten, and even then the game never gets crushingly difficult. (At least for a guy who has spent too much of his life playing games, but might be getting slower in his middleage) That sense of progression adds a lot to the package, along with great aesthetics of the motion of the ball and the character.
Wednesday, December 12, 2018
yearswerve
Lately I've been working on a personal timelines project, experimenting with visualizing the course of my life so far: where I've lived, jobs I've had, people I've been with romantically, etc.
Time for humans is such an odd beast - it marches inexorably forward, yet loops back on itself in the form of days of weeks and seasons in years. In experimenting with visual representations of it, I thought back to my old hooptime illustration, showing the idiosyncratic way I place a week in physical space (like when making simple day-of-week calculations)
Back then I mentioned and illustrated my even stronger sense of the course of a year - again counter-clockwise, with January at the top, and looping back:
Of course a simple loop doesn't display a forward progression of time, so for grins today I stretched out the loop into something that also expresses the movement into the future:
(It's not entirely dissimilar from repeat until death, my attempt to animate Christa Terry's ingrained visualization of an upward spiral of years.)
You can see the full p5 version here.
I'm still very interested in the topic of how different people visualize time, and speculation on what influenced that (clockfaces, calendar pages, whatever) If anyone has an idiosyncratic time-space mapping I'd be delighted to try and make an illustration of it.
Time for humans is such an odd beast - it marches inexorably forward, yet loops back on itself in the form of days of weeks and seasons in years. In experimenting with visual representations of it, I thought back to my old hooptime illustration, showing the idiosyncratic way I place a week in physical space (like when making simple day-of-week calculations)
Of course a simple loop doesn't display a forward progression of time, so for grins today I stretched out the loop into something that also expresses the movement into the future:
(It's not entirely dissimilar from repeat until death, my attempt to animate Christa Terry's ingrained visualization of an upward spiral of years.)
You can see the full p5 version here.
I'm still very interested in the topic of how different people visualize time, and speculation on what influenced that (clockfaces, calendar pages, whatever) If anyone has an idiosyncratic time-space mapping I'd be delighted to try and make an illustration of it.
Sunday, December 9, 2018
repeatable random colors in javascript
Indiegamer olsn provides a nice function making a repeatable series of "random" numbers:
// the initial seed
Math.seed = 6;
// in order to work 'Math.seed' must NOT be undefined,
// so in any case, you HAVE to provide a Math.seed
Math.seededRandom = function(max, min) {
max = max || 1;
min = min || 0;
Math.seed = (Math.seed * 9301 + 49297) % 233280;
var rnd = Math.seed / 233280;
return min + rnd * (max - min);
}
(Of course to quote John von Neumann: "Anyone who attempts to generate random numbers by deterministic means is, of course, living in a state of sin.")
olsn goes on to say
That bit reminds me John Carmack's Fast inverse square root where a little bit shifting and then subtracting from the magic number 0x5F3759DF gives surprisingly good results for an otherwise very expensive math calculation.
My favorite use of finding a great random seed is in classic video games - both Pitfall! and River Raid on the Atari 2600 use it to generate huge amounts of content (for River Raid, see this page on an amazing 'bot that was taught to play it amazing well and explore The River of No Return) but I thought I might use something similar to generate a series of colors for a project I'm on - I wanted to make a series of colors that kind of harmonized but were still distinct - one trick I learned is to constrain each r g and b value to a medium-size range (or if you alternate between #ff and #cc you get some nice pastels, which is how my loveblender site got its look in the 90s which given the era, wasn't half bad)
For each part of the rgb I generate a number from 100-200:
Math.round(Math.seededRandom(100,200)).toString(16);
and that makes a series like this:
(If the inline version doesn't work you can see it in action here.)
(Note to self, Indiegamer's book From Zero to the App Store looks interesting)
// the initial seed
Math.seed = 6;
// in order to work 'Math.seed' must NOT be undefined,
// so in any case, you HAVE to provide a Math.seed
Math.seededRandom = function(max, min) {
max = max || 1;
min = min || 0;
Math.seed = (Math.seed * 9301 + 49297) % 233280;
var rnd = Math.seed / 233280;
return min + rnd * (max - min);
}
(Of course to quote John von Neumann: "Anyone who attempts to generate random numbers by deterministic means is, of course, living in a state of sin.")
olsn goes on to say
You may ask: Why ‘(seed * 9301 + 49297) % 233280‘ ?!The answer is both simple&complicated: The combination of 9301, 49297 and 233280 provide a very even distributed set of “random” numbers. Please don’t ask WHY – that’s the complicated part, some very smart people figured out those numbers quite some time ago, and I also cannot tell you how they did it. But as allways: Google is your friend ;-)
That bit reminds me John Carmack's Fast inverse square root where a little bit shifting and then subtracting from the magic number 0x5F3759DF gives surprisingly good results for an otherwise very expensive math calculation.
My favorite use of finding a great random seed is in classic video games - both Pitfall! and River Raid on the Atari 2600 use it to generate huge amounts of content (for River Raid, see this page on an amazing 'bot that was taught to play it amazing well and explore The River of No Return) but I thought I might use something similar to generate a series of colors for a project I'm on - I wanted to make a series of colors that kind of harmonized but were still distinct - one trick I learned is to constrain each r g and b value to a medium-size range (or if you alternate between #ff and #cc you get some nice pastels, which is how my loveblender site got its look in the 90s which given the era, wasn't half bad)
For each part of the rgb I generate a number from 100-200:
Math.round(Math.seededRandom(100,200)).toString(16);
and that makes a series like this:
(If the inline version doesn't work you can see it in action here.)
(Note to self, Indiegamer's book From Zero to the App Store looks interesting)
Tuesday, December 4, 2018
shape detection
Daring Fireball on The Iconfactory's Linea app update - you can scroll down to the ZipShades video there - as DF quotes:
Simply draw a rough circle, square, rectangle, oval, or polygon and hold at the end. After a configurable delay, ZipShape will activate and transform your rough version into a clean, precise shape. It works with all of Linea’s drawing tools — including the new fill tool.Gruber calls that "a real standout". Which is fair enough - not many programs support that kind of interaction. But it's not a new idea -
You don’t have to be perfect — after the shape is generated, there are transform handles you can use to tweak its final position and appearance. No rulers or stencils required!
that video shows a mid-90s Newton running with the concept.
But you know, it's a lot older than that - here's Ivan Sutherland and Alan Kay showing the way:
That's Sketchpad (a.k.a. Robot Draftsman) all the way back from 1963!
While Steve Jobs was right that HAVING to use a stylus on a phone-sized device was terrible, it's probably not great that it took 5 years into the life of the iPad to introduce a precision stylus, the Apple Pencil.
I'm sure CAD-software has been doing this all along, so I'm not being snarky about this being touted as revolutionary, because it's not, just conceptually cool.
Subscribe to:
Posts (Atom)