Read my book

I wrote books about Webpack and React. Check them out!

Saturday, April 30, 2011

Figure Drawing Resources for Beginners and Advanced Artists

Figure drawing is easily one of the most challenging yet rewarding ways to improve yourself as an artist. It can be split into three separate disciplines: life drawing, drawing from mind and drawing from reference (photo, book, etc.).

Life drawing is a form of observational drawing where you observe a three dimensional figure and translate it to two dimensions on your paper. In case you are drawing from your mind you need to tap into your knowledge and produce a convincing result based on that. Drawing from reference falls somewhere in between of these two disciplines.

In order to become a good artist it is important to master these disciplines at least to some amount. Of course this is just one opinion. I'm sure you can be a really good artist without sticking into this framework.

Each of these disciplines supports each other. As you draw from life you get to use skills earned in the two other disciplines and vice versa. It's difficult to learn life drawing without actually having some kind of a model. Fortunately it's possible to train the latter two with less effort.

I've tried to gather some pertinent resources in this post. Some of them are freely available, some are not. The list is not exhaustive. It's likely you'll have to do some research on your own. I do hope it acts as a starting point of some sort for you.

Note that given the subject it's possibly you'll run into nudes. If you get offended by this sort of thing, just move along. :)

Books and Magazines

All of Andrew Loomis' books
Especially "Figure Drawing for All It's Worth" is valuable. There's definitely a lot to learn from his books.
George B. Bridgman - Constructive Anatomy
Bridgman uses a constructive approach in his drawing. This means he uses simple primitives, such as boxes, and wedging to join them together. This simplification provides a starting point for further observations. Famous Frank Frazetta based his anatomy on Bridgman's work. The same applies to many others, Loomis included.
Michael Hampton - Figure Drawing: Design and Invention
A modern take on the subject. See also his blog.
Greg Albert - Basic Figure Drawing Techniques
Good book covering a wide range of techniques. There's a Kindle edition available too.
Douglas R. Graves - Life Drawing in Charcoal
A mass based approach to charcoal drawing. Truly interesting.
Doug Higgins - The Frank Reilly School of Art
At least the preview looks really cool.
ImagineFX Presents: Anatomy
Plenty of interesting information condensed. Ron Lemen covers various approaches to figure drawing. In addition there's information about animal anatomy by Marshall Vandruff.
Marshall Vandruff's collection
More books to read. :)
Process Junkie's collection of favorite books
Some of the books have been mentioned here. You'll find a few new ones there.

Courses and Lessons

Marshall Vandruff - Anatomy for Artists
Nice, streaming video lesson by Marshall Vandruff. There are some really nice insights, especially for beginners. Well worth the $20.
DrawingTutorialsOnline
Good collection of commercial video lessons. I haven't checked these out yet but at least the site looks nice.
Drawspace
A nice collection of lessons by Brenda Hoddinott, the author of "Drawing for Dummies".
Learn to Draw the Human Figure
Commercial video series by Riven Phoenix.
Analytical Figure Drawing
Student work blog.

Thursday, April 28, 2011

Why every programmer should know something about UX?

Helping people to achieve their goals is the sole reason why software is developed. Nobody wants to use software just for the sake of using it. There is always some concrete motivation behind the usage.

It is very easy to forget about this. This is something especially programmers are susceptible to. We see programs from entirely different perspective. We understand how they work internally. Whole outlook of the program may be almost coincidental and just a result of a need to expose some functionality we happen to need.

This is the very problem that leads to poor user experience (UX). Even though the program may be used to achieve some specific goals, it isn't quite optimized for that. Instead you'll have a jumble of functionality you are supposed to be able to use somehow to get your thing done. Welcome to a world of pain.

Tuesday, April 26, 2011

Testing Canvas API Calls

This post was inspired by this question at StackOverflow. Basically the author wanted to verify that certain calls have been made while using the HTML5 Canvas API. I came up with a little solution.

Wednesday, April 13, 2011

CSS Gradient Adapter Using RightJS

In case you checked out the source of yesterday's CSS gradient demos you probably came to the same conclusion as I. It was just friggin' ugly. A lot of duplication and room for error. Not a DRY solution at all...

Is there anything we can do about this? As it happens, yes. All we need to do is to develop a little adapter. It just converts to some nice, generic syntax to some CSS required by a browser we are currently dealing with.

I did this by extending RightJS's setStyle method. The implementation is not flawless and does not support all possible cases. It should give you enough idea for you to implement something similar.

In case you aren't too fond of handling this on the client side, you could try coming up with some sort of CSS preprocessor. Check out Sass for a good example.

I've set up a simple fiddle demonstrating this technique. Give it a go and let me know what you think. :)

Tuesday, April 12, 2011

CSS Gradient Fun - Rainbow + Overlay Gradients

You know what time it is? It's time for some CSS snippets. I've been working on a scalable color picker lately. CSS gradients provide an excellent way to handle the gradients needed.

Rainbow Gradient


Usually there's some kind of "hue" picker. You know, that rainbow kind of thing. If you have used CSS gradients before, this one's probably trivial for you. If nothing else, at least this one would make a really cheesy background for your site. :)


You can play around with the CSS at jsFiddle. The solution works both on Firefox and WebKit based browsers. I'm not too fond of the syntax. Hopefully they'll be able to merge it at some point. Writing a definition for each seems pretty wasteful.

There are some hacks around for Opera and IE as well. In case of Opera you might to utilize SVG. IE provides a special filter of its own.

Overlay Gradient


In addition we're going to need something to select color "saturation" and "value". Sometimes a circle (radial + circular gradient) is used for this. In this case I'll just settle using a box and handle blending needed there.


The gradient consists of three parts. There's a background color, vertical and horizontal gradients. They are composited together utilizing CSS z-index, opacity and absolute positioning.

As above you can find a sandbox at jsFiddle for this snippet as well.

Conclusion


I ported these solutions over from ColorJack picker. It uses Canvas to render the gradients but the idea is pretty much the same.

It's possible to merge these techniques with some other cool CSS tricks. If you come up with some cool gradient or something, let me know. :)

Wednesday, April 6, 2011

Overview of JavaScript Application Development - Case CanvasDraw

I've been doing some serious JavaScript development for around a year now. It started out with some innocent Harmony hacking at Spring. After Summer I received an offer I just could not pass.

I started developing CanvasDraw for Rate My Drawings somewhere around September. The application is currently at beta and close to a public release. Quite a few people have tried it out already.

During a recent seminar I wrote a paper about the application and its development. I hope it gives you some idea of what can be achieved with some effort. JavaScript isn't definitely a toy language.

The paper contains some very basic information about JavaScript and surrounding concepts. It also discusses RequireJS and RightJS briefly. If you have any questions, I'm willing to answer them at the comments section.

There's also a brief presentation available. The slides are in Finnish so it's likely you won't be able to understand them without some considerable effort. After all there are like six million people proficient in it. :)