var h_c = (q_b - q_a + r_a * p + (r_b + r_a) *
((p + q_a - w) / r_a - p)) /
(-r_b - r_b / r_a * c - c);
var h_b = (p + q_a - w) / r_a - p + (1 + c / r_a) * h_c;
var h_a = -p + h_c - h_b;
var w_c = c * h_c;
var w_ab = q_a + r_a * h_a;
perhaps true (maybe). but if the variables were named properly we would at least have a decent idea of what the expressions actually are - even if we can't then infer what they are for from that information.
imo that is precisely what a comment is for - explaining an algorithm or things that look unusual, not merely explaining what a variable is - which imo is precisely what a variable name is for.
Just read the paper here: http://l.yimg.com/j/assets/ipt/breaking-row-boundaries.pdf
It explains it nicely.
I'm working on a blog post about it. In the meantime you can look at other image layouts I wrote about: http://blog.vjeux.com/category/image/
It's http://blog.vjeux.com/feed, in case your feed reader doesn't do that for some reason.
Rather than having lots of weird image sizes dictate my layout, I decided to have my weird layout dictate my image sizes. The result was this:
https://www.mashape.com/stremor/automatic-image-crop-and-res...
Yes. This really does crop images for any aspect ratio. Automatically. Yes, if you try and make a picture that is just your face be 1080 tall and 90 wide it will likely choose just your nose. What do you want it to do in that scenario? this is meant for taking 4:3 and making them square, or 16:9 and making them 9:16, not for taking 16:9 and making it 1:4. But it will try its darnedest.
Now, add a face (and landscape) recognition to this, properly optimize, and get a (deserved) as-smart-and-powerful-as-google feeling down your spine :)
If you give it a pic with you off in the corner it will crop around you. If you give it a pic with a laptop sitting on the right third it will crop around that. It is pretty smart.
Somewhat related, I came across an interesting method to resize images called "seam carving". It uses a dynamic programming approach to remove rows or columns that seem uninteresting. The end result is that the important parts of the image are retained when the image is resized. The wikipedia page is fairly good: http://en.wikipedia.org/wiki/Seam_carving There are nice demos on Youtube as well: http://www.youtube.com/watch?v=6NcIJXTlugc Now imagine doing this on the front-end (might be possible now in real-time) and the layouts this would allow!
Like, in the browser?
Yes I mean in the browser. The convolution (edge-detection) is definitely possible in WebGL, and the dynamic programming algorithm probably is, so you could probably get sufficient performance in the browser to do this on multiple images in real time.
The linear model is much easier to parse since the stories are sorted. The grid model is not inherently worse, but they would need a better understanding of color to make it work. Maybe a bit less saturation to give prominence to the headlines?
Keep in mind though that some simple techniques that require(d) JavaScript can (now) be achieved with CSS only. I'm thinking about how to center vertically and horizontally a fix-sized box, or how to make an element take up the whole height of the viewport (without messing with the scrolling). I myself used to rely upon JavaScript calculations to retrieve dynamically the viewport's height, whereas the browser's rendering engine could actually achieve it way more efficiently and with only a couple of lines of CSS code.