Friday, March 4, 2016

Making a Digital Nylon Loom with p5.js and JavaScript

So, I picked up a bit of Processing recently, which has been fun, and I've made a bunch of weird junk with it. My classic approach with learning new technologies has been largely as follows:

1. Look at it.
2. Look at it sideways.
3. Get frustrated.
4. Obtain a small amount of proficiency.
5. Get a crapload of breadth, and no depth ever.
6. Use it when the situation calls for it.
7. Forget you ever did it until the situation arises again.
8. Which reminds me I have a Twitter corpus-building script I should probably remove from my crontab now. I think it's been running since December.

So, as part of my "moar bredth plz" approach, I learned p5.js, which in turn required me to learn JavaScript, which in turn required me to sacrifice a chicken in the full moon to the Mozilla Development Network, which condescended upon me and taught me the true meaning of Christmas and/or prototype models.

Here's one of the finished products, a digital art that looks like those looms you used to make crappy potholders out of cut-up socks on as a kid. Here's some of the stuff I learned (code here):
  • You know how some languages have "everything's a X"? Everything's an object, everything's a stream, everything's a string (necessary Tcl side-eye)? Well, everything's a function in JavaScript. So make your objects functions and no, you can't put the functions inside the object function or the universe collapses, so you have to modify the protoype model afterwards and it's weird. Get Atom or something like it because otherwise you're going to type the word "prototype" so often you'll forget what it means.
  • Processing has PShapes which make making weird shapes easier. They also make making normal shapes in abstract, then drawing a whole bunch of them at once easier too. p5.js doesn't implement PShapes, so I made a fake PShape in p5.js or rather in my script. All that Rectangle stuff is me making a rectangular PShape analog object. Function. Whatever.
  • Making a weave is easy, but as with anything graphical, you're going to have to do trial and error to get it perfect.
  • I started with a limited palette (note that you have to declare global variables first, then assign values in the setup() function), and then I said "Screw it, taste the rainbow", and randomly generated the colors. It was more fun.

No comments:

Post a Comment