Welcome back to episode two of the new Design Festival podcast. This week we’re audio-only, as Alex Walker — the man behind the cicada-inspired pseudo-random organic tiling article, The Cicada Principle and Why It Matters to Web Designers — and Scott Moorhead and Gary Jay, two submitters of tiling backgrounds to the Cicada Project, and I have a chat.
Oh, and a quick note: I misspoke in the podcast — there’s an iPad2, not and iPod to win in the Cicada Project. (So get those submissions in; contest closes May 25th.)
Download this Episode
You can download this episode as a standalone MP3 file. Here’s the link:
- Design Festival Podcast #2 – The Cicada Project (MP3, 49:21, 67.9 MB)
Subscribe to the Podcast
The DesignFestival Podcast is now up on iTunes. Add the DesignFestival Podcast to iTunes. Or, if you don’t use iTunes, you can subscribe to the feed directly.
- Simon Pascal Klein (@klepas)
- Alex M. Walker (@alexmwalker)
- Guests: Gary Jay (@nomnomlabs) and Scott Moorhead (@fischerwest)
- The Cicada Principle
- The Cicada Project/Competition
- Recommendations of the week
- Gary: Music problem solving: Sword & Sworcery)
- Scott: SpoonFlower.com & leave the screen; paint or draw something!
- Alex: An outliner for writers with Google Docs support: The Outliner Of Giants
Shout-out to Germán Martinez and Frank Fuchs who have also both submitted awesome entries, but couldn’t join us.
Pascal: Good morning, my name is Simon Pascal Klein. You might also know me just as Pascal. I’m one of the co-writers at the DesignFestival.com writing micro-site gig. I’m also the co-host of the DesignFestival.com podcast. We are starting today straight into episode two. And with us, we have three awesome guests. First off, Alex Walker from SitePoint.com, the man behind the Cicada Principle. And we also have Gary Jay and Scott. I believe, Scott your last name isn’t showing up in Skype, so I can’t give you a full introduction. Hey, Scott!
Scott: Good morning. That’s okay, you can refer to me under my crazy pseudonym of Fischer West.
Pascal: So, would you prefer Scott or…?
Scott: Either way. Scott’s fine.
Pascal: Can we divulge your full name or would you prefer us not to.
Scott: Yeah, that’s fine. My name is Scott Moorhead.
Pascal: Awesome! And can we get you to give us a quick intro who are you and where can we find you online?
Scott: You can find me online at Fischer.com.au. Who am I? I’m a web designer and ex-web developer. I don’t do a lot of development these days. But I’ve been mocking around on the web as a bit of a graphic artist since about 1994, so a while now.
Pascal: Far out! Since the time…
Scott: Since that time of all sorts of commercial and non-commercial exploits on the web.
Alex: And good morning. Alex here. That is Fischer with F-I-S-C-H-E-R if anyone’s looking for that.
Scott: That’s it. Thank you.
Pascal: Alex, could you say hello and give us a quick intro.
Alex: Good morning! I’ve been working for SitePoint for ten years now as a designer and I’ve always done a lot of writing for the site. And yeah, I’ve been working for Design Festival writing some of the content there and doing all the book design too. The covers for the SitePoint technical books, they tend to be my baby, too. So, a little bit of everything.
Pascal: So, if you guys have a SitePoint book in your shelf, that cover is made my Alex.
Gary: I’ve got a few of those on my bookshelf right now. I’ve always liked them.
Pascal: That’s another voice. I’ll bring in Gary. Hey Gary, good morning!
Gary: Hey! Hey, gang! I’m Gary J. And a bit of background, similar to Scott. I started out in traditional graphic design, print industry and then, moved on to more web-based stuff. I started out in 2004, so I’m ten years behind Scott. Same really as he does. I’m working with creating websites and user interface and just making the online world a better place.
Alex: And we can say it’s Gary’s birthday today.
Pascal: Happy birthday!
Gary: Thank you, thank you!
Pascal: So today, we’re going to be looking at the Cicada Principle, which Alex has written about extensively. And we’re also going to introduce the competition we have running for which there is an iPad 2 to possibly win. Can I get Alex to first off (before we get into competition stuff), as you might’ve guessed, talk about some submissions that Gary and Scott have passed in. Could I get Alex to run us through the Cicada Principle if you have been living under a rock in one form or another.
Alex: Well, if you have been living under a rock, I have to warn you that there is some science content – a National Geographic alert coming up – so if you’re a designer who has avoided sciences for most of your life, then beware the next few minutes.
A lot of Cicadas, but the ones that we’re particularly interested in, periodical cicadas. These are little bugs that from the time they’re born, tunnel underground and pretty much stay there. It’s a pretty good way to live for a cicada. It’s very safe from where they are from predators. And there’s plenty to eat. They just chew on tree roots. But the real problem with this kind of existence is it’s a really hard way to meet girls.
So, after years underground, these guys eventually all simultaneously – they’ve very organized little nerds in terms of bugs – they all come to the surface at the exactly the same time within hours of each other after years and basically sprout wings and fly off to find the love of their lives, which sounds really great and really romantic except that they kind of die pretty soon after that.
But apart from that being kind of interesting and romantic, the really interesting thing is that the life cycles that they live in are very specific. They’re always exactly seven (depending on the species), thirteen years or seventeen years. And as it happens, these are all prime numbers. And for years, scientists were trying to figure out why these numbers. They’re prime numbers, but why does that help? Is it just random or does it give the cicadas some kind of advantage?
They eventually figured out that most of the things that eat cicadas (i.e. birds, frogs, snakes, wasps, whatever – fish even) tend to live in smaller tighter cycles of boom-and-bust of two and three, four, five, six, years. And they figured out that if the cicadas was in, let’s say, a 12-year cycle, then any of these creatures that had the shorter cycles would eventually fall into a natural sort of repeating cycle that line itself with when the cicada emerge from the ground. And that’s not good if you also may got a boom of wasps and snakes in the time that you’re coming out of the ground for the first time in seventeen years (or in twelve years in that case).
But with these numbers being prime numbers, particularly say seventeen, if you happen to get a bad year for say 4-year swallows or 3-year wasps, it’ll be 50 or 60 or 70 years before it happens again. So, it kind of struck me at the time that that was really clever, that these bugs had figured this out (well, they haven’t figured it, but the Universe had pointed them in that direction).
And at the time, I kind of thought, “Well, there’s something to that, but I don’t know what.” And it sort of struck me a little while later that the tiling backgrounds are one of those same things that we tend to have a problem with.
Patterns, that’s one of the areas of web design; you don’t want to pattern. You tend to have things like, let’s say a tree or woodgrain pattern. If you make the graphic too small, you get like a nut in a tree pattern repeating again and again. And it really breaks that organic look.
So, I kind of ended up applying that idea of just using prime numbers to the size of the graphics. And we get a situation where the resonance breaks down and it creates something that kind of looks like an organic pattern. So, that’s the core of the idea.
Gary: I find it really interesting that you read that article about how cicadas use prime numbers to meet girls and as you put it. And you thought about repeating backgrounds, rather than ‘how can prime numbers help me meet girls?’
Pascal: Hey, this could be a way. This is really cool.
Gary: That’s just a method for organizing your calendar or your contact list.
Alex: Well, maybe ask a girl out every 7th day and then, every 17th day or something.
Pascal: Guys or girls, I’m happy I don’t have to live by the 7-year or heaven forbid, the 17-year cycle. Dear God!
Alex: Maybe it can work on hours. Maybe that’s more effective.
Pascal: So, this article has gained a lot of traction. In fact, it’s been by far the most popular article on DesignFestival.com. I’m not sure if we can – are we allowed to make known numbers, Alex?
Alex: I’m not sure of the page views. I don’t tend to look at Analytics, but I just know that it’s up to I think 260 comments and getting up towards 3,000 tweets. So, I’ve written online for a long time and there’s never been anything that kind of struck a nerve in the same way that this article did. So yeah, it’s been kind of a mind-boggling experience.
Gary: I think you hit both sides of the brain with it. I think that certainly helped.
Alex: Yeah, it was amazing that there were things like HackerNews and Slashdot that gleaned on to the math angle. And we had sort of math geeks coming in from all over the place going, “Oh, look! No, it’s actually co-primes and the problem with this is that…” I don’t know much about math. I just kind of took a little idea. And certainly a lot of designers, like Cameron Adams and some of the high-end guys got onto it really early and re-tweeted it. They were showing it to a few other guys like that. So, it really ended up like a tsunami by the end of the second day. It was fun to write, too!
Pascal: I’ve been enjoying the math nerd discussions on the post; kind of going through these three, four, five paragraph-long single post comments. They’re starting to lean on – well, post year twelve maths. And that’s something I have not studied. So, I sit there and I scratch my head and go, “That’s interesting, but I can’t quite follow.”
Alex: Yeah, absolutely!
Pascal: So, has anyone got any questions to ask. There’s been a couple of interesting posts on the forum. And I find it very interesting that actually most of the more difficult questions have actually been answered by other commenters. Has anything hit you in the commenting thread, Alex that has really struck out to you that you’ve gone, “Oh, wow! I haven’t thought of that” or, “That’s a great interesting idea.”
Alex: What’s interesting is that people have brought in angles from outside of even math and web design. Someone was pointing out that Bryan Eno did an album in the ‘80s. Bryan Eno was U2’s producer. He’s done lots of things. He’s a classic sort of music geek. He layered and did a whole album of soundtrack music where he layered prime numbers and came out with an amazing, really moody, almost stormy affect with that.
Someone else pointed out that church bells are often assembled with – the rotations that they use are set to prime numbers. So, you get that building, cascading sound of church bells. So, people have come in from lots of different angles and drawn connections. That’s been one of the things that’s been really interesting from my point of view.
And another guy – I don’t know if anyone saw a guy called Frank Fuchs. I don’t think he tweeted about it. I’m just trying to find a link here, that’s why I’m slightly stumbling, BrainSeller.de If you actually just go to BrainSellers, he’s at BrainSellers and he’s tweeted a link there.
He’s done an amazing job of actually taking the principle and using it with CSS3. Instead of actually laying images, he’s used CSS3 selectors to take a gallery set up of thumbnails. And every second and then, every third and then, every seventh and then every eleventh thumbnail, he’s turning by a random amount of degrees. So, he’s getting a really loose, almost shuffled effect to thumbnails just by layering these rules and prime number gaps.
So yeah, it’s just something that when I saw that, I went, “Oh, my God! Why didn’t I think of that before?” I really recommend having a look at that idea and the way that that can be re-interpreted and used with different CSS3 elements seems to be such a huge opportunity.
Pascal: What was the URL or the URI for that again?
Alex: If you go to http://test.BrainSellers.de/flickr
Pascal: I think we’re all making our way to that right now.
Alex: Yeah, that’s the one.
Pascal: Yeah. Oh, far out! That’s awesome.
Alex: Yeah, it’s a brilliant idea. It’s like any great idea, when you look at it looking back at it, it looks really obvious. Yeah, that’s the breakthrough; it meant someone actually makes that connection between two different piece of information.
Gary: Yeah, it’s cool!
Pascal: That is very cool!
Alex: We’re actually trying to get Frank on, but his English. He was saying that he was a little bit concerned about his English, but it’s such a great idea. It’s a shame we couldn’t get anyone.
Pascal: Well, if he’s German, I would’ve happily translate it back and forth if need be. Cool! I’ll make sure that’s in the show notes, as well.
Let’s talk a bit about the competition, Alex. So, following the overwhelming response we’ve had to the article, we decided to open it up and see what the community, what other people can put in, what bright minds there are in the community and what kind of awesome things they could come up with. So Alex, can I pass over to you for the competition?
Alex: Yes. One of the problems with explaining the idea is you really need to see the pieces of the puzzle as separated kind of elements to be able to really get your hand around at what’s happening. So, with some help from Daniel here, we decided just to put together a little application that at first, just for the examples that I’ve come up with – some of the ones I did are actually in the article and the few others that I had that didn’t make the article, but I thought was still worth putting online. People were asking about them. So, we made a little application that allowed you to just hover over each part of the thumbnail. And it will show you that in isolation. And then, when you hovered off, it will show you the entire thing.
And we had a pretty good idea that there would be plenty of people like Gary and Scott out there that would look at this idea and be able to come up with their own interpretation that was far outside the realms of what we would consider. So, we put it out there, allowed other people to upload. And we’ve added the extra benefit of putting an iPad 2 up for the person that gets the most re-tweets basically. So, both Gary and Scott are out there in the re-tweet count at the moment. And yeah, there’s probably at the moment about 30 (maybe even more than 30) entries so far. So, even just as a learning tool for people that maybe read the article and are having a little bit of trouble getting their head around the concept, it’s so much easier when you can just look at the components and see the way that they interact.
The contest is running until May 25th, so there’s still a little bit of time if you’re hearing the podcast and you’ve got an idea on your head. I recommend that you break out Photoshop or Fireworks (whatever your graphics program of choice is), start making some graphics and get them uploaded.
Pascal: I really feel like I should give kudos to the guys at SitePoint who ended up writing up that little web app to manage that because I got put up I think in something like that two or three days. It was put up extraordinarily fast.
Alex: Yeah, Daniel Laidler is one of our programmers here. And I know that he did a lot of work on the weekend. And he got a lot of kudos in terms of being on the front-end. So yeah, he was amazing and he’s still working on bits and pieces for it. So, it was a certainly on-the-fly and it’s certainly doing the job so far.
Pascal: I also should give a quick shout out – we always love feedback both for the podcast and for the website in general. And we received a bit of feedback that there is an SQL-injection attack possible, which has either been fixed or about to be fixed before this podcast goes out. So, that should also be looked after. Thank you. I have to look through piles of email to find the name of the person, but I’ll make sure that’s in the show notes to pass a thanks to you for giving us heads up on that.
Alex: Excellent! Yeah, I’ll make sure that Dan is across that.
Pascal: So, Gary and Scott, can I bring the two of you in to chat to us about your submissions, the inspiration behind them, how you figured it out, any hurdles you had to go over and just basically give us a close run through, like how you came up with what’s now visible to the web on the website?
Gary: Sure. Yeah! Scott, you mind if I go?
Scott: No. Go if you like, Gary.
Gary: Well, Scott actually pointed me in the direction on this and had to explain it to me probably about twice. And I’ve wrapped my head around it now, but I don’t think I’ve mastered it entirely. But after reading the article about the lifecycle of the cicadas, it got me thinking about the lifecycle of design, communication and where we’ve come from 50 years until now, which landed me on wanting to create a retro-style classified ads. So basically, that’s where my head is at with that one.
Alex: Oh, nice! So, if anyone hasn’t seen the design, it’s got a real sort of ‘50s or ‘40s newspaper shuffled design. You’ve got lots old advertising and little article snippets that came shuffling and reconfiguring itself across the screen.
Gary: If I had more time to work on it, I’d like to perfect it (being the perfectionist that I am). But I think the idea is there and the concept is there. And I think it serves pretty well.
Alex: As being the guy that actually gets the emails each day that alert me that there’s a new entry, it’s quite exciting to go in there each day and go, “Oh, great! Have a look at this! What have we got?” And that was the one that I went, “Oh, wow!” Yeah, people sort of huddled around the monitor for a minute. Yeah, it’s been a buzz.
Gary: Cool! Thanks!
Scott: Yeah, the funny thing is I saw that one and I thought, “Oh, that’s great.” And I’ll have to point that out to Gary.
Pascal: Scott, can I bring you in now?
Scott: Yeah, of course. Well, I’d like to ask Alex a question first.
Pascal: Go for it!
Scott: Alex, you were saying that when you were formulating the idea, you thought about knots in trees and then, the red curtain example. Was there any other sorts of examples in the back of your mind that you thought you’d apply this to that you haven’t seen yet in the gallery?
Alex: I actually came across the idea trying to get a paper effect. I had a WordPress design that I’m still working on now that kind of got pushed aside for the time being. I was just trying to get like a baking paper effect where you’ve got some texture. And I kept seeing the texture repeating in a way that I didn’t really like. So, for some reason, the cicada stuff came back to me and I end up coming up with a really nice – but it’s very subtle little nicks and cuts in the paper. But I’m working on one at the moment that I’ll probably throw in in the next few days that has a Google Maps sort of reshuffled kind of satellite-view down.
Pascal: Ah! That’s awesome!
Alex: Yeah. Yeah, it just keeps streets and cars and then, people wandering. They’re all on different layers. And there’s different building tops.
Gary: It’s funny you’ve mentioned. Scott was talking to me about the same idea.
Pascal: That’s epically cool.
Alex: Yeah, the one that I’m doing is kind of like a desert town.
Scott: Right! I was going to say your eight-layer limit got to me on that one.
Alex: Yeah, yeah. It is tempting to keep adding layers. Sometimes, I just like to limit myself to three and just really work them hard and make them weave. Just sitting there with a piece of paper sometimes, I know with some of the maze examples I’ve set up. And I know that one of yours, the liquid metal design where definitely there’s roads coming in and there’s roads coming out on each square and you can see, “Okay, there’s any amount of ways you can choose to go between those two points.” Yeah, it’s some really clever spatial maps going on there that you can apply to things like Google Maps design. That’s where I’m going with it at the moment, but I haven’t quite worked it out yet.
Scott: Yeah, well that was the first one I uploaded, that liquid metal. And then, I guess in your examples, you had a couple of overarching styles. One of them was that very formulaic green pattern.
Alex: Yeah, the Lego guy.
Scott: Yeah! And Gary’s is a bit like that, as well although he’s got different sized elements in there, as well which help make it up. And then, there was that much more organic, fluid with the curtains and we saw some other examples in the gallery with trees and stuff. And I think getting that balance right is what’s really tricky. I’ve worked out twelve different examples. And some of them, they just don’t work. It’s very hard to get that balance of putting enough interest in there that it’s worth looking at, it’s worth paying attention to, but that there’s nothing individual that really stands out like a sore thumb.
Alex: Yeah, the lizard example is great in that you’ve got that base. The unit of measurement there is a single lizard. And then, you’ve got colors that are interacting and colors, when you’re mixing reds with yellows and overlapping them with greens and that kind of thing, I find that’s one of the ways of really pushing in a lot of variation without adding that much file size. So, that’s the way I was really quite pleased to see, the way that you’ve done that.
Scott: Yeah, that’s my latest entry. And yeah, I think even in my head, the ideas are evolving both in terms of the sorts of complexity I can fit in there, but then as you say also, trying to keep the file size down and trying to get variety using small number of elements.
Alex: Was the base on that Escher or…?
Scott: Yeah. Yes, it’s an Escher lizard pattern with the other colors and patterns laid on top of that. But of course, the Escher pattern is hexagonal as a tile originally. So, you’ve got to then find a rectangular bit to make them repeat well.
Alex: Were you able to do that or did you find something online that already have done that for you?
Scott: No, you can spot it on the pattern.
Pascal: Yeah, I think the color and the vibrancy of that submission absolutely hit me. I think it’s gorgeous. And I’m sitting here and I’m just flicking through the different iterations like seeing one tile at a time and just seeing how you did it. It looked [censored] phenomenal!
Scott: Oh, thank you very much.
Pascal: And there I go! I’ll have to go and edit that one.
Scott: Well, interestingly enough, one of my very first exploits on the web on my own personal site had an Escher background with a fish in it. But we’re talking about slow dial-ups speeds at the time. So, it was a small repeating tile of fish. And like a lot of web backgrounds in 1994 and ’95, it was horribly garish. There was not a lot of practical use for it.
the interesting thing I find about this pattern or this method is that you can create something that stands alone and is still interesting. It’s a background, but it doesn’t have to be a boring background. It doesn’t have to get out of the way. It can create its own interest.
Alex: I actually have been astonished of how many of these designs looked really natural and good on the site, running behind the Design Festival, which is partly a credit to Elliot who designed a pretty low-key set of front on the Design Festival site. So, to layer it up with some other colors and shapes isn’t too difficult. But I’d be happy to run with maybe ten or fifteen of the designs that we’ve done so far. There’s one today that just came in with a Simpsons-like cloud effect. And it looks great!
Scott: Yeah, I love that. And it’s like three layers, too. It’s great!
Pascal: The designs that really get me are the ones that used the minimum number of images, looked the most organic and still have the smallest file size because to me, that’s one of the things that I really look for. I mean, I like the newspaper design. That is amazing! You’ve gotten all those shapes working. And that you’re working with different-sized shapes, that’s very, very impressive. But I look at the file size and I go, “Oh, ouch!” That’s going to…
Gary: Yeah, yeah.
Alex: It’s definitely a playground where we would probably do things that we wouldn’t necessarily do on an actual design, but that’s where you discover these things, these kind of ideas when you actually push things far too far and then, you take some principles back out of that to apply some more real-world designs I think.
Pascal: And in most cases, it’ll still be lower than if you try to blow-up a giant, pre-rendered, huge 2000 by something or other-sized background.
Pascal: So, it’s still by far a much more efficient method.
Gary: I’d actually like to explore some of the other opportunities that the method presents. And one of them I’d really like to have a hand at is purposefully hiding certain element that only occur that seven elements collide. It might only occur every couple of thousands pixels in one way or the other. I think there’s a lot of potential to sneak little things in.
Alex: Absolutely, yeah! I’ve got similar ideas. Sometimes, it feels like you’re seeing The Matrix. You’re trying to see into these intermeshing layer patterns that you’ve got in front of you. And you know there’s something there and you can’t quite get your head around it at the time. Yeah, I’m going through a similar thing at the moment.
Pascal: Gary and Scott, can I ask you, do you guys intend to submit any further submissions?
Gary: I haven’t had the time. I know Scott’s streaming ahead of me. He’s got four now.
Alex: And it sounds like there’s a few in the garage, too.
Scott: Yeah, there’s a whole bunch of them sitting there.
Alex: Sometimes, you’ve just got to go with your gold.
Scott: Yeah, I’m sure there’ll be at least another one from me. Yeah, probably a few more. I’d like to try another really organic one. I think my lizard submission and the other one, the liquid metal one, they’re very much block-based.
Alex: Yeah, very geometric.
Scott: The fish one is a little more random, a little more organic. And I’d like to have something that even pushes that a little bit more and maybe even then play with some other elements like depth of field where that sort of seems to shift along with the placement of images.
Alex: Yeah, the coy one, I’d be happy to run with on the site all the time. In fact, we’re kind of thinking about just maybe every month just turning some of these over and using them as a background. That would be my kick at the moment.
Scott: No, don’t use that one. No, don’t use that one. No, I don’t think so. Let me improve it.
Gary: Oh, Scott! It’s good! It’s good! Let him use it!
Scott: But that’s another one where I look at it and go, “Oh, gee. If only I had done this. I move that bit a little, rotated it a bit.”
Pascal: Alex, can I ask you, there was one submission at was parchment paper. Was that similar to the baking paper sort of effect that you were going for?
Alex: Yeah, definitely. I looked at the one that’s there at the moment and I’d probably re-engineer it a little bit, but yeah it is a similar kind of thing. Most people tend to have looked at it as more of a geometric kind of challenge. And I would like to see some more entries that are really trying to get that wood grain or even like a jungle effect, leaves, really organic sort of stuff. So far, not many people have really taken that tack so far. So, it’d be nice to see some entries along those lines in the coming weeks.
Pascal: I don’t believe we have a wood grain yet. We have a bark, sort of splinter effect. That was done by you actually.
Alex: Yeah. That was mine. That was my earliest kind of approach to that one for that idea. It was one that I worked out for the article. I didn’t’ like it enough. But then, there was some talk on HackerNews. People were talking about whether it would be possible to do it with wood grain. And I thought, “Well, I might as well throw it out there.” And so, I think I’ve got a much better idea of how to tackle that now, but let’s see if we can get that on in there before the end of the contest. Not that I can win it obviously, but it’s good to get your ideas out there.
Scott: Yeah, I think wood grain is another one of those…
Alex: Not that I wouldn’t like an iPad.
Scott: Yeah, of course. Wood grain is one of those ones where I think I’d be tempted to throw in a great big knot or a bit twist on the grain here and there, but again I know that those bits stand out like a sore thumb.
Alex: The thing is though, you’re tempted to put it on the top layer. And in the end, you figure out that it works best on the smallest, lowest layer and you just keep overwriting it by the other upper layers. And you only tend to get one in ten of them shows through. So, it’s a little bit counterintuitive. I remember my first attempts at it. I was always putting that distinctive thing on the upper layer and still getting the same problem that you’ve always got with backgrounds. Yeah, you learn that over time when you’re working on the idea.
Pascal: Scott, can I ask you (I’m just at your website), there’s a whole bunch of tiles moving around. We’ll make sure that the links is in the show notes. Can you give us a quick description of what’s going on.
Scott: I’ve been mucking around with tiles for a long time as I was saying before (since the mid-‘90s I’m online). And this sort of geometric pattern with interlocking tiles that can be arranged in any order is something that I’ve played with in paint and now, in rock as well as online. And what’s going on in my website is just one incarnation of that. It’s a whole bunch of tile that connects no matter which way they’re rotated. And what’s happening on my home page is that they’re pseudo-randomly rotating based on different time intervals. Some of those time intervals are prime numbers as it happens. And so, what you get is a sort of experiment in time of the Cicada Principle.
Pascal: I’m sitting here and I can just watch it for minutes on end and finding – what I like…
Alex: I think if we watch it much more longer, I think the podcast would go completely quiet.
Scott: The funny thing is I’ve been mucking around with patterns like this for a long time. And I can watch this thing now and every now and again, I got, “Ooh, I’ve got to stop it there,” but you can’t. It just keeps going. It’s endless.
Pascal: There’s no stop or no pause button?
Scott: No stop; no pause. I do have – well, I’m not sure if there’s one there at the moment – an interactive version. So, you can go in as a user and you can flip the tiles yourself. But the way this one works is the tiles are set to flip within certain patterns so that the patterns are always symmetrical. I’ve developed games based on this idea, as well.
We have a Pocket PC game out when those things were around before iPhone. And I’d love to get into an iPhone or an iPad game. We’ll see what happens there.
Pascal: Do you have a name for it like you would give it or you’d call it for the iPhone.
Scott: Well, we had a name in the Pocket PC days. It was called InCircle. And the aim was that within these tiles, you’d make connecting shapes and those tiles would disappear and you’d get new ones. So, it combines Tetris plus strategy with an artistic bent.
Pascal: May I ask, do you perchance have a mathematics background?
Scott: No, I don’t at all.
Gary: He’s very smart though. He’s smart. He’s like the crazy scientist who has stuff going on in his garage that nobody knows about.
Scott: I have a mathematical interest, but it’s on a base of pure early-highschool math.
Pascal: I remember loosely covering a whole bunch of related math skills through secondary and basically, up to year-12 here. But a lot of these, especially when it gets into the more hardcore prime numbers sort of computations, I just sit there and go, “I need to pull out my textbooks” or possibly even go to the ANU and pick out, go to the technical engineering section and have to file through those textbooks to fully understand what’s going on.
But I don’t want to dissuade people from having a look at this. As a designer, I haven’t put a submission. And to be honest, just purely out of time constraints, I probably won’t be able to do. But I followed it and I’ve tried to test it myself (like written a small web page) and it’s fascinating. And it’s a lot of fun to play with. So, I don’t want to dissuade people from giving it a go yourself if you don’t necessarily have a math background.
Alex: Yeah, I think the thing with the prime numbers, a lot of that stuff can be quite dry if you’re not a math geek. But being able to apply it firstly to see it in action with little insects, I think people can identify with things when they can see it in nature and see it in the real-world rather than just the theoretical zone of mathematics. And I think that’s one of the reasons that this did kind of touch a little bit of a nerve with people and then, to be able to actually bring it to your desktop and start playing around with the idea inside Photoshop.
Numerous people that we’re talking about are cutting out pieces of paper and reassembling them. When you can actually touch what you’re playing with, I think it gives this mathematical stuff and the science some heart and soul I guess.
Scott: On the math geek thing, I think the prime numbers, if they’re asking anybody away, you don’t really have to use prime numbers in terms of monitor resolutions these days. They’ll help you get something that is effectively limitless. But as long as you start with some different numbers and the dimensions of your files, you can get some variability. So, if you don’t know what a prime is, don’t fret too much.
Alex: Yeah, I think in some ways when some of the guys that were talking about co-primes and other number sets, in the end, I stuck with the idea that it’s actually simpler just to keep it as primes because it gives you a reason for choosing particular dimensions or particular sizes of graphics. And if you start to say, “Yeah, you can use primes, but don’t use them sometimes,” that kind of thing, it ends up becoming almost more complicated. So, I kind of tried to keep it to not explain that stuff as clearly and just keep to the primes.
But yeah, you’re absolutely right. Any variable sets of numbers will probably give you a really good result.
Scott: In what somebody will notice on a typical monitor resolution, it probably will.
Scott: But experiment with it. I’ll say I’ve got a whole stack of examples and some of them well and some of them really don’t.
Pascal: So, I think we’ve covered the Cicada Principle well and truly. We’d like to point everyone to check out the article. And if you still have time, there’s about three weeks to go I believe. Looking at the calendar, you said 25th of May, was it Alex?
Alex: That’s right.
Pascal: Cool! So, we’d encourage everyone to submit anything that they’ve come up with.
Alex: Or just enjoy having a look. There are some really cool stuff in there. And yeah, even if you don’t do web design, I think most people will get a little bit of a kick out of some of the work that’s in there at the moment.
Pascal: I’d like to ask Scott and Gary, did you guys have any recommendations of little apps or things that you’ve used in the past few weeks that you would love to pass on to share?
Gary: As in just any kind of phone apps or games or anything?
Pascal: Phone apps, games, anything that’s really struck your fancy recently.
Gary: I have one. Let me get the name of it. It’s a game that I’ve downloaded the other day. I still haven’t figured it out what it’s all about, but it’s called Super Brother’s Sword & Sworcery. And let me clarify before you even post it.
Pascal: It sounds like an RPG.
Gary: It’s not. It’s this completely trippy kind of almost Roger Wilco meets Richard from Space Quest V meets King’s Quest. But it’s done this weird, kind of almost pixilated star that when you zoom out, everything comes into focus. And when you zoom back in, it’s all pixilated. But still, it’s really good. And it’s more aimed towards the EPs, so the actual sidetrack of the app. But it’s got some very beautiful visuals, as well.
SwordandSworcery.com. You can go just head over there and just have a read through what it’s all about. It’s a bit trippy, but I think it’s very interesting with the way that they’ve put it together. It’s only for I think iOS. So, the Apple operating system for now, I’m not sure if they plan to expand that at all.
Pascal: iPad only, and iPhone and iPod Touch available as of April.
Gary: Yeah. I’ve actually got it and I’ve started playing around with it. As I say, I’m still not entirely sure what it’s all about, but it’s intriguing and it’s just got some really stunning visuals.
Pascal: Awesome! Any recommendations for the week?
Scott: If you’re into patterns and creating repeating tiles, I recommend you go and check out SpoonFlower.com who’ll turn your designs into fabric. You can whip yourself up a new duvet cover or pillow. I’m going to have to go and talk to those guys about the Cicada Principles.
Alex: As long as it doesn’t keep flipping. You’re not going to do any color that keeps flipping. You’re not going to do much sleeping there.
Scott: They let you do regular steps, brick steps, half steps and all sorts of other things that are known to people in the fabric printing world, but I don’t think they’ve got any pseudo-random tile layouts yet, so I might have to talk to them about that.
Scott: I think somebody in the forum talked about trying to use the method in home flooring and other applications like that to create artificial flooring that looks more real.
Alex: And knitting, too.
Scott: Yeah, knitting. That would be an interesting one, although really manual.
Alex: Yeah, you don’t get the benefit of tiling very easily.
Scott: I guess the things that have stopped them in a lot of printing stuff in the past would’ve been inks overlaying over the top of one another. It’d be hard to block elements out. But now that so much is being digitally printed, the option should be there.
Pascal: That’s an interesting thought actually, yeah.
Scott: Yes, SpoonFlower and other than, I recommend you go out and you paint something or draw something – there you go! Something away from the screen time.
Alex: Put the screen down.
Scott: It’s hard, I know.
Pascal: Solid advice, I like it. Alex, something from you this week?
Alex: This isn’t particularly designing, but most of us, we tend to have times that we need to write whether it’s a proposal, a blog post or whatever. Any time you need to order your ideas, I’ve been using a little application called the Outliner of Giants (which is a slightly whacky-sounding name). It’s the theOutlinerofGiants.appspot.com. Basically, this lets you start out with some bullet points to fill your ideas in. And it allows you to drag and drop these bullet points up and down and expand them. And it has text style editing built into it, so you can do h1 stuff and color it and make lists.
Just for getting stuff in the right order. And quite often when I’m writing, I have an idea for maybe an ending and when I get to that point, I’ve forgotten what I was going to say. And it’s just a really good way of getting the bones of a piece of writing, whether it’s a proposal or whatever, down on screen. And then, you can actually export it directly to Google Docs, which is where I do most of my writing anyways.
So, if you’re doing a bit of writing, I recommend that you have a look at that.
Pascal: What was the URI?
Alex: TheOutlinerOfGiants.appspot.com. And you don’t need to create an account, you just use your Google log-in to start it up. And it’s been great. It’s one of those things that I thought, “Ah, it sounds a little bit wonky” when I started using it, but I started coming back week after week. And it’s the way that I write now. So yeah, definitely look at that if you’re a writer.
Pascal: How does that compare to things like WriteRoom and sort of the no-hassle, no-interruption text editors?
Alex: I wouldn’t do all my writing in this thing. Usually, the problem that I have is that (probably a lot of people are similar), you start with introduction and you start writing and you’ve got usually the center part of the article sort of in your head and you’d get stuck on the start. So, this just really allows you to keep things down to just headings and then, maybe expand the headings a little bit and then, expand the bullet points. And I just find that I’m pulling stuff together much more quickly because I get the skeleton of the article right and then, when it arrives in Google Docs, it just needs some filling out. But I’m not sure, I haven’t use— WriteRoom, you said?
Pascal: Yeah, WriteRoom.
Alex: How does that work?
Pascal: It’s a dead simple text editor. The entire idea behind it is you full-screen it. And I think the default styling is something similar to Matrix-style text (but you can change it to whatever color you want) and it’s just white or green text on a black background; plain-text, monospace, by default. And the entire idea is you don’t have anything else. Nothing else is visible. No doc. There’s no file menu bars. No nothing. You basically just have a black screen and text and you just type away. There’s no formatting, no nothing. You just purely write text.
Alex: Okay. I tend to not have a problem with distraction so much. It just tends to be more of a problem with ordering and forgetting. And sometimes, I’ve almost finished an article and then, I think, “Oh, my God! I was supposed to talk about that awesome thing and I completely forgot about it until now.” And this tends to let me get those things all on the page really early on. So, I think different people have different problems with getting stuff done. And I suppose this is something that solves my problem better than most things.
Pascal: So, it’s more structural. It supports putting out a good structure at the start.
Alex: Absolutely, yeah.
Pascal: Interesting; I’m going to check it out. Cool!
Alex: Exactly, yeah.
Pascal: Thank you, guys so much. We are yet again at another close. This has been episode two. Before we do go, I’d like to get everyone in briefly and just to give us a quick shot where we can find you online, your Twitter profiles, website and if need be, where we can give you a shout and contact you. I’ll start with Gary.
Gary: Sure, you can find me at NomNomLabs.com Just look for me on Twitter and then, you can kind of just follow me there and you’ll find me everywhere else.
Scott: And for me, Fischer.com.au. And from there, you’ll be able to find me.
Pascal: I just realized it’s quite a German last name.
Scott: Yes, it would be.
Pascal: And Alex, yourself?
Alex: I’m Alex M (for Murray) Walker, AlexMWalker on Twitter. And you could find me writing bits and pieces for Design Festival, the Design View Newsletter (which is the SitePoint newsletter) and little bits and pieces on SitePoint, as well.
Pascal: Again, thank you for jumping on today. It’s somewhat early-ish in the morning here in Australia…
Alex: For a Friday.
Pascal: …for a Friday, indeed! And please tune in. We have an iTunes feed going. So, if you are still manually downloading this, check back onto the DesignFestival.com website and subscribe yourself to the iTunes feed or if you’re not an iTunes user, there’s a plain RSS feed, as well. And please tune in for the following episodes. Thank you.
Scott: Thank you very much.
Alex: Thanks, guys! Thanks, Pascal.
Scott: Thanks, Alex for giving me something else to keep me up late at night.
Alex: No problem. My pleasure.
Scott: See you.
Gary: Thanks, guys. Bye.
Pascal is a standardista graphic, web and front-end designer, and a rampant typophile. Born in Mainz, Germany—the birthplace of Gutenberg—he now works in Canberra as a contract designer and studies at the Australian National University. He's been actively engaged in the Open Source community and local web industry, notably as one of the unorganisers to first bring BarCamp to Canberra. He enjoys drinking in as much good type as he can get and has been happily bending beziers since 2004.