Archive for the 'Lab' category

BIT-101 Lab, One Month In

Jan 31 2017 Published by under JavaScript, Lab

Screenshot from 2017-01-30 21-11-22

So… that went pretty well. One full month of posts done. I wasn’t sure how long I’d last before we started seeing gaps in the lineup. But this is easier than I was expecting. Turns out, I have a lot of ideas. To be honest, and to possibly spoil some illusion, I’m actually a bit ahead of the game. Some days I have more than one idea, or I come up with one or two iterations to something I just did. If so, I just go ahead and bang out whatever is in my mind and postdate it. This also takes the stress off having to come up with something brand new every single day. While generally not a problem, some days I might be really busy, or exhausted, or even sick. Having a buffer on those days is really helpful.

My biggest realization on this whole exercise is how many cool sketches I’ve been able to come up with and how easy it is in general. There are various pieces of advice, exercises, motivational sayings, etc. that say if you force yourself do do something every day for so many days… something magical will happen. Or something. For all the new-age, pop-psychology, “one weird trick” dubiousness of those things, there does seem to be something there.

Although it feels like creativity should be something that needs to flow naturally from some unseen source, it can very definitely be forced, or at least jump started. Force yourself to create something every day and suddenly you’ll have more ideas than you can document, much less act on.

To be fair, some of these ideas are revisitations of things I did years ago in the Flash-based lab. But I think I’m taking them in new and interesting directions, and probably have a better presentation of them as well. Even so, all that stuff was at more than 11 years ago. Some of it going on 16 years ago. There may be new viewers who were not even born when some of this came out originally.

A lot of the things I’m exploring is stuff I originally posted on Art From Code. The source for that stuff was never released. And in fact, most of it is long gone. So I find myself reverse engineering my own past work in a lot of cases. “How the HELL did I do that???” One was baffling me for many days, till I finally dug up a source file hidden away in DropBox. Sad that it had to go that way, but happy I found it.

I’ve also done a lot of work on the site interface as well. I got it pretty near where I want it at this point, though there are a few improvements that need to be added. And it will still evolve over time. But I was really happy with the tags searching, thumbnail index, the sorting and sizing of thumbnails, the saving of preferences and the history / clear history feature in the calendar. Most of that is way beyond what I originally had planned on day one. A lot of it still needs to be cleaned up, but I’m happy with the functionality anyway.

Screenshot from 2017-01-30 21-11-36

I also did a lot of work on the daily page templates. Initially, as I changed some aspect of how it worked, I’d have to go through all of the previous days and edit them all to keep the past days in line. Now, most of the daily UI – beyond the experiment code itself – is done via a UI script. So when I want to change how the daily UI looks, I just change the script and all the days update when they load. That saved me hours already. I toyed with the idea of having a single index that gets a query param of the date it needs to load. That could work, but I’m sticking with individual HTML files for each experiment. This allows me to load individual libraries for one experiment, such as Perlin noise or something else, without having to use some kind of module loader. Or I can make some one off changes or customization to a single day’s experiment, without jumping through hoops.

One last aspect I wanted to mention. This goes back to the creativity aspect. A few years back I did a talk at a few conferences, which I think was also entitled “Art from Code”. In it, I went a bit into left-brain / right-brain theory. I mentioned that while there is a biological basis for the left/right stuff, new age pop psychology has taken the whole theory way beyond reality. However, I did acknowledge that there are different modes of coding, some of them conducive to creativity, some less so.

For example, say you have some creative idea and an concept of how you want to code it. You open up an editor and… create an HTML file, give it a name, figure out where to save it on your disk, give it a head, title, body, import some libraries, add a canvas to the stage, maybe some CSS, add the main JavaScript file to the HTML, create that file, get a reference to the canvas, get the context… now, what was that idea you had? It’s probably gone.

Basically all that analytical, naming, organizing, structuring activity pulls you right out of the cool idea mode you were in. Blame it on brain hemispheres, or don’t. It happens. This is perhaps one reason why the Processing language is so popular among creative coders. You launch processing, you start typing, you hit “run”. BAM!

So part of my flow is a templating system and some creation scripts, as well as the various libraries I’m using. Say I have an idea for something I want to publish on June 12 (no, I’m not that far ahead of myself yet). I just type in the console:

mkdaily.sh 170612

and the HTML and JavaScript files are created and ready to start typing code into. I’ve been using JetBrain’s WebStorm, which has a built in terminal window, so it’s always ready. Say I like what I did on the 12th and I want to iterate it a bit on the 13th. Rather than copy the two files and manually edit them, I type

cpdaily.sh 170612 170613

and it copies the original experiment into the new one, changing the date, links, etc. I just need to iterate the code, update the description, etc. Both of these scripts, as well as the templates, are there in the repo if you want to get a better idea how that works. And yeah, they guard against overwriting existing files if I type in the wrong input. Anyway, all that has been hugely useful in keeping me in creative mode, and away from housekeeping and setup work when I have a good idea.

In summary, I’m on a roll and don’t seem to be slowing down. I’m certain I’ll bat 1000 again for February. Then we’ll see how March goes.

4 responses so far

BIT-101 Lab Comments

Jan 06 2017 Published by under Lab

So I think I found a pretty good system for allowing people to comment on stuff in the lab. Commenter Erik pointed me to this post:

http://ivanzuzak.info/2011/02/18/github-hosted-comments-for-github-hosted-blogs.html

TL;DR – Create a github issue for each sketch. Link to that from the sketch. People can comment on the issue. Brilliantly simple. I made the system a bit simpler than described in that article. I’m not pulling in the comments to the sketch page, just linking to it.

I actually had set up Disqus to open up in a overlay div. It worked fine, but I wasn’t super happy with it. It was like, the site is here, the content is here, the source code is here, and the comments are … way over here on this other unrelated site.

With the github solution, the site is here, the content is here, the source code is here and right along in the same package are the comments.

It’s a bit more work for me. I have to create the sketch, then create the issue, add the sketch url to the issue, and add the issue url to the sketch. The template I have for sketches handles most of the boilerplate because everything is indexed to the sketch date in the format YYMMDD. But the issue url will be sequentially numbered, so the issue will need to be created and then the url added to the sketch html. Not a big deal. But the Disqus method was 100% automated. 🙂

Anyway, hopefully this will allow a decent way for people to comment, discuss, ask questions, etc.

4 responses so far

BIT-101 Lab Source Link and … comments?

Jan 05 2017 Published by under JavaScript, Lab

sourcelink

One of the key aspects of the lab has always been that it’s open source. The code is not particularly written in a manner conducive to education. It’s often the result of me hacking around until I find something that looks good. At that point, it’s done. No heavy duty refactoring, cleaning up, commenting. You get what is there, and if you can figure out what I’m doing, great. If not, feel free to ask, and maybe I’ll try to explain. Maybe not. I might have forgotten what the code does myself.

Anyway. I was looking at the flow. You see something in the lab you like, you have to take note of its number, somehow navigate to the github site, go into the dailies directory and find the js file with that number. Or, maybe you’ve cloned the repo. You can pull any updates and navigate to that spot on your file system.

But hey, that source file just lives at a standard url right? Why not give the nice viewers a link to click on? So there you go. Right up in the description box, there’s a “source” link that’ll take you right to where the code for that particular experiment lives.

I’m also trying to figure out a way to enable comments or discussions. Ideas I’ve had so far:

1. Disqus. I got it working easily enough, but the UI is not going to work out. I want each experiment to be full screen with only the home link and info box. I could make an additional link or button that opens up the Disqus UI in some kind of popup, but I wasn’t really liking where that was going.

2. A forum. That’s a possibility, but kind of a heavyweight one. I’ve run forums before. Not sure I really want to get back into that. And forcing people to make forum accounts and profiles, etc. Not into it.

3. Github wiki. I’m just not familiar with that. Could work out. One wiki page per experiment. Open to anyone editing. Open to abuse, I guess. Anyone have any experience with this?

Any other suggestions? I think a github-based solution would be great. Surprisingly there’s no straight up comment feature in github that I can see. There are issues and pull requests, sure. But is there something where you can just comment on a file or folder?

9 responses so far

BIT-101 Lab Visual Index

Jan 04 2017 Published by under JavaScript, Lab, Technology

Screen Shot 2017-01-04 at 9.28.46 AM

I just ticked off another feature on the BIT-101 Lab list. A visual index.

Back in the old Flash Lab the only way to find a specific experiment you wanted to look at again was to click through, one by one, trying to remember the approximate date and targeting items around that. I wanted to avoid that pain. The first thing I did was to add tags and the ability to search by tags. This should help a lot. But I think this visual index will help even more. You can just scroll until you see something that looks like the thing you want to check out, and click away. It will also be good for discovery, I think.

At any rate, I think it looks pretty cool. I test-populated it with about 15 future experiments and it really starts to look great when there are lots of images in the list. I can’t wait to see it grow.

No responses yet

Back to Basics

Jan 01 2017 Published by under General, JavaScript, Lab, Technology

TL;DR: Go here: https://bit101.github.io/lab/

Long time readers of this blog may recall what existed here before “blogging” was a thing – the BIT-101 Lab.

Back in the late 90’s / early 2000’s there were a bunch of people running Flash “experiment” sites. Basically, each day they would post some kind of visual, animated and/or interactive Flash piece, often open sourced. Josh Davis’s Praystation, Jared Tarbell’s Levitated, Robert Hodgin’s Flight 404 were some of my favorites. In August 2001 I decided to blatantly copy them… I mean… jump on that bandwagon. My site at the time was called “KP Web Design”. Sigh. I started doing some experiments and decided I needed a better domain, so I came up with bit-101 and moved all the experimental stuff over there. It went live on September 11, 2001. Yes, THAT September 11th. So nobody really noticed it for a while. But over the next four years I posted just shy of 700 open source Flash experiments that explored all kinds of neat techniques. The site won an award (FlashForward 2003 – Best Experimental Site) and really pretty much launched my career.

In 2003 I started this blog. And by 2005 the lab was retired. I blogged heavily for several years, but in the last few years, not so much. I’ve had other interesting projects over the years, but nothing was quite as exciting as those lab days. Recently Zach Lieberman posted about his 2016 project of posting a sketch each day (sketch/experiment, same concept). It inspired me to get back to basics.

Of course, I would not be doing Flash anymore. I haven’t opened that program on my own volition in several years. (I did need to use it to examine or fix a few things for work a few times.) My weapon of choice these days is HTML5 Canvas and JavaScript.

I’ve spent the last week or so creating a site and a workflow. All the source will be posted on github at https://github.com/bit101/lab. And the site uses github pages – https://bit101.github.io/lab/. So literally, the site IS the source IS the site.

I have template files and a script to create a new daily sketch / experiment based on the templates. This goes into a dev folder where I can work on it. When I’m ready to release it, I move it to the dailies folder, update the index.json file, add, commit and push. This updates the source and publishes the new file to the site. Because the site IS the source… etc.

One thing you’ll see in there is the use of a couple of libraries, bitlib and QuickSettings. You might be familiar with the latter. But the bitlib library is something I’ve been working on quietly for a while. It’s really just for my own use. It’s not something that I want to promote and convince other people to use and then have to wind up supporting. It’s just a compilation of the functions that I wind up using over and over. It’ll grow and change over time. Feel free to use it as much as you want – at your own risk. I make no claims for it’s production-readiness.

The site code is pretty rough. Again, I banged it all out over the last week in my spare time. But I’m quite proud of the calendar UI I created from scratch. And the tag searching and indexing. It’s even responsive and stuff. I have plans to take a screen shot of each experiment and present a visual index as well. And I’m thinking about ways to automate that index / tag generation portion. But it all seems pretty good right now for starters.

Anyway, I’m pretty excited about this. I know that on day one, there’s not a whole lot to be excited about from your end, but hopefully as the calendar fills up, it will become a fun place to visit and play with and learn from.

10 responses so far