# Joy Live Coding

## Examples

#### [Sierpinski Triangle](https://en.wikipedia.org/wiki/Sierpi%C5%84ski_triangle)


#### Staircase


#### [Tessellation](https://en.wikipedia.org/wiki/Tessellation)

This will give you a random pattern each time.


#### Pointy flower

This one is made entirely with rectangles.


## Live Coding Environment

(0, 0) is the center of the canvas. The default canvas size is 500, 500.

### Links:
- [kaustubh.page/joy](https://kaustubh.page/joy/)
- Backup: [ocaml-joy.netlify.app](https://ocaml-joy.netlify.app/)

## Basic Shapes

let s1 = circle 50;;
show [s1];;
let s2 = rectangle 100 100;;
show [s2];;


> ### Clearing the canvas
>
> To reset the canvas to blank again, we call the `clear ()` function.
>
> ```ocaml
> clear ();;
> ```

## Transformations

### Translate

let c1 = circle 50;;
let c2 = circle 50 |> translate 100 0;;
let c3 = circle 50 |> translate (-100) 0;;
show [c1; c2; c3];;


#### Exercise

##### Four circles pattern


##### Olympic Rings

> Hints:
> - use radius = 50 for all circles
> - left-most circle is centered at (-110, 0)
> - bottom-left circle is centered at (-55, 0)


### Rotate

let s1 = rectangle 100 100;;
let s2 = rectangle 100 100 |> rotate 45;;
show [s1; s2];;


### Scale

let s1 = rectangle 100 100;;
let s2 = rectangle 100 100 |> scale 2.0;;
let s3 = rectangle 100 100 |> scale 0.5;;
show [s1; s2; s3];;


### Combining Transformations

let r1 = rectangle 200 200;;
let r2 = r1 |> rotate 45 |> scale (1.0 /. Float.sqrt(2.0));;
show [r1; r2];;


## Combining shapes

With `complex` type

let c1 = circle 50;;
let c2 = circle 100;;
let donut = complex [c1; c2];;
show [donut];;


### Exercise

* Create a 4 donuts pattern

## Higher Order Transformations

let c1 = circle ~c:{x = (-100.); y = 50.} 50;;
let row = c1 |> repeat 10 (translate 20 0);;
show [row];;


let l1 = line {x = 100. ; y = 0.};;
let spokes = l1 |> repeat 20 (rotate 18);;
show [spokes];;


let r1 = rectangle 100 100;;
let spin1 = r1 |> repeat 18 (rotate 10);;
show [ spin1 ];;


let r1 = rectangle 300 300;;
let spin2 = r1 |> repeat 72 (compose (rotate 5) (scale 0.92));;
show [ spin2 ];;


**Colours**

let c1 = circle 50 |> with_stroke blue;;
show [c1];;
let c1 = circle 50 |> with_fill red;;

Example with colours:

let pink = rgb 255 182 193;;
let r1 = rectangle 200 200 |> with_fill pink |> with_stroke pink;;
let r1_s = r1 |> repeat 10 (rotate 18);;
let tomato = rgb 255 99 71;;
let r2 = rectangle 175 175 |> with_fill tomato |> with_stroke tomato;;
let r2_s = r2 |> rotate 9 |> repeat 10 (rotate 18);;
let r_blue = rgb 65 105 225;;
let r3 = rectangle 153 153 |> with_fill r_blue |> with_stroke r_blue;;
let r3_s = r3 |> rotate 18 |> repeat 10 (rotate 18);;
show [r1_s; r2_s; r3_s];;

**Spiral**

let c1 = circle ~c:{x = 100.; y = 0.} 50;;
let shape = c1 |> repeat (36*4) (compose (rotate 10) (scale 0.97));;

**Sierpinski Triangle**

let mid (p1: float point) (p2: float point) =
  let find_nearest n = Float.round n |> int_of_float in
  point (find_nearest ((p1.x +. p2.x) /. 2.)) (find_nearest ((p1.y +. p2.y) /. 2.))

let rec sierpinski degree points =
  let t = polygon points in
  show [t];
  let p = Array.of_list points in
  if degree > 0 then
    begin
      sierpinski (degree - 1) [p.(0); mid p.(0) p.(1); mid p.(0) p.(2)];
      sierpinski (degree - 1) [p.(1); mid p.(0) p.(1); mid p.(1) p.(2)];
      sierpinski (degree - 1) [p.(2); mid p.(2) p.(1); mid p.(0) p.(2)]
    end
  else
    ()

## Lambda Functions

let id = fun x -> x;;
id 10;; (* int : 10 *)

let square = fun x -> x * x;;
square 5;; (* int : 25 *)

They can be used without naming them, like:

List.init 10 (fun i -> i + 1);; (* [1; 2; 3; 4; 5; 6; 7; 8; 9; 10] *)

## map-filter

**map**

let multiples_of_fifty =
    List.init 9 (fun i -> i)  (* [0; 1; 2; 3; 4; 5] *)
    |> List.map (fun x -> x * 50);;  (* [0; 50; 100; 150; 200] *)

let concentric_circles =
    multiples_of_fifty |> List.map (fun r -> circle r);;

show concentric_circles;;

**filter**

let multiples_of_hundred =
    multiples_of_fifty |> List.filter (fun x -> x mod 100 = 0);;

## Tessellation

let tessellate tile_size tile_fn =
  let n_tiles = 500 / tile_size in
  let tile_indices = List.init n_tiles (fun i -> i) in
  let xys =
    tile_indices
    |> List.map (fun x -> List.map (fun y -> (x, y)) tile_indices)
    |> List.flatten
  in
  let shrink_factor = (float_of_int tile_size) /. 500.0 in
  let move_factor_fn = fun x_or_y -> x_or_y * tile_size + tile_size / 2 - 250 in
  let tessellation =
    xys
    |> List.map (fun (x, y) ->
        tile_fn x y
        |> scale shrink_factor
        |> translate (move_factor_fn x) (move_factor_fn y))
    |> complex
  in
  show [ tessellation ];;

## Related explorations

- `fold` operation https://cs3110.github.io/textbook/chapters/hop/fold.html