The word “amateur” has gotten a bad meaning over the years. Amateur is the opposite of professional. It has come to mean someone is sloppy, or someone who doesn’t care about what they are doing. But really the unprofessional part is more literal – you are doing something that is not your profession. You are not paid to do this for a living. This largely comes from the sports world. A professional athlete gets paid to play the sport. An amateur does not.
We’ve conflated this meaning of professional with another meaning of the word – to take pains to do something carefully and with good quality. Thus, we think of an amateur as someone who does shoddy work because they are inexperienced.
If you look back at the etymology of the word, amateur comes from the Italian “amatore”, from Latin “amator”, lover, from “amare”, to love.
So an amateur is someone doing something they love, without getting paid for it. This seems more like something we should praise people for, rather than using the word as an insult.
Of course, in this day and age, it’s far easier to move into a position where you can start getting paid for doing what you love. If you make stuff, you don’t have to do a long apprenticeship and open up a brick and mortar shop somewhere. You can just sell it on Etsy or wherever, or set up your own site with a shopping cart. The lines have blurred, but still useful to keep these definitions in mind.
This will be saved via your browser’s local storage, so you don’t need to do this every time. Generally once per machine/browser. Now you can hit the Add Library dropdown and scroll down to see QuickSettings. Select that and QuickSettings is added to the current bin.
I’m not as familiar with CodePen to know if there is a way to save particular libraries to make them easier to use across multiple pens, or if you just need to paste the two urls in there every time. Maybe someone else knows.
Just a quick tip. I’ve been using Android Studio extensively, daily, for the last year and a half. One minor editing feature I’ve grown to love is the way it handles commenting lines. You have your keyboard shortcut, Ctrl-/ or Cmd-/. This toggles the comment on the current line and then moves to the next line. So if you want to comment, or uncomment a bunch of lines, you can just hit that shortcut a few times and it will move through the lines and do its thing.
When I started doing a lot more personal JS work and dove back into Sublime Text, I really missed this feature. So I figured out how to re-create it.
First, you have to make a macro. Just put your cursor at the start of a line, and choose Tools -> Record Macro. Then hit your comment shortcut. Then hit down arrow. Then go to Tools -> Stop Recording Macro and then Tools -> Save Macro.
Now you just need to hook that up to your comment toggle keyboard shortcut. Go to Preferences -> Key Bindings – User and add this line:
Say you are a designer tasked with creating an image. The only specs you have are that the size of the image needs to be one pixel high and two pixels wide. Seems pretty simple, right?
Just considering RGB colors, that gives you 16,777,216 color choices for the leftmost pixel. And another 16,777,216 for the rightmost pixel. Combined, that means that for that 1×2 pixel image, there are over 281 trillion different images you can create. 281,474,976,710,656 to be exact.
If you were to generate every possible image and lay them out in a grid, it would be large enough to fill over 271 million iPhone 6 Plus screens. Or almost 68 million 4K TV screens.
RGB is 16,777,216 colors per pixel. Two pixels means 16 million per pixel, multiply them to get 281,474,976,710,656 different images.
Each image is composed of two pixels, so a grid of all possible images would take up 562,949,953,421,312 pixels.
An iPhone 6 Plus resolutions is 1920×1080, or 2,073,600 pixels. Divide the grid size by that, you get 271,484,352 (and a half) iPhone 6 Plus screens to display all the images.
4K resolution is 3480×2160, or 8,294,400 pixels. So 67,871,088 (and change) 4K screens to display the grid.
Not a whole ton to say about it. Not sure how useful it would actually ever be to anyone except… those rare cases when… you just need a weave pattern… done in canvas. But anyway, it was fun to make, and I used QuickSettings extensively during the development to try out different parameters quickly and easily. And that gave me the ideas for several improvements to QuickSettings itself. If you could compare the code before and after the QuickSettings binding and global change handler features, you’d see how useful those are.
I’ve done some updates to QuickSettings over the last few weeks. First, I added quicksettings_minimal.css and quicksettings_minimal_dark.css style sheets, which bring everything down in size somewhat and get the range control sliders looking a bit more consistent across browsers and platforms. OK, OK, what I’m trying to say is that the whole thing looks more like good old MinimalComps. But it’s still all made with standard HTML controls and CSS.
I added a dropdown control that creates… well, a dropdown. Or an HTML Selection control, if you want to call things by their proper names.
There are now methods for setting values, changing range parameters and removing controls from the panel.
And the two most recent changes are really useful.
First, I added a setGlobalChangeHandler method. You pass a callback function to that and any time any control in the panel is changed, that callback will get called.
Secondly, I added a bunch of “bind” methods. These are analogous to the “add” methods, but rather than taking a callback function as the last argument, they take an object. When that control value changes, the property on that object that has the same name as the title you passed in will get assigned the new value of that control. Yeah… not sure that was very clear. Let’s try an example.
settings.bindBoolean("visible", false, model);
OK, so ‘model’ is an object that has a ‘visible’ property. This creates a checkbox. When the checkbox is clicked, model.visible will change to the value of the control. Simple, actually.
So these two latest changes make using the panel much more concise. You create a single model object, bind controls to properties on the model and set a global change handler. In the handler, you read the properties of the model. You can see it all in action in the binddemo.js file in the demos folder.
I’ve been using the panel myself in some personal projects, and I do really enjoy it. So the changes are coming from (my own) real world use.
Let’s recall the glory days of Flash and ActionScript. Initially, ActionScript was a scripting language with built in graphics and animation capabilities. There was a simple button object, but no other high level ui controls built in to the language.
Before long though, people figured out how to code them and all kinds of UI component libraries popped up. Macromedia created their own component set, which eventually evolved into Flex.
A stumbling block with virtually every ui component set created was styling and skinning, that is, making the controls look the way you wanted them to. This involved assigning multiple bitmaps to individual controls or classes of controls, or some kind of half-baked, compiled-in pseudo-CSS, and in many cases, in order to style a control, you had to subclass it and override the rendering methods.
For the most part, ui controls are fairly simple. Until you get into lists and data grids, and calendars, they’re all pretty straightforward views that respond to input and trigger events. But the styling aspect tended to bloat these component libraries all out of proportion to their usefulness and complicate them beyond belief.
I was doing a lot of experiments with math and physics,that often involved changing parameters at run time. I needed some simple buttons and sliders and checkboxes and a few other things that I could create quickly and easily to be able to do this. But I wasn’t happy with anything out there. So I created MinimalComps.
This was my own UI component set. It was designed to be drop dead simple to use. Generally, you could create and configure any control with a single line of code. Create it, pass in the parameters and an event callback. An important aspect of them was that I totally ignored all styling considerations. I gave them what I consider was a fairly attractive minimal look, and that’s what you got. Later I added support for dark and light themes, but that’s as far as that went.
MinimalComps were not designed to build websites or enterprise applications with. They were designed as an easy and very lightweight way to add standard user interaction to some kind of experimental, art or engineering piece. And they were hugely successful. People tell me they still use them to this day. They wound up being used in games and sites and all kinds of apps. If you do a Google image search for “MinimalComps”, you’ll see a bunch of examples. They were even spotted in an Adidas video for the Megalizer app made with them.
In short, they filled a niche and even outgrew that niche.
So I did it. And with that long-winded intro, I present QuickSettings.js
Rather than going through a long explanation of how to use them, I’ll just refer you to the github page, where the readme outlines all of the main methods.
There may be some minor bugs in this or some tweaks needed. If so, just let me know, and I’ll fix it up. There’s definitely a lot of optimization that can go on here. I may experiment with creating an offscreen canvas the size of one cell, drawing one cell there, and then blitting that across the rest of the grid. We’ll see. In the meantime, it mostly works. Enjoy.
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.
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:
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.