Experimentes Visuais



;; http://blog.klipse.tech/omnibus/2017/04/23/omnibus-1-wallpaper.html

(defn draw-pixel! [canvas x y scale color]
(let [ctx (.getContext canvas "2d")]
(set! (.-fillStyle ctx) color)
(.fillRect ctx (* scale x) (* scale y) scale scale)))

(defn reset-canvas! [canvas]
(let [ctx (.getContext canvas "2d")]
(set! (.-fillStyle ctx) "white")
(.fillRect ctx 0 0 (.-width canvas) (.-height canvas))))


(let [canv (. js/document getElementById "draw1")]
(reset-canvas! canv)
(doseq [x (range 400)]
(draw-pixel! canv x x 2 "black")  )  )

Graphing a Function





(defn xys [n f]
(let [xs (range 400)
ys (map f xs)]
(zip xs ys)))

(defn mostrar! [f]
(let [xs (range 400)
ys (map f xs)
xys (map vector xs ys)
canv (. js/document getElementById "draw2")
]
(reset-canvas! canv)
(doseq [[x y] xys]
(draw-pixel! canv x y 2 "black")  )  )
)


(mostrar! #(/ %1 2))

Mosaico



(let [
xys (for [x (range 150)
y (range 80)]
[x y])
cols (cycle '("red" "darkblue" "yellow" "lightblue" "green" "purple" "aqua" "limegreen"))
xycs (map vector xys cols)
canv (. js/document getElementById "draw3")
]
(do
(reset-canvas! canv)
(doseq [[[x y] c] xycs]
(draw-pixel! canv x y 5 c) )
)
)

Exercício 7

7.1 - O que que 'e o estrutura de dados que represente este imagem
7.2 - Modar o programa de "mosaico" pra fazer um padrao "checkerboard" :

Aqui

7.3 - Modar o programa de "mosaico" pra fazer um padrao mais interesante.
7.4 - Escreve um funciao "histograma" que receber uma lista de dados tipo '(["maca" 43023] ["pera" 14389] ["banana" 866437] ... ) e desenha um histograma, ordenada pela o valor numerico. (Como escreve texto no canvas : https://www.w3schools.com/graphics/canvas_text.asp )

Pode usar esta canvas (chamada "draw4")

Vai ao Pagina 5