Animation.jl

### A Pluto.jl notebook ###
# v0.11.12

using Markdown
using InteractiveUtils

# ╔═╡ e9078d86-f131-11ea-2fb5-275dab3b0323
begin
	import Pkg
	Pkg.activate(mktempdir())
end

# ╔═╡ f0029054-f131-11ea-2510-0f81ba3abaa0
begin
	Pkg.add(["Images", "ImageIO", "ImageMagick"])
	using Images
end

# ╔═╡ fc852b52-f131-11ea-1caf-17c0da3dca45
begin
	
	struct Animation
		slides
		fps::Number
	end
	Animation(slides; fps=10) = Animation(slides, fps)
	
	
	function Base.show(io::IO, ::MIME"text/html", animation::Animation)
		# This code is UGLY and it does some NASTY tricks and please don't take inspiration from it - it will not work in a couple of months stop reading this please
		# xoxo fonsi

		id = String(rand('a':'z', 10))
		Markdown.withtag(io, :div, :class=>"plutoui_slideshow", :id=>id) do
			for slide in animation.slides
				Markdown.withtag(io, :div, :class=>"plutoui_slide") do
					PlutoRunner.show_richest(io, slide, onlyhtml=true)
				end
			end
		end
		print(io, """
			<script>
			const slideshow = document.querySelector("#$(id)")
			const slides = Array.from(slideshow.children)
			
			slideshow.style.height = Math.max(...slides.map(s => s.scrollHeight)) + "px"
			var i = 0
			var handler = 0
			handler = setInterval(() => {
				if(!document.body.contains(slideshow)) {
					clearInterval(handler)
				}
				slides.forEach(s => s.style.display = "none")
				slides[i % slides.length].style.display = ""
				i++
			}, $(1000.0 / animation.fps))
			</script>
			
			""")
	end
end

# ╔═╡ 0ef8106a-f132-11ea-178a-19b0d521cf59
cool = [md"# Hello", md"# World", 
	html"how",
	html"<br>are",
	html"<br><br>you",
	html"<br><br><br>doing?",
	Gray.(fill(0.0, (100,100))),
	[Gray.(fill(0.1 * i, (100i,100i))) for i in 1:5]...
	]

# ╔═╡ 2832d92e-f133-11ea-1f04-d51d3cf072b1
Animation(cool; fps=5)

# ╔═╡ 1c337c36-f134-11ea-3063-71f3c442e041
load(download("https://fonsp.com/img/doggoSmall.jpg?raw=true"))

# ╔═╡ d2c77070-f133-11ea-1141-ede5ff754fe2
Gray.(fill(0.2, (200,211)))

# ╔═╡ Cell order:
# ╠═e9078d86-f131-11ea-2fb5-275dab3b0323
# ╠═f0029054-f131-11ea-2510-0f81ba3abaa0
# ╠═fc852b52-f131-11ea-1caf-17c0da3dca45
# ╠═2832d92e-f133-11ea-1f04-d51d3cf072b1
# ╠═0ef8106a-f132-11ea-178a-19b0d521cf59
# ╠═1c337c36-f134-11ea-3063-71f3c442e041
# ╠═d2c77070-f133-11ea-1141-ede5ff754fe2