Use Pluto (reactive notebook) with Makie (plotting) to showcase the Chord method for Optimization

Makie_Chord.jl

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

using Markdown
using InteractiveUtils

# ╔═╡ 6b2d70e0-f0c0-11ea-11b1-452aa45f043d
using WGLMakie, AbstractPlotting, JSServe, Colors

# ╔═╡ ce3effa2-f0c1-11ea-1dc5-6fb4da9951c0
using AbstractPlotting.MakieLayout

# ╔═╡ 7ede1446-f0c0-11ea-01bb-8189300303dd
using JSServe.DOM

# ╔═╡ 5daa5b7a-f0c2-11ea-0111-d3cd1abb8097
using ForwardDiff

# ╔═╡ 82ddc244-f0c0-11ea-2545-5ffae20ed534
using LinearAlgebra

# ╔═╡ 95068cf8-f0c0-11ea-181a-b30392382864
begin
	fx(x,y) = 0.7 - cos((x-y-2)/2) * exp(-y^2/5)
	fy(x,y) = tanh((x + y)/5)
	f(x,y) = [fx(x,y), fy(x,y)]
	f(x) = f(x[1], x[2])
end

# ╔═╡ a14abfac-f0c0-11ea-14a0-c14d9e963aaf
Df(x) = ForwardDiff.jacobian(f, x)

# ╔═╡ a7a90c8c-f0c0-11ea-0c94-65c71ba7393d
begin
	xs = range(-5, 6, length=50)
	ys = xs .+ 0.001
	X = [x for x in xs, y in ys]
	Y = [y for x in xs, y in ys]
	md"Makes the 2D mesh"
end

# ╔═╡ abebbb8c-f0c0-11ea-0d46-9d7ac231f415
begin
	Fx = Fy = DFxx = DFxy = DFyx = DFyy = zeros(size(X))
	for (i,x) in enumerate(xs), (j,y) in enumerate(ys) 
  		C = [x, y]
  		fC = f(C)
  		Fx[i,j] = fC[1]
  		Fy[i,j] = fC[2]
  		DfC = Df(C)
  		DFxx[i,j] = DfC[1,1]
  		DFxy[i,j] = DfC[1,2]
  		DFyx[i,j] = DfC[2,1]
  		DFyy[i,j] = DfC[2,2]
	end
	md"Calculate functions at each point fo the grid"
end

# ╔═╡ 939c2cc4-f0e3-11ea-30be-271c89590b44
md"Position of Choord coordinate / starting point."

# ╔═╡ 6e35ce12-f0d5-11ea-0585-f1e2805efa3e
begin
	x₀_slider = JSServe.Slider(range(-5, 5, length=101))
	y₀_slider = JSServe.Slider(range(-5, 5, length=101))
	X₀ = map(x -> [x], x₀_slider)
	Y₀ = map(x -> [x], y₀_slider)
	C₀ = map((x,y)->[x,y], x₀_slider, y₀_slider)
	Nf₀ = map((x,y)->[norm(f([x,y]))], x₀_slider, y₀_slider)
	D₀ = map((x,y)->Df([x,y]), x₀_slider, y₀_slider)
	Chord_fun = map((x,y) -> ((a,b) -> Point2(Df([x,y]) \ -f(a,b))), x₀_slider, y₀_slider)
	JSServe.with_session() do s, r
		return DOM.div(x₀_slider, y₀_slider)
	end
end

# ╔═╡ f9ea08fc-f0e3-11ea-0db8-43a84084bed7
begin
	s2, l2 = layoutscene(resolution=(700,700))
	
	ax5 = l2[1:2,1] = LAxis(s2, title="Choord and Newton streamlines")
	hm5 = heatmap!(ax5, xs, ys, norm.(f.(X,Y)), colormap=cgrad(:grays, rev=true))
	contour!(ax5, xs, ys, fx.(X,Y), levels=[0], color=:black)
	contour!(ax5, xs, ys, fy.(X,Y), levels=[0], color=:black)
	spa = streamplot!(ax5, (x,y) -> Point2(Df([x,y]) \ -f(x,y)), xs, ys, colormap=:blues, arrow_size = 0.2)
	spb = streamplot!(ax5, Chord_fun, xs, ys, colormap=:reds, arrow_size = 0.2)
	scatter!(ax5, X₀, Y₀, marker='•', color=:white, markersize=24)
	scatter!(ax5, X₀, Y₀, marker='◎', color=:black, markersize=20)
	
	s2
end

# ╔═╡ a48454a8-f0c0-11ea-2b24-ff4191d7ea1c
begin
	s1, l1 = layoutscene(resolution=(700,700))
	
	ax1 = l1[1,1] = LAxis(s1, title="f₁(x,y)")
	hm1 = heatmap!(ax1, xs, ys, fx.(X,Y), colormap=:diverging_bkr_55_10_c35_n256, colorrange=(-1,1))
	hidexdecorations!(ax1)
	
	ax2 = l1[1,2] = LAxis(s1, title="f₂(x,y)")
	heatmap!(ax2, xs, ys, fy.(X,Y), colormap=:diverging_bkr_55_10_c35_n256, colorrange=(-1,1))
	cbar1 = l1[1,3] = LColorbar(s1, hm1)
	cbar1.width = 20
	hidedecorations!(ax2)

	ax3 = l1[2,1] = LAxis(s1, title="zeros")
	contour!(ax3, xs, ys, fx.(X,Y), levels=[0], color=:black)
	contour!(ax3, xs, ys, fy.(X,Y), levels=[0], color=:red)
	
	ax4 = l1[2,2] = LAxis(s1, title="|f(x,y)| = √(f₁(x,y)²+f₂(x,y)²)")
	hm4 = heatmap!(ax4, xs, ys, norm.(f.(X,Y)), colormap=:diverging_rainbow_bgymr_45_85_c67_n256)
	scatter!(ax4, X₀, Y₀, marker='⊕', color=:white)
	hideydecorations!(ax4)

	cbar4 = l1[2,3] = LColorbar(s1, hm4)
	cbar4.width = 20
	
	s1
end

# ╔═╡ c0002710-f0e4-11ea-1e80-1532eb92c2e9
begin
	plt = wireframe(xs, ys, norm.(f.(X,Y)), resolution=(500,500), title="|f|", linewidth=20)
	scatter!(plt, X₀, Y₀, Nf₀, marker='o', color=:red, markersize=200)
	plt
end

# ╔═╡ Cell order:
# ╠═6b2d70e0-f0c0-11ea-11b1-452aa45f043d
# ╠═ce3effa2-f0c1-11ea-1dc5-6fb4da9951c0
# ╠═7ede1446-f0c0-11ea-01bb-8189300303dd
# ╠═5daa5b7a-f0c2-11ea-0111-d3cd1abb8097
# ╠═82ddc244-f0c0-11ea-2545-5ffae20ed534
# ╟─95068cf8-f0c0-11ea-181a-b30392382864
# ╟─a14abfac-f0c0-11ea-14a0-c14d9e963aaf
# ╟─a7a90c8c-f0c0-11ea-0c94-65c71ba7393d
# ╟─abebbb8c-f0c0-11ea-0d46-9d7ac231f415
# ╟─939c2cc4-f0e3-11ea-30be-271c89590b44
# ╟─6e35ce12-f0d5-11ea-0585-f1e2805efa3e
# ╟─f9ea08fc-f0e3-11ea-0db8-43a84084bed7
# ╟─a48454a8-f0c0-11ea-2b24-ff4191d7ea1c
# ╟─c0002710-f0e4-11ea-1e80-1532eb92c2e9