Prev: Which CSS apply to <frameset> and <frame>?
Next: Form
From: Ben C on 22 Mar 2010 16:50
On 2010-03-22, Axel Dahmen <KeenToKnow(a)newsgroup.nospam> wrote:
>> You can't just add a new CSS property or property value for everything
>> you can think of, or there would be tens of millions of them in no time.
>
> Yes Ben, sure, absolutely agreed... But this function is different.
>
> I have counted 11 transformations functions in CSS already.

Apart from perspective, they can all be replaced by "matrix" anyway.

> They all could be easily replaced by this single function - well,
> except for rotate which would require additional trigonometry applied
> then.
>
> So this new function would not just be a "nice-to-have". It's
> basically the base function for all other functions. In fact, the
> other, existing, functions could easily be omitted and recreated in
> JavaScript. But not the other way around.

It's true that affine transformations are a subgroup of projective
transformations.

If you wanted to support 2D projective transformations then you could
work in 3D homogenous coordinates, and your proposed "perspective"
function could be one way of defining such a transformation.

Alternatively you could just specify a 3x3 matrix (for 2D) or a 4x4 one
(for 3D).

> So this function would not only (a) provide for more flexible usage,
> it would also (b) significantly simplify the CSS specification (if
> replacing the current function, but which is not my intention).
>
>
> Here are a few applications that one can't easily achieve with the
> current functionality:
>
> http://acko.net/blog/projective-texturing-with-canvas
> http://www.canvasdemos.com/2009/03/07/projective-texturing/
> http://tulrich.com/geekstuff/canvas/perspective.html

Those would be quite nice.
From: Axel Dahmen on 26 Mar 2010 19:28
Sorry for replying so late...

> Apart from perspective, they can all be replaced by "matrix" anyway.

I see...


> It's true that affine transformations are a subgroup of projective
> transformations.
>
> If you wanted to support 2D projective transformations then you could
> work in 3D homogenous coordinates, and your proposed "perspective"
> function could be one way of defining such a transformation.
>
> Alternatively you could just specify a 3x3 matrix (for 2D) or a 4x4 one
> (for 3D).

Well, actually I must admit that I don't know any technical details about
how these transformations are rendered at all.

But that's kind of my point: I don't know about how transformations are
calculated using matrices, so I suppose - with all due respect - that a
common web page designer won't know about how to deal with them as well.

The transformation I suggested would be easily predictable. That's its
advantage and beauty, I believe.


>> http://acko.net/blog/projective-texturing-with-canvas
>> http://www.canvasdemos.com/2009/03/07/projective-texturing/
>> http://tulrich.com/geekstuff/canvas/perspective.html
>
> Those would be quite nice.

Yeah, wouldn't it? I love the third one :)

Cheers,
Axel Dahmen

From: Ben C on 28 Mar 2010 13:23
On 2010-03-26, Axel Dahmen <KeenToKnow(a)newsgroup.nospam> wrote:
> Sorry for replying so late...
>
>> Apart from perspective, they can all be replaced by "matrix" anyway.
>
> I see...
>
>
>> It's true that affine transformations are a subgroup of projective
>> transformations.
>>
>> If you wanted to support 2D projective transformations then you could
>> work in 3D homogenous coordinates, and your proposed "perspective"
>> function could be one way of defining such a transformation.
>>
>> Alternatively you could just specify a 3x3 matrix (for 2D) or a 4x4 one
>> (for 3D).
>
> Well, actually I must admit that I don't know any technical details about
> how these transformations are rendered at all.
>
> But that's kind of my point: I don't know about how transformations are
> calculated using matrices, so I suppose - with all due respect - that a
> common web page designer won't know about how to deal with them as well.
>
> The transformation I suggested would be easily predictable. That's its
> advantage and beauty, I believe.

What you suggested is a way of representing a transformation, just as in
SVG for example, you can write rotate(20) rather than matrix(0.94, 0.34,
-0.34, 0.94, 0, 0). Both do the same thing (unless I got the numbers
wrong, but you get the idea), but rotate(20) is more intuitive.

So you'd do it the same way-- have 3x3 matrices for arbitrary projective
transformations in 2D, and then have your function as an alternative
intuitive way of constructing them.

As intuitive ways of constructing projective transforms go, I'd say it
looks not too bad.

But there are other reasons why computer graphics often limits itself to
affine transforms.

In particular a useful property of Beziers is that if you transform the
control points with affine transformations and then construct the curve
between the new points, you get the same curve as if you had constructed
it first with the untransformed points, then transformed every pixel,
but much more efficiently.

So this could be used in CSS to transform text (which is all Bezier
curves) and the usual shapes (rectangles mostly, with curved corners in
CSS3) very efficiently.

Of course it wouldn't work on embedded raster images, there you would
have to transform pixels or little tiles like your examples below do.
But this is all a bit more kludgey. It's much better to use pure vector
graphics for everything if you want these kind of effects.

>>> http://acko.net/blog/projective-texturing-with-canvas
>>> http://www.canvasdemos.com/2009/03/07/projective-texturing/
>>> http://tulrich.com/geekstuff/canvas/perspective.html
>>
>> Those would be quite nice.
>
> Yeah, wouldn't it? I love the third one :)
>
> Cheers,
> Axel Dahmen
First  |  Prev  | 
Pages: 1 2 3
Prev: Which CSS apply to <frameset> and <frame>?
Next: Form