# Transforms

Sharing a small page I cooked up to help people explore transformations - both the linear and the non-linear kind by drawing pictures and modifying them using transformations. This hack is in the spirit of the theme of this year’s Infinity festival at Pramati - where we have “Engaging the senses” as a theme. So, engage your senses to grasp the math of transformations.

For the impatient, here is the web page. However, you can also try out a few examples right here.

WARNING: Don’t write production code like the HTML+JS in that page. It is just a quick hack for illustrative purposes.

You’ll see a canvas area and a matrix display at the bottom right. Open up the
dev console and you can start putting in your own drawing by setting the global
`draw()`

function and using some provided drawing primitives like - `line`

,
`point`

, `circle`

, `grid`

and `curve`

. All changes update live.

To dive in …

Yoooos the soource Luuuke!

## Examples

A basic one first -

draw = () => { line(P(10,10),P(50,50)); } tx = Scale(2)

A more fun non-linear one -

tx = (p) => P(p.x + 0.003 * Math.cos(Math.PI*t) * p.y * p.y, p.y + 0.003 * Math.sin(Math.PI*t) * p.x * p.x) draw = () => { grid(30,30); circle(P(0,0), 140); }

## Concepts

A “transformation” is modelled as a function that maps a given point to another
point. You can write your own functions and use them. The inverse transformation
of built-in transformations can be accessed with the `.inverse`

property.

- To create a point, use
`P(x,y)`

. If`p`

is a variable holding a point, then`p.x`

and`p.y`

are x and y coordinates respectively.

## Globals

`draw`

is a zero-argument function that you can set to draw whatever figure you want to .. well, at least ones using the offered primitives.`tx`

is a global variable holding the transformation to be applied to your drawing.

In the JS console, just do `draw = () => { ... }`

to set the drawing function.

Also, you can just do `tx = Scale(10)`

, for example, to scale your drawing
by a factor of 10.

## Drawing primitives

`line(P(x1,y1),P(x2,y2))`

draws a line from $(x_1,y_1)$ to $(x_2,y_2)$`circle(P(cx,cy),r)`

draws a circle centered at $(x,y)$ with radius $r$.`point(x,y)`

draws a point at $(x,y)$.`grid(dx,dy)`

draws a grid with spacing given by $dx$ and $dy$.`lattice(xmin,ymin,xmax,ymax,func)`

calls`func`

over a lattice of points spanning $(x_{min},y_{min})-(x_{max},y_{max})$.- You can set the pen color for the primitives that follow by setting
`pen.color = 'blue'`

- You can set the pen thickness using
`pen.thickness = 5`

.

## Built-in transformations

`Linear(mxx,mxy,myx,myy)`

is a 2D matrix linear transformation.`Linear(mxx,mxy,myx,myy).inverse`

will be the inverse transformation of the first one.`Translate(dx,dy)`

shifts the drawing by $(dx,dy)$.`Rotate(Deg(degrees))`

or`Rotate(radians)`

is a rotation about the origin - positive angle = anti-clockwise.`Scale(s)`

scales by the factor $s$.`mul(T1,T2,...)`

creates the product of the transformations as though they were applied back to front on a point. The product transform’s inverse is also computed.

## Params

You can create dynamic parameters using `Param`

like below -

```
angle = Param("angle", Param.linear(-Math.PI, Math.PI))
tx = Rotate(angle)
draw = () => { line(P(10,10),P(50,50)); }
```

You’ll see a slider pop up at the top right part of the window, which you can use to dynamically rotate the figure.

## Advanced

You can create simple animations by writing your `draw()`

function to make use
of the variable `t`

which gives the current time in seconds relative to when the
page started. You can also create your own custom transform function which depends
on `t`

to make the global transformation time dependent.

Some of the primitive drawing functions have additional parameters set as
properties. For example, `line.divisions = 10`

will change the number of
divisions used to draw a line. Why should a line be broken up into smaller line
segments? That will become clear once you start playing around with non-linear
transformations.

Have fun!