New JS Library: Shapes

Jul 21 2014

Send to Kindle

Another week, another JS library.

https://github.com/bit101/shapes

Again, I’m sure there are hundreds of other libraries that add improved functionality for Canvas drawing. There’s even CreateJS, which is super powerful, creating a Flash-like display list with animation, etc. That’s cool, but it kind of becomes a framework that you need to buy into fully. My goal was not to create a new paradigm, just make the existing one a bit easier to work with.

Almost everything in the library is stuff that I’ve created before. Again, I just decided to consolidate it all into one code base, clean it all up and put it up on github. If nothing else, I won’t need to write that stuff again. And if someone else finds it useful, either as a whole, or something to borrow bits and pieces from, that’s great.

Like the shaky library from last week, shapes wraps both the Canvas and Context2D. I’ve proxied most of the existing Context2D methods to the shapes object, so you can work directly from that for 99% of what you need to do. A lot of it is obvious stuff – circles, ellipses, rounded rects, polygons, etc. But there are some unique and fun items in there as well. Explore. The demo page will give you a few ideas of what’s possible.

http://www.bit-101.com/bitlib/shapes/

The source for the whole demo page is in the repo as well, so you can easily see the code that is used to create the examples.

Send to Kindle

2 responses so far

shaky Library for HTML/Canvas/JS

Jul 15 2014

Send to Kindle

A few days ago, I released my clrs color library for HTML/JS/Canvas/CSS. It’s not that I thought it was revolutionary or anything. In fact I’d be surprised if you couldn’t dig up at least a dozen other similar libraries out there. I’ve already been shown two. But it was code that I’d written myself a few times, so I consolidated it all into one place and put it on line. If nothing else, it will keep me from writing it again. And judging from the number of favorites and retweets on twitter, it seems like others thought it might be useful as well. If one person uses it and likes it, my job is done.

It’s occurred to me that I’ve written a lot of other code over the last few years that has never seen the light of day. Some has been for my Art From Code site, for other apps or experiments I’ve done, and other ideas that I’ve just messed around with and never did a damned thing with. So rather than keeping that stuff all on a hard drive somewhere, I’m slowly gathering it together, cleaning it up, rewriting some of it, and releasing it, bit by bit. Again, maybe nobody will find this stuff useful. Maybe there are other similar projects out there. But I’m going to github it so it’s in one place where I can find it, and if anyone else can possibly benefit from it, that’s just icing on the cake.

The next library I’ve just released is called “shaky”. I first did this in ActionScript years ago, and more recently in Canvas. It’s simple enough, it draws shaky lines and shapes. The problem, if you want to call it a problem, with computer drawing, is that all the lines are perfectly straight. It’s good in most cases, but sometimes you want to replicate a hand-drawn look, or just mix it up a bit and draw some jittery lines. You’ll probably never need it, but if you do, here it is:

https://github.com/bit101/shaky

It basically wraps the canvas and context 2d. So you can call most of the usual Canvas drawing methods like moveTo, lineTo, rect, arc, quadraticCurveTo, bezierCurveTo, and instead of drawing perfect shapes, it will draw shaky versions. I’ve also added some convenience methods like circle, ellipse, and fill and stroke versions of those, as well as setSize and clear methods. Other methods like beginPath, stroke, fill, clearRect are proxied right through to the context2d object, so you can do most of your drawing without ever accessing the context itself.

The shakiness of the drawing is utterly tweakable via two properties, segSize and shake. Any single line will be broken down into a series of short line segments. The rough length of these segments is controlled by segSize. And the shake property controls how much randomness will be applied to each segment.

The following image demonstrates these two properties interacting. Here, shake is increasing left to right, and segSize is decreasing top to bottom.

At the top left is 0 shake and a large segSize. This gives you straight lines. At the bottom right is a large shake and small segSize. This gives you lots of individual segments, each of which is randomly offset by a lot. You can crank that up even higher and get complete chaos.

But tweaked just right, somewhere in the middle, you get stuff that looks a lot like hand-drawn lines. Useful? You tell me.

Send to Kindle

No responses yet

clrs: A Color Library for HTML/JS/CSS/Canvas

Jul 13 2014

Send to Kindle

As most of you know, I grew up as a programmer using Flash and ActionScript, and in the last few years have been much more into web programming, particularly with HTML’s Canvas. In general I do like Canvas a lot. It’s a different mindset than Flash, but I enjoy the challenge.

One thing that has consistently annoyed me, though, is using colors. In ActionScript, colors were 24-bit or 32-bit numbers. So they were easy to manipulate. Want RGB? 0xffcc00. Combine channels? red << 16 | green << 8 | blue. Extract a channel? red = color >> 16, green = color >> 8 & 0xff, blue = color & 0xff. Because everything is numbers, numbers, numbers, it’s super easy to create random colors, tween colors, generate colors based on any math formula, etc.

Then you get into HTML/CSS/JS/Canvas. It’s all strings. You can do named CSS color: “cornflowerblue” or hex values “#ffcc00″ and you can even do rgb/rgba: “rgb(255,128,0)” or “rgb(255,128,0,0.5)”. It looks all about as easy as ActionScript until you actually try to do it. Those rgb numbers must be integers, so if you have red, green blue values that might be floating point numbers, its:

"rgb(" + Math.round(red) + "," + Math.round(green) + "," + Math.round(blue) + ")";

GAH! You write that a few times and you want to kill someone.

So I’d usually write some kind of function that would deal with that.

function rgb(red, green, blue) {
    return "rgb(" + Math.round(red) + "," + Math.round(green) + "," + Math.round(blue) + ")";
}

This past week, I took it a bit further and made a little library that did that and added a bunch of other neat features as well. Introducing “clrs”:

https://github.com/bit101/clrs

Essentially, clrs is an object that has a bunch of methods on it. These return a color object. So you can say:

var myColor = clrs.rgb(255, 128, 0);

The color object is just an object, but its toString method returns an “rgba(…)” string concatenated as above. It turns out that if you use an object for anything that needs a color value, it will call that toString method and will get the string you set. Thus, you can use color objects anywhere you need a color value in JavaScript:

document.body.style.backgroundColor = myColor;
context.fillStyle = myColor;

So now you can set colors with rgb values (floats or ints), rgba values, 24-bit numbers, strings of any kind, even hsv values. I threw in some random functions as well. Not functions that do random things, but functions that return random colors. You can even interpolate between two colors.

So that’s cool in itself, but there’s more. That color object has a bunch of other methods. So once you have a color, you can set or get any of its red, green, blue or alpha channels, or all at once. Any of the set methods are chainable, so you can say:

myColor
    .setRed(255)
    .setGreen(128)
    .setBlue(0);

Another neat feature is binding. you can bind a color to a particular property of an object, say fillColor of a context2d.

myColor.bind(context, "fillStyle");

Now, whenever you change anything about that color, by calling setRed, setGreen, setRGB, etc. it will automatically update the context’s fill color with the new color.

Anyway, it’s early code. It needs to be more extensively tested. I welcome all feedback and contributions. I’d like to make it require.js compatible at some point. Any other standardization / best practice issue you see, or any methods you would like to see added, let me know, or do a pull request.

Send to Kindle

No responses yet

New job: DreamSocket!

May 27 2014

Send to Kindle

At the beginning of March, I was laid off, along with a few hundred others, from Playdom/Disney Interactive. Due to a very generous severance package, I was able to, and in a very real sense, was required to, take a 60 day sabbatical. (Think of it as a paid vacation with full benefits.) No complaints there. I had a great time. But like all good things, it came to an end. Not that I mind working, not at all, but if I could find someone to pay me to do whatever I want for the rest of my life, I’d jump on it. I guess that’s called retirement. If so, I’m looking forward to it.

But anyway, time to move on and get back to work. While I was off, I explored several opportunities. I even went through some interview processes at some big name companies. None of those panned out, but in the long run I’m glad. I don’t think I’m a large company kind of guy. All those HR processes and red tape and forms for this, forms for that, etc. rub me the wrong way. And being a small cog in a large machine, handling some small details of some large application that someone else built years ago, is, to me, about the most mind numbing thing in the world. This was most of the work I did at Playdom. Not all, but a good deal of it. So I’m not sure why I was applying to other large companies.

Actually, I was looking into tech writer / dev support / evangelist positions for a while. But as I started actually looking for and applying for jobs, it became obvious to me that I wasn’t really sure what I wanted to do in that field. Some of the developer support positions wound up being more in the realm of tech support call center things. Nope. The tech writer jobs seemed to be largely writing API docs. Hmm… Not exactly creative either. So all in all, it’s most definitely better that none of those things worked out.

What did work out was that I was contacted by Kenny Bunch, a name I’ve known for ages, back from the old Flash community days, but not sure we ever met in person. Kenny started up a company called DreamSocket years back, at first doing lots of Flash stuff, but now mainly native mobile and web apps. We talked a lot and I was really impressed with the work they are doing and got a glimpse into some of the technology they’d developed to do things and was even more impressed. It’s a small company and one of the big draws was that the dev teams are usually a single dev or maybe a couple. In other words, I could own a project from start to finish, not just bang on Jira tickets from some massive code base that I barely understand. So after a few conversations, I got and accepted an offer and started last week.

So far, I’m honestly very excited and happy to be working here. There was a certain prestige about working at Disney – working for the Mouse – but that wears off really quickly when the work itself is not satisfying. What I’m doing now, even in the first week, is really fun. I’ve finally got a reason to buckle down and do real native Android dev. And eventually brush back up on iOS and Objective-C, though it’s only been about a year or so since I did much with that. And there will be some real web work as well. I’m not going to bash Flash, but if I never have to work with the mobile AIR publishing process again, I’ll be perfectly happy.

I’ll still be working remotely, which is nice as well. At least I’ll be on an east coast schedule. Working at Playdom, I adopted a mostly west coast schedule. I’d start working around 11:30 a.m. and go to around 7:30 p.m. Having the mornings was nice, but I also just got lazy and often accomplished nothing in the mornings. I think I’m happier being back on a tight morning schedule. I get up at 6:00 a.m., go for a run, come back, eat, walk the dog, take a shower and start work by 9:00 a.m. And I’m done in time to have dinner with my family, not at my desk.

Send to Kindle

10 responses so far

Flash and Me

Apr 23 2014

Send to Kindle

Today I tweeted a link to another stupid linkbait article proclaiming that Flash is dead. Of course, this set off a huge flurry of tweets about whether or not Flash is still breathing. And it made me realize that I haven’t made my current position on Flash very clear.

The fact is that I have no longer have any interest in Flash or ActionScript as a platform or language. While I did do some work with ActionScript and mobile AIR development while I was at Disney, I don’t think I’ve done any personal Flash development in two or three years. I don’t have Flash Authoring or Flash Builder or any other Flash development tools on any of the computers that I currently use.

But I’m not a Flash hater. I know a lot of people who jump started their development careers with Flash and have moved on and now rant and rave about how horrible it is and always was and how much they hate it now. I’m not in that camp. I have lots of great memories about Flash – both the technology and the community that it created.

So why did I jump ship? Short answer, I don’t see it as a viable, evolving technology for the future. That’s not the same as it being dead though. I look at it more that Flash has gone into retirement. Now, people who go into retirement are not dead. Many continue to have long, healthy, happy lives for decades to come. Some continue to do many productive things, have great experiences and learn new skills. But generally speaking, they’re not graduating college and looking for a new job to start their career. They’re winding down.

That’s where I see Flash. It had its Golden Age, and it was awesome. I’m super happy that I was a part of that. But that’s over. That doesn’t mean that it’s dead. In fact, Flash still does all the stuff that made it awesome, and does it as well as it ever did. It even continues to get some new features. And you can still use it for all that stuff. And many people still do, and they make a living at it, and likely will continue to be able to make a living at it for some time.

But, as I said, it’s not a viable, evolving technology. Looking at my years as a Flash developer, I started out with Flash 4. Flash 5 had groundbreaking changes and improvements. Eighteen months later, Flash MX blew everyone away with new features again. Flash MX 2004 gave us ActionScript 2.0. The next bunch of improvements get a bit hazy due to the player versions getting out of sync with the authoring versions, but we got BitmapData and crazy audio and video improvements, ActionScript 3.0, Flex, Flex/Flash Builder, Flash Catalyst, basic 3D and then Stage3D, and on and on.

But in the last few years, there has been nothing like that. Yes, Stage3D continues to get improvements, and AIR continues to get updates. And there are things here and there, but as an overall ecosystem, I feel like it’s largely in maintenance mode. I know people will deny this and start posting long lists of recent updates and improvements. But you can’t tell me that Adobe is anywhere near as committed to the future of Flash than it was 10 or even 5 years ago.

Where is Flex? Where is Flash Mobile? Where is Flash Catalyst? Where is any sign of Flash on Linux? (hint: gone, gone, gone and gone.) What is in store for the next version of ActionScript? (hint: there is no next version of ActionScript planned.) What improvements are upcoming for Flash Builder? (hint: none.) How many people were on the Flash team a few years ago and how many are on it now? (hint: fractional.) How is the Flash Platform monetized? (no hint. no clue.) How many people do you know who were full time Flash developers 5-6 years ago who don’t Flash at all now? (hint: a LOT.) How many of the numerous Flash conferences from 5-10 years ago are still held, and have not changed their name to exclude the concept of Flash? (hint: zero.)

I know I’m now sounding like a Flash hater, but I’m really not. These are all just facts. Adobe is committing a small fraction of the resources it used to to the Flash Platform. It has cancelled most of the projects and products related to the platform. Almost every person I know who worked on the Flash team back in the day has either left, been laid off, or has moved onto other projects. Most of the Flash developers I know personally from years ago are now doing iOS, HTML/JavaScript or other development – exclusively in most cases.

Now, I know people are going to come on here and tell me how great Flash still is. Yep, I already said that. They’ll say that it is still innovating with new features. I covered that. They’ll talk about how great it is for games. No argument. Then they’ll go onto say how much HTML and JavaScript sucks. They’ll say how you can’t make apps with it and you can’t make games with it and you can’t really do anything with it because it isn’t strictly typed and doesn’t have private vars audio support sucks and blah blah blah. I’m not going to respond to those people. Only going to roll my eyes and feel a bit sad for them.

Long, long before I was into development, long, long before most of you were into programming either, I knew a guy who was a programmer. An MIT graduate. He was really proficient in some particular language being run on some particular system. I can’t tell you what language or system because at the time, I couldn’t tell you the difference between C and BASIC. But he was one of the best at this system. He had this great, really well-paying job doing it. He worked there for years. Had it made. Then the company upgraded to a new system with a new language that he knew nothing about. So he was out of a job. And he went to look for a new job. And he realized that absolutely nobody used that old system or language anymore. He was so confident and complacent at his old job that he never bothered to learn any new language or system. Now, all his skills were completely obsolete and he could not get a new job. I think he wound up doing data entry somewhere. This is not a made up fable. This was a real guy that I knew well. I don’t want to be that guy, so every once in a while I put aside my likes and biases and take an honest look at the landscape around me and decide where technology is going so that I don’t paint myself into a corner. And that’s why I stopped doing Flash.

Send to Kindle

69 responses so far

Hire me!

Apr 05 2014

Send to Kindle

Well, as previously reported, I got caught up in a big layoff from Disney Interactive / Playdom. Considering the amount of time I was there, I got treated pretty well and that has allowed me to take a couple of months off completely. Actually, without getting into details, I kind of can’t start another full time job until early May. But it’s all good. Very good. I’ve been enjoying the time off immensely. I could get used to this. But eventually, the clock will strike midnight, my coach will turn into a pumpkin, I’ll have to leave the ball and go back to scrubbing cinders.

I haven’t been job hunting in earnest, but have had some interesting conversations that I need to follow up on. I guess over the next few weeks I will have to get more serious about this.

I did manage to pick up some contract work. I’ll be creating an online video-based course to teach basic JavaScript. This will be six lessons, each 30-45 minutes of video each. I spent the last week finalizing the outline and getting to work on Lesson 1. I’m really excited about this and I’m having a lot of fun doing it. This is exactly the kind of work that I would love to be doing full time. And it’s a nice extra income that pushes off that pumpkin deadline a few more weeks into the future as well.

I already mentioned this in my previous post about being laid off, but since then I’ve been doing even more “soul searching” about what I want to do and this is it. All recent controversy aside, I’d love to get into someplace like Mozilla, working with the MDN documentation or something similar. Or any other company that has an API, a service, a language, system, framework, etc. that they want people to understand and use to its full potential. I just love learning something, then analyzing the hell out of it in order to teach it to others, showing them A. why they might want to use it, B. how easy it is to use and how to get started, and C. some awesome things you can do with it.

Alternatively, I’d also love to get into something even more purely educational, such as Khan Academy, Udacity, Lynda.com or something like that. That’s basically what I’m doing now with this JavaScript course contract. I’d be happy to continue doing contracts like this, though the illusion of job security with full time employment still has a hold on me.

I’m also not at all averse to continuing on in a straight up developer role somewhere. But if so, I’d love to be somewhere where I could start projects and do some creative work, not just be a member of a large team handling a conveyor belt of Jira tickets on some system created by someone who no longer even works there.

So, I’ll be continuing to do a more traditional job search kind of thing, but figured it couldn’t hurt to throw out a shotgun post like this. If you know of any leads or have any contacts in any companies that might be looking for people in positions like any of the above, please send them my way!

Send to Kindle

6 responses so far

Playing With Chaos – Alternate Formats!

Mar 24 2014

Send to Kindle

Since I published Playing With Chaos on the Amazon store, people have been asking for alternate formats – PDF, epub, print. Well, I finally got around to cleaning it up and formatting it for PDF. Generating an epub from the Kindle .mobi format was easy enough. So you can now purchase DRM-free versions of the book from Gumroad:

https://gumroad.com/l/playingwithchaos

When you buy, you’ll get all three versions – PDF, epub, mobi. No DRM, so you can read them anywhere. Hopefully you won’t go crazy sharing them. Think of the children.

Send to Kindle

No responses yet

Goodbye, Magic Kingdom

Mar 09 2014

Send to Kindle

Well, that was a bit fast.

At the beginning of last April, I started working at Playdom, the social gaming division of Disney Interactive. As part of the Central Tech team, I wound up working on maybe a dozen different games, from Star Wars to Pirates of the Caribbean. I’d usually just go on to a game team for a short time to help out with something specific – build process, some library integration, optimization, implementation of some specific feature, etc. – then I’d move on to some other team that needed some help.

A couple of months ago, there were some big internal reorganizations and a couple of key execs left the company. Then, a few weeks ago, the Wall Street Journal posted a story claiming there were going to be huge layoffs from Playdom. I didn’t hear about the story until the following week, which was after the supposed layoffs were allegedly occurring. Although I was told it was an unfounded rumor, I felt that there was probably some truth to it. Maybe the timing was off, but I suspected something was in the works. Lots of internal factors, such as major reorganizations, shifting production schedules and shifting technology decisions, made me wonder what a lot of employees were going to do.

So last Thursday, when New York Times announced that Playdom had laid off 700 employees, it didn’t come as a huge shock. Well, the fact that they used the past tense, and nobody in the office knew anything was a bit strange, but obviously something big was happening that day. It was an odd day to be a remote employee. But eventually I got THE CALL. And so, now, I am unemployed, along with 700 or so of my former coworkers.

As it turns out, it seems like Disney took pretty good care of the people it let go. I can’t complain at all about the deal I got, especially considering I’d been there just under one year. Without getting into details, it works out that I’ll be taking the next two months off. That sounds extravagant, but it’s not just me being lazy. It’s just how it’s going to work out, and it’s the only logical option. So I’m pretty psyched about that. In my 11 months at Playdom, I didn’t take a single vacation or sick day. So I feel like I’m ready for some time off. Two months to chill out and reboot and do some soul searching about what I want to do next. I can do some other projects or small contracts though, so if anyone would like some help on a project, let me know.

Some thoughts: I’m not sure I really want to go back into a production coding environment. Yes, I can track down and fix bugs in my or someone else’s code. Yes, I can implement new features in existing code bases. Yes, I can optimize and convert existing code. But I’d much rather be building things from scratch. And with my recent Coding Math series, it’s become clear to me that one of my strengths is in education. I’d love some kind of position where I could write documentation, tutorials, do videos, seminars, workshops, sample apps and implementations. So if anyone has a line on such a job, let me know!

Some of the projects I plan to work on during this “sabbatical” are:

1. Playing With Chaos. Several people have been asking for a non-Amazon version of the book, either PDF, other format, or print. I’d started the conversion of this a while back, and got back onto it recently. It’s mostly a lot of formatting work. The Kindle/mobi format is basically reflowable HTML, but PDF and print are page-based, so I need to go over each page and look at how it lays out – code line breaks, image spacing, etc. Anyway, I think I should have some alternate versions available very soon. And then I’ll look at a print version.

2. Coding Math – I was doing three videos per week, which was getting to be a bit much. I was about to post something saying that I was going to cut that down to two videos per week. But now that I have some free time on my hands, I think I’ll keep up the three-per-week schedule for a bit. Last week I only got out a single video due to the drama at the end of the week.

3. I’ve had a couple of game ideas floating around my head. I may try to get those out the door finally. And I need to do some updates to Falling Balls.

4. Woodworking. This is a recent hobby I’ve picked up. Still in the noob stages, but starting to create some half decent items. I have a small basement shop, so I’ve been concentrating on small boxes, toys and puzzles. I’ve been having a lot of fun with it. After so many years of making virtual goods, it’s quite a change to be creating physical items. Here’s some of my stuff. https://www.etsy.com/shop/SquareKWoodworking

5. Get back on track with current web technologies. I was getting into this more last year, but at Playdom I was back in the Flash/AIR world mostly. I still love JavaScript, but have probably fallen a bit behind on the current popular frameworks and technologies that all the cool kids are using these days. I’d like to ramp back up on that really quickly. Suggestions? I’ll probably go to a bunch of local meetups too.

6. I also started learning a bit of Unity at the end of my Playdom stint, as it seemed like we were going to be doing a lot more with that. I may spend a little time continuing to look at that stuff.

7. I’ll probably reboot my running activities. Since my third marathon last October, I’ve been in a real rut. Just can’t get into a steady running schedule for more than a week or two. Maybe with a little extra time, I’ll be able to get back into it.

Send to Kindle

10 responses so far

Coding Math Mini #5: Pythagorean Theorem and Distance

Feb 12 2014

Send to Kindle

This is one I’ve been meaning to do for a while. Probably should have done it earlier, as it’s used in so many places. Anyway, here you go, how to find the distance between two points.

Send to Kindle

No responses yet

Coding Math: Episode 13 – Friction

Feb 11 2014

Send to Kindle

I figure I might as well post these here too. Just in case people aren’t aware of them. :)

Send to Kindle

No responses yet

Older posts »