Þ ¥bonds€¬cell_results‰Ù$7ff9aa7e-e603-11ea-1955-c7907182b1ecŠ¦queuedÂ¤logs�§runningÂ¦output†¤body‚£msgÙ=MethodError: no method matching getindex(::Missing, ::String)ªstacktrace“Œªcall_shortÙ0unwrap_js_image_data(raw_js_image_data::Missing)§inlinedÂ£urlÙ”https://github.com/fonsp/disorganised-mess/tree/6d5f6e46c196925a19e151358b6656510197d2e1//drawoncanvas.jl#==#a5353288-e601-11ea-09cc-5d049ce1bc93#L1¤pathÙm/home/runner/work/disorganised-mess/disorganised-mess/drawoncanvas.jl#==#a5353288-e601-11ea-09cc-5d049ce1bc93®source_packageÀ¤callÙ0unwrap_js_image_data(raw_js_image_data::Missing)ªlinfo_type³Core.MethodInstance¤line¤fileÙ7drawoncanvas.jl#==#a5353288-e601-11ea-09cc-5d049ce1bc93¤func´unwrap_js_image_data­parent_moduleÀ¦from_cÂŒªcall_shortÙ5process_raw_js_image_data(raw_js_image_data::Missing)§inlinedÂ£urlÙ”https://github.com/fonsp/disorganised-mess/tree/6d5f6e46c196925a19e151358b6656510197d2e1//drawoncanvas.jl#==#fb5112f0-e605-11ea-2f00-6d621a6c36a1#L1¤pathÙm/home/runner/work/disorganised-mess/disorganised-mess/drawoncanvas.jl#==#fb5112f0-e605-11ea-2f00-6d621a6c36a1®source_packageÀ¤callÙ5process_raw_js_image_data(raw_js_image_data::Missing)ªlinfo_type³Core.MethodInstance¤line¤fileÙ7drawoncanvas.jl#==#fb5112f0-e605-11ea-2f00-6d621a6c36a1¤func¹process_raw_js_image_data­parent_moduleÀ¦from_cÂŒªcall_short¯top-level scope§inlinedÃ£urlÀ¤pathÙm/home/runner/work/disorganised-mess/disorganised-mess/drawoncanvas.jl#==#7ff9aa7e-e603-11ea-1955-c7907182b1ec®source_packageÀ¤call¯top-level scopeªlinfo_type§Nothing¤line¤fileÙ7drawoncanvas.jl#==#7ff9aa7e-e603-11ea-1955-c7907182b1ec¤func»##function_wrapped_cell#313­parent_moduleÀ¦from_cÂ¤mimeÙ'application/vnd.pluto.stacktrace+object¬rootassigneeÀ²last_run_timestampËAÚË&(°persist_js_stateÂ·has_pluto_hook_featuresÂ§cell_idÙ$7ff9aa7e-e603-11ea-1955-c7907182b1ec¹depends_on_disabled_cellsÂ§runtimeÀµpublished_object_keys�¸depends_on_skipped_cellsÂ§erroredÃÙ$46a589f4-e604-11ea-345f-397b1b0c4f80Š¦queuedÂ¤logs�§runningÂ¦output†¤bodyÙ]<bond def="n" unique_id="skBz7dI1WJPv"><input type='range' min='1' max='20' value='1'></bond>¤mime©text/html¬rootassigneeÀ²last_run_timestampËAÚÊwãÎ°persist_js_stateÂ·has_pluto_hook_featuresÂ§cell_idÙ$46a589f4-e604-11ea-345f-397b1b0c4f80¹depends_on_disabled_cellsÂ§runtimeÎÞµpublished_object_keys�¸depends_on_skipped_cellsÂ§erroredÂÙ$a5353288-e601-11ea-09cc-5d049ce1bc93Š¦queuedÂ¤logs�§runningÂ¦output†¤bodyÙ5unwrap_js_image_data (generic function with 1 method)¤mimeªtext/plain¬rootassigneeÀ²last_run_timestampËAÚÊ�zt°persist_js_stateÂ·has_pluto_hook_featuresÂ§cell_idÙ$a5353288-e601-11ea-09cc-5d049ce1bc93¹depends_on_disabled_cellsÂ§runtimeÎ Vÿµpublished_object_keys�¸depends_on_skipped_cellsÂ§erroredÂÙ$4dea78e4-e603-11ea-395c-a34b645dba9eŠ¦queuedÂ¤logs�§runningÂ¦output†¤body ¤mimeªtext/plain¬rootassigneeÀ²last_run_timestampËAÚÊÂv°persist_js_stateÂ·has_pluto_hook_featuresÂ§cell_idÙ$4dea78e4-e603-11ea-395c-a34b645dba9e¹depends_on_disabled_cellsÂ§runtimeÎ 'Žµpublished_object_keys�¸depends_on_skipped_cellsÂ§erroredÂÙ$7f4b0e1e-7f16-11ea-02d3-7955921a70bdŠ¦queuedÂ¤logs�§runningÂ¦output†¤bodyÚg<bond def="img" unique_id="vuTSe//0ouqf"><canvas width="200" height="200" style="position: relative; display: block;"></canvas>
<button>Clear</button>

<script>
const canvas = this.querySelector("canvas")
const button = this.querySelector("button")
const ctx = canvas.getContext("2d")

function send_image(){
	// ðŸ�¸ We send the value back to Julia ðŸ�¸ //
	canvas.value = {
		width: 200,
		height: 200,
		data: ctx.getImageData(0,0,200,200).data,
	}
	canvas.dispatchEvent(new CustomEvent("input"))
}

var prev_pos = [80, 40]

function clear(){
	ctx.fillStyle = '#ffecec'
	ctx.fillRect(0, 0, 200, 200)

	send_image()
}
clear()

function onmove(e){
	const new_pos = [e.layerX, e.layerY]
	ctx.lineTo(...new_pos)
	ctx.stroke()
	prev_pos = new_pos

	send_image()
}

canvas.onmousedown = e => {
	prev_pos = [e.layerX, e.layerY]
	ctx.strokeStyle = '#003d6d'
	ctx.lineWidth = 5
	ctx.beginPath()
	ctx.moveTo(...prev_pos)
	canvas.onmousemove = onmove
}

button.onclick = clear

canvas.onmouseup = e => {
	canvas.onmousemove = null
}

// Fire a fake mousemoveevent to show something
onmove({layerX: 130, layerY: 160})

</script>
</bond>¤mime©text/html¬rootassigneeÀ²last_run_timestampËAÚÊ~ŸÓ°persist_js_stateÂ·has_pluto_hook_featuresÂ§cell_idÙ$7f4b0e1e-7f16-11ea-02d3-7955921a70bd¹depends_on_disabled_cellsÂ§runtimeÎŠ21µpublished_object_keys�¸depends_on_skipped_cellsÂ§erroredÂÙ$fb5112f0-e605-11ea-2f00-6d621a6c36a1Š¦queuedÂ¤logs�§runningÂ¦output†¤bodyÙ:process_raw_js_image_data (generic function with 1 method)¤mimeªtext/plain¬rootassigneeÀ²last_run_timestampËAÚÊ™u°persist_js_stateÂ·has_pluto_hook_featuresÂ§cell_idÙ$fb5112f0-e605-11ea-2f00-6d621a6c36a1¹depends_on_disabled_cellsÂ§runtimeÎ µpublished_object_keys�¸depends_on_skipped_cellsÂ§erroredÂÙ$3d9d9c80-e603-11ea-3845-cf9ee612316fŠ¦queuedÂ¤logs�§runningÂ¦output†¤bodyÙ-svd_compress (generic function with 1 method)¤mimeªtext/plain¬rootassigneeÀ²last_run_timestampËAÚÊ0{°persist_js_stateÂ·has_pluto_hook_featuresÂ§cell_idÙ$3d9d9c80-e603-11ea-3845-cf9ee612316f¹depends_on_disabled_cellsÂ§runtimeÎ êµpublished_object_keys�¸depends_on_skipped_cellsÂ§erroredÂÙ$548722e2-e601-11ea-3a1f-770d7456c77cŠ¦queuedÂ¤logs‘ˆ¤lineÿ£msg’Ù@[32m[1m  Activating[22m[39m new project at `/tmp/jl_5hzq8y`
ªtext/plain§cell_idÙ$548722e2-e601-11ea-3a1f-770d7456c77c¦kwargs�¢id´PlutoRunner_d1acb81e¤fileÙP/home/runner/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/io/stdout.jl¥group¦stdout¥level®LogLevel(-555)§runningÂ¦output†¤body ¤mimeªtext/plain¬rootassigneeÀ²last_run_timestampËAÚÇ·/�°persist_js_stateÂ·has_pluto_hook_featuresÂ§cell_idÙ$548722e2-e601-11ea-3a1f-770d7456c77c¹depends_on_disabled_cellsÂ§runtimeÎÁµpublished_object_keys�¸depends_on_skipped_cellsÂ§erroredÂÙ$8f3a3e06-e601-11ea-201d-23a204daa10fŠ¦queuedÂ¤logs‘ˆ¤lineÿ£msg’Ú.à[32m[1m    Updating[22m[39m registry at `~/.julia/registries/General.toml`
[32m[1m   Resolving[22m[39m package versions...
[32m[1m    Updating[22m[39m `/tmp/jl_5hzq8y/Project.toml`
 [90m [82e4d734] [39m[92m+ ImageIO v0.6.9[39m
 [90m [6218d12a] [39m[92m+ ImageMagick v1.4.2[39m
 [90m [916415d5] [39m[92m+ Images v0.26.2[39m
[32m[1m    Updating[22m[39m `/tmp/jl_5hzq8y/Manifest.toml`
 [90m [621f4979] [39m[92m+ AbstractFFTs v1.5.0[39m
 [90m [79e6a3ab] [39m[92m+ Adapt v3.7.2[39m
 [90m [66dad0bd] [39m[92m+ AliasTables v1.1.3[39m
 [90m [ec485272] [39m[92m+ ArnoldiMethod v0.4.0[39m
 [90m [4fba245c] [39m[92m+ ArrayInterface v7.5.1[39m
 [90m [13072b0f] [39m[92m+ AxisAlgorithms v1.1.0[39m
 [90m [39de3d68] [39m[92m+ AxisArrays v0.4.7[39m
 [90m [62783981] [39m[92m+ BitTwiddlingConvenienceFunctions v0.1.6[39m
 [90m [fa961155] [39m[92m+ CEnum v0.5.0[39m
 [90m [2a0fbf3d] [39m[92m+ CPUSummary v0.2.6[39m
 [90m [aafaddc9] [39m[92m+ CatIndices v0.2.2[39m
 [90m [d360d2e6] [39m[92m+ ChainRulesCore v1.25.1[39m
 [90m [9e997f8a] [39m[92m+ ChangesOfVariables v0.1.10[39m
 [90m [fb6a15b2] [39m[92m+ CloseOpenIntervals v0.1.13[39m
 [90m [aaaa29a8] [39m[92m+ Clustering v0.15.8[39m
 [90m [35d6a980] [39m[92m+ ColorSchemes v3.29.0[39m
 [90m [3da002f7] [39m[92m+ ColorTypes v0.12.1[39m
 [90m [c3611d14] [39m[92m+ ColorVectorSpace v0.11.0[39m
 [90m [5ae59095] [39m[92m+ Colors v0.13.1[39m
 [90m [bbf7d656] [39m[92m+ CommonSubexpressions v0.3.1[39m
 [90m [34da2185] [39m[92m+ Compat v4.16.0[39m
 [90m [ed09eef8] [39m[92m+ ComputationalResources v0.3.2[39m
 [90m [187b0558] [39m[92m+ ConstructionBase v1.5.8[39m
 [90m [150eb455] [39m[92m+ CoordinateTransformations v0.6.3[39m
 [90m [adafc99b] [39m[92m+ CpuId v0.3.1[39m
 [90m [dc8bdbbb] [39m[92m+ CustomUnitRanges v1.0.2[39m
 [90m [9a962f9c] [39m[92m+ DataAPI v1.16.0[39m
 [90m [864edb3b] [39m[92m+ DataStructures v0.18.22[39m
 [90m [163ba53b] [39m[92m+ DiffResults v1.1.0[39m
 [90m [b552c78f] [39m[92m+ DiffRules v1.15.1[39m
 [90m [b4f34e82] [39m[92m+ Distances v0.10.12[39m
 [90m [ffbed154] [39m[92m+ DocStringExtensions v0.9.5[39m
 [90m [4f61f5a4] [39m[92m+ FFTViews v0.3.2[39m
 [90m [7a1cc6ca] [39m[92m+ FFTW v1.9.0[39m
 [90m [5789e2e9] [39m[92m+ FileIO v1.17.0[39m
 [90m [53c48c17] [39m[92m+ FixedPointNumbers v0.8.5[39m
 [90m [f6369f11] [39m[92m+ ForwardDiff v1.0.1[39m
 [90m [a2bd30eb] [39m[92m+ Graphics v1.1.3[39m
 [90m [86223c79] [39m[92m+ Graphs v1.12.1[39m
 [90m [2c695a8d] [39m[92m+ HistogramThresholding v0.3.1[39m
 [90m [3e5b6fbb] [39m[92m+ HostCPUFeatures v0.1.17[39m
 [90m [615f187c] [39m[92m+ IfElse v0.1.1[39m
 [90m [2803e5a7] [39m[92m+ ImageAxes v0.6.12[39m
 [90m [c817782e] [39m[92m+ ImageBase v0.1.7[39m
 [90m [cbc4b850] [39m[92m+ ImageBinarization v0.3.1[39m
 [90m [f332f351] [39m[92m+ ImageContrastAdjustment v0.3.12[39m
 [90m [a09fc81d] [39m[92m+ ImageCore v0.10.5[39m
 [90m [89d5987c] [39m[92m+ ImageCorners v0.1.3[39m
 [90m [51556ac3] [39m[92m+ ImageDistances v0.2.17[39m
 [90m [6a3955dd] [39m[92m+ ImageFiltering v0.7.10[39m
 [90m [82e4d734] [39m[92m+ ImageIO v0.6.9[39m
 [90m [6218d12a] [39m[92m+ ImageMagick v1.4.2[39m
 [90m [bc367c6b] [39m[92m+ ImageMetadata v0.9.10[39m
 [90m [787d08f9] [39m[92m+ ImageMorphology v0.4.6[39m
 [90m [2996bd0c] [39m[92m+ ImageQualityIndexes v0.3.7[39m
 [90m [80713f31] [39m[92m+ ImageSegmentation v1.9.0[39m
 [90m [4e3cecfd] [39m[92m+ ImageShow v0.3.8[39m
 [90m [02fcd773] [39m[92m+ ImageTransformations v0.10.2[39m
 [90m [916415d5] [39m[92m+ Images v0.26.2[39m
 [90m [9b13fd28] [39m[92m+ IndirectArrays v1.0.0[39m
 [90m [d25df0c9] [39m[92m+ Inflate v0.1.5[39m
 [90m [1d092043] [39m[92m+ IntegralArrays v0.1.6[39m
 [90m [a98d9a8b] [39m[92m+ Interpolations v0.15.1[39m
 [90m [8197267c] [39m[92m+ IntervalSets v0.7.11[39m
 [90m [3587e190] [39m[92m+ InverseFunctions v0.1.17[39m
 [90m [92d709cd] [39m[92m+ IrrationalConstants v0.2.4[39m
 [90m [c8e1da08] [39m[92m+ IterTools v1.4.0[39m
 [90m [033835bb] [39m[92m+ JLD2 v0.5.12[39m
 [90m [692b3bcd] [39m[92m+ JLLWrappers v1.7.0[39m
 [90m [b835a17e] [39m[92m+ JpegTurbo v0.1.6[39m
 [90m [10f19ff3] [39m[92m+ LayoutPointers v0.1.17[39m
 [90m [8cdb02fc] [39m[92m+ LazyModules v0.3.1[39m
 [90m [2ab3a3ac] [39m[92m+ LogExpFunctions v0.3.28[39m
 [90m [bdcacae8] [39m[92m+ LoopVectorization v0.12.172[39m
 [90m [1914dd2f] [39m[92m+ MacroTools v0.5.16[39m
 [90m [d125e4d3] [39m[92m+ ManualMemory v0.1.8[39m
 [90m [dbb5928d] [39m[92m+ MappedArrays v0.4.2[39m
 [90m [626554b9] [39m[92m+ MetaGraphs v0.8.0[39m
 [90m [e1d29d7a] [39m[92m+ Missings v1.2.0[39m
 [90m [e94cdb99] [39m[92m+ MosaicViews v0.3.4[39m
 [90m [77ba4419] [39m[92m+ NaNMath v1.0.3[39m
 [90m [b8a86587] [39m[92m+ NearestNeighbors v0.4.21[39m
 [90m [f09324ee] [39m[92m+ Netpbm v1.1.1[39m
 [90m [6fe1bfb0] [39m[92m+ OffsetArrays v1.17.0[39m
 [90m [52e1d378] [39m[92m+ OpenEXR v0.3.3[39m
 [90m [bac558e1] [39m[92m+ OrderedCollections v1.8.1[39m
 [90m [f57f5aa1] [39m[92m+ PNGFiles v0.4.4[39m
 [90m [5432bcbf] [39m[92m+ PaddedViews v0.5.12[39m
 [90m [d96e819e] [39m[92m+ Parameters v0.12.3[39m
 [90m [eebad327] [39m[92m+ PkgVersion v0.3.3[39m
 [90m [1d0040c9] [39m[92m+ PolyesterWeave v0.2.2[39m
 [90m [f27b6e38] [39m[92m+ Polynomials v4.0.19[39m
 [90m [aea7be01] [39m[92m+ PrecompileTools v1.2.1[39m
 [90m [21216c6a] [39m[92m+ Preferences v1.4.3[39m
 [90m [92933f4c] [39m[92m+ ProgressMeter v1.10.4[39m
 [90m [43287f4e] [39m[92m+ PtrArrays v1.3.0[39m
 [90m [4b34888f] [39m[92m+ QOI v1.0.1[39m
 [90m [94ee1d12] [39m[92m+ Quaternions v0.7.6[39m
 [90m [b3c3ace0] [39m[92m+ RangeArrays v0.3.2[39m
 [90m [c84ed2f1] [39m[92m+ Ratios v0.4.5[39m
 [90m [c1ae055f] [39m[92m+ RealDot v0.1.0[39m
 [90m [3cdcf5f2] [39m[92m+ RecipesBase v1.3.4[39m
 [90m [189a3867] [39m[92m+ Reexport v1.2.2[39m
 [90m [dee08c22] [39m[92m+ RegionTrees v0.3.2[39m
 [90m [ae029012] [39m[92m+ Requires v1.3.1[39m
 [90m [6038ab10] [39m[92m+ Rotations v1.7.1[39m
 [90m [fdea26ae] [39m[92m+ SIMD v3.7.1[39m
 [90m [94e857df] [39m[92m+ SIMDTypes v0.1.0[39m
 [90m [476501e8] [39m[92m+ SLEEFPirates v0.6.43[39m
 [90m [efcf1570] [39m[92m+ Setfield v1.1.2[39m
 [90m [699a6c99] [39m[92m+ SimpleTraits v0.9.4[39m
 [90m [47aef6b3] [39m[92m+ SimpleWeightedGraphs v1.5.0[39m
 [90m [45858cf5] [39m[92m+ Sixel v0.1.3[39m
 [90m [a2af1166] [39m[92m+ SortingAlgorithms v1.2.1[39m
 [90m [276daf66] [39m[92m+ SpecialFunctions v2.5.1[39m
 [90m [cae243ae] [39m[92m+ StackViews v0.1.2[39m
 [90m [aedffcd0] [39m[92m+ Static v0.8.9[39m
 [90m [0d7ed370] [39m[92m+ StaticArrayInterface v1.6.0[39m
 [90m [90137ffa] [39m[92m+ StaticArrays v1.9.13[39m
 [90m [1e83bf80] [39m[92m+ StaticArraysCore v1.4.3[39m
 [90m [82ae8749] [39m[92m+ StatsAPI v1.7.1[39m
 [90m [2913bbd2] [39m[92m+ StatsBase v0.34.4[39m
 [90m [62fd8b95] [39m[92m+ TensorCore v0.1.1[39m
 [90m [8290d209] [39m[92m+ ThreadingUtilities v0.5.5[39m
 [90m [731e570b] [39m[92m+ TiffImages v0.11.4[39m
 [90m [06e1c1a7] [39m[92m+ TiledIteration v0.5.0[39m
 [90m [3bb67fe8] [39m[92m+ TranscodingStreams v0.11.3[39m
 [90m [3a884ed6] [39m[92m+ UnPack v1.0.2[39m
 [90m [3d5dd08c] [39m[92m+ VectorizationBase v0.21.71[39m
 [90m [e3aaa7dc] [39m[92m+ WebP v0.1.3[39m
 [90m [efce3f68] [39m[92m+ WoodburyMatrices v1.0.0[39m
 [90m [f5851436] [39m[92m+ FFTW_jll v3.3.11+0[39m
 [90m [61579ee1] [39m[92m+ Ghostscript_jll v9.55.0+4[39m
 [90m [59f7168a] [39m[92m+ Giflib_jll v5.2.3+0[39m
 [90m [c73af94c] [39m[92m+ ImageMagick_jll v7.1.1048+0[39m
 [90m [905a6f67] [39m[92m+ Imath_jll v3.1.11+0[39m
 [90m [1d5cc7b8] [39m[92m+ IntelOpenMP_jll v2025.0.4+0[39m
 [90m [aacddb02] [39m[92m+ JpegTurbo_jll v3.1.1+0[39m
 [90m [88015f11] [39m[92m+ LERC_jll v3.0.0+1[39m
 [90m [7e76a0d4] [39m[92m+ Libglvnd_jll v1.7.1+1[39m
 [90m [89763e89] [39m[92m+ Libtiff_jll v4.5.1+1[39m
 [90m [d3a379c0] [39m[92m+ LittleCMS_jll v2.16.0+0[39m
 [90m [856f044c] [39m[92m+ MKL_jll v2025.0.1+1[39m
 [90m [18a262bb] [39m[92m+ OpenEXR_jll v3.2.4+0[39m
 [90m [643b3616] [39m[92m+ OpenJpeg_jll v2.5.4+0[39m
 [90m [efe28fd5] [39m[92m+ OpenSpecFun_jll v0.5.6+0[39m
 [90m [ffd25f8a] [39m[92m+ XZ_jll v5.8.1+0[39m
 [90m [4f6342f7] [39m[92m+ Xorg_libX11_jll v1.8.12+0[39m
 [90m [0c0b7dd1] [39m[92m+ Xorg_libXau_jll v1.0.13+0[39m
 [90m [a3789734] [39m[92m+ Xorg_libXdmcp_jll v1.1.6+0[39m
 [90m [1082639a] [39m[92m+ Xorg_libXext_jll v1.3.7+0[39m
 [90m [c7cfdc94] [39m[92m+ Xorg_libxcb_jll v1.17.1+0[39m
 [90m [c5fb5394] [39m[92m+ Xorg_xtrans_jll v1.6.0+0[39m
 [90m [3161d3a3] [39m[92m+ Zstd_jll v1.5.7+1[39m
 [90m [b53b4c65] [39m[92m+ libpng_jll v1.6.49+0[39m
 [90m [075b6546] [39m[92m+ libsixel_jll v1.10.5+0[39m
 [90m [c5f90fcd] [39m[92m+ libwebp_jll v1.4.0+0[39m
 [90m [1317d2d5] [39m[92m+ oneTBB_jll v2022.0.0+0[39m
 [90m [0dad84c5] [39m[92m+ ArgTools[39m
 [90m [56f22d72] [39m[92m+ Artifacts[39m
 [90m [2a0f44e3] [39m[92m+ Base64[39m
 [90m [ade2ca70] [39m[92m+ Dates[39m
 [90m [8ba89e20] [39m[92m+ Distributed[39m
 [90m [f43a241f] [39m[92m+ Downloads[39m
 [90m [7b1f6079] [39m[92m+ FileWatching[39m
 [90m [9fa8497b] [39m[92m+ Future[39m
 [90m [b77e0a4c] [39m[92m+ InteractiveUtils[39m
 [90m [4af54fe1] [39m[92m+ LazyArtifacts[39m
 [90m [b27032c2] [39m[92m+ LibCURL[39m
 [90m [76f85450] [39m[92m+ LibGit2[39m
 [90m [8f399da3] [39m[92m+ Libdl[39m
 [90m [37e2e46d] [39m[92m+ LinearAlgebra[39m
 [90m [56ddb016] [39m[92m+ Logging[39m
 [90m [d6f4376e] [39m[92m+ Markdown[39m
 [90m [a63ad114] [39m[92m+ Mmap[39m
 [90m [ca575930] [39m[92m+ NetworkOptions[39m
 [90m [44cfe95a] [39m[92m+ Pkg[39m
 [90m [de0858da] [39m[92m+ Printf[39m
 [90m [3fa0cd96] [39m[92m+ REPL[39m
 [90m [9a3f8284] [39m[92m+ Random[39m
 [90m [ea8e919c] [39m[92m+ SHA[39m
 [90m [9e88b42a] [39m[92m+ Serialization[39m
 [90m [1a1011a3] [39m[92m+ SharedArrays[39m
 [90m [6462fe0b] [39m[92m+ Sockets[39m
 [90m [2f01184e] [39m[92m+ SparseArrays[39m
 [90m [10745b16] [39m[92m+ Statistics[39m
 [90m [4607b0f0] [39m[92m+ SuiteSparse[39m
 [90m [fa267f1f] [39m[92m+ TOML[39m
 [90m [a4e569a6] [39m[92m+ Tar[39m
 [90m [8dfed614] [39m[92m+ Test[39m
 [90m [cf7118a7] [39m[92m+ UUIDs[39m
 [90m [4ec0a83e] [39m[92m+ Unicode[39m
 [90m [e66e0078] [39m[92m+ CompilerSupportLibraries_jll[39m
 [90m [deac9b47] [39m[92m+ LibCURL_jll[39m
 [90m [29816b5a] [39m[92m+ LibSSH2_jll[39m
 [90m [c8ffd9c3] [39m[92m+ MbedTLS_jll[39m
 [90m [14a3606d] [39m[92m+ MozillaCACerts_jll[39m
 [90m [4536629a] [39m[92m+ OpenBLAS_jll[39m
 [90m [05823500] [39m[92m+ OpenLibm_jll[39m
 [90m [83775a58] [39m[92m+ Zlib_jll[39m
 [90m [8e850b90] [39m[92m+ libblastrampoline_jll[39m
 [90m [8e850ede] [39m[92m+ nghttp2_jll[39m
 [90m [3f19e933] [39m[92m+ p7zip_jll[39m
[32m[1m   Resolving[22m[39m package versions...
[32m[1m    Updating[22m[39m `/tmp/jl_5hzq8y/Project.toml`
 [90m [7f904dfe] [39m[92m+ PlutoUI v0.7.64[39m
[32m[1m    Updating[22m[39m `/tmp/jl_5hzq8y/Manifest.toml`
 [90m [6e696c72] [39m[92m+ AbstractPlutoDingetjes v1.3.2[39m
 [90m [47d2ed2b] [39m[92m+ Hyperscript v0.0.5[39m
 [90m [ac1192a8] [39m[92m+ HypertextLiteral v0.9.5[39m
 [90m [b5f81e59] [39m[92m+ IOCapture v0.2.5[39m
 [90m [682c06a0] [39m[92m+ JSON v0.21.4[39m
 [90m [6c6e2e6c] [39m[92m+ MIMEs v1.1.0[39m
 [90m [69de0a69] [39m[92m+ Parsers v2.8.3[39m
 [90m [7f904dfe] [39m[92m+ PlutoUI v0.7.64[39m
 [90m [410a4b4d] [39m[92m+ Tricks v0.1.10[39m
 [90m [5c2747f8] [39m[92m+ URIs v1.5.2[39m
ªtext/plain§cell_idÙ$8f3a3e06-e601-11ea-201d-23a204daa10f¦kwargs�¢id´PlutoRunner_d1acb81e¤fileÙP/home/runner/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/io/stdout.jl¥group¦stdout¥level®LogLevel(-555)§runningÂ¦output†¤body ¤mimeªtext/plain¬rootassigneeÀ²last_run_timestampËAÚÊ¦n°persist_js_stateÂ·has_pluto_hook_featuresÂ§cell_idÙ$8f3a3e06-e601-11ea-201d-23a204daa10f¹depends_on_disabled_cellsÂ§runtimeÏ   "ÜÇµpublished_object_keys�¸depends_on_skipped_cellsÂ§erroredÂ±cell_dependencies‰Ù$7ff9aa7e-e603-11ea-1955-c7907182b1ec„´precedence_heuristic	§cell_idÙ$7ff9aa7e-e603-11ea-1955-c7907182b1ec´downstream_cells_map€²upstream_cells_map†¹process_raw_js_image_data‘Ù$fb5112f0-e605-11ea-2f00-6d621a6c36a1¢|>�£img‘Ù$7f4b0e1e-7f16-11ea-02d3-7955921a70bd¬svd_compress‘Ù$3d9d9c80-e603-11ea-3845-cf9ee612316f£red�¡n‘Ù$46a589f4-e604-11ea-345f-397b1b0c4f80Ù$46a589f4-e604-11ea-345f-397b1b0c4f80„´precedence_heuristic	§cell_idÙ$46a589f4-e604-11ea-345f-397b1b0c4f80´downstream_cells_map�¡n‘Ù$7ff9aa7e-e603-11ea-1955-c7907182b1ec²upstream_cells_map‰¤Core�¤Base�¡:�·PlutoRunner.create_bond�«PlutoRunner�¯Core.applicable�¥@bind�¨Base.get�¦Slider�Ù$a5353288-e601-11ea-09cc-5d049ce1bc93„´precedence_heuristic	§cell_idÙ$a5353288-e601-11ea-09cc-5d049ce1bc93´downstream_cells_map�´unwrap_js_image_data‘Ù$fb5112f0-e605-11ea-2f00-6d621a6c36a1²upstream_cells_map‡¥UInt8�¡:�§reshape�¡/�§adjoint�¤conj�£end�Ù$4dea78e4-e603-11ea-395c-a34b645dba9e„´precedence_heuristic§cell_idÙ$4dea78e4-e603-11ea-395c-a34b645dba9e´downstream_cells_map�­LinearAlgebra�²upstream_cells_map€Ù$7f4b0e1e-7f16-11ea-02d3-7955921a70bd„´precedence_heuristic	§cell_idÙ$7f4b0e1e-7f16-11ea-02d3-7955921a70bd´downstream_cells_map�£img‘Ù$7ff9aa7e-e603-11ea-1955-c7907182b1ec²upstream_cells_mapˆ¤Base�´PlutoRunner.Base.get�©@html_str�Ù#PlutoRunner.PlutoRunner.create_bond�«PlutoRunner�®Base.Docs.HTML�¥@bind�»PlutoRunner.Core.applicable�Ù$fb5112f0-e605-11ea-2f00-6d621a6c36a1„´precedence_heuristic	§cell_idÙ$fb5112f0-e605-11ea-2f00-6d621a6c36a1´downstream_cells_map�¹process_raw_js_image_data‘Ù$7ff9aa7e-e603-11ea-1955-c7907182b1ec²upstream_cells_map‚´unwrap_js_image_data‘Ù$a5353288-e601-11ea-09cc-5d049ce1bc93£RGB�Ù$3d9d9c80-e603-11ea-3845-cf9ee612316f„´precedence_heuristic	§cell_idÙ$3d9d9c80-e603-11ea-3845-cf9ee612316f´downstream_cells_map�¬svd_compress‘Ù$7ff9aa7e-e603-11ea-1955-c7907182b1ec²upstream_cells_map†¡:�¨Diagonal�£svd�¢|>�¡*�¤Gray�Ù$548722e2-e601-11ea-3a1f-770d7456c77c„´precedence_heuristic§cell_idÙ$548722e2-e601-11ea-3a1f-770d7456c77c´downstream_cells_map�£Pkg’Ù$548722e2-e601-11ea-3a1f-770d7456c77cÙ$8f3a3e06-e601-11ea-201d-23a204daa10f²upstream_cells_mapƒ£Pkg‘Ù$548722e2-e601-11ea-3a1f-770d7456c77c¬Pkg.activate�©mktempdir�Ù$8f3a3e06-e601-11ea-201d-23a204daa10f„´precedence_heuristic§cell_idÙ$8f3a3e06-e601-11ea-201d-23a204daa10f´downstream_cells_map‚¦Images�§PlutoUI�²upstream_cells_map‚§Pkg.add�£Pkg‘Ù$548722e2-e601-11ea-3a1f-770d7456c77c´cell_execution_order™Ù$548722e2-e601-11ea-3a1f-770d7456c77cÙ$8f3a3e06-e601-11ea-201d-23a204daa10fÙ$4dea78e4-e603-11ea-395c-a34b645dba9eÙ$3d9d9c80-e603-11ea-3845-cf9ee612316fÙ$46a589f4-e604-11ea-345f-397b1b0c4f80Ù$7f4b0e1e-7f16-11ea-02d3-7955921a70bdÙ$a5353288-e601-11ea-09cc-5d049ce1bc93Ù$fb5112f0-e605-11ea-2f00-6d621a6c36a1Ù$7ff9aa7e-e603-11ea-1955-c7907182b1ec´last_hot_reload_timeË        ©shortpath¯drawoncanvas.jl®process_status¥ready¤pathÙE/home/runner/work/disorganised-mess/disorganised-mess/drawoncanvas.jl­pluto_version¨v0.19.47®last_save_timeËAÚÅ¾ªcell_order™Ù$548722e2-e601-11ea-3a1f-770d7456c77cÙ$8f3a3e06-e601-11ea-201d-23a204daa10fÙ$4dea78e4-e603-11ea-395c-a34b645dba9eÙ$3d9d9c80-e603-11ea-3845-cf9ee612316fÙ$46a589f4-e604-11ea-345f-397b1b0c4f80Ù$7ff9aa7e-e603-11ea-1955-c7907182b1ecÙ$7f4b0e1e-7f16-11ea-02d3-7955921a70bdÙ$a5353288-e601-11ea-09cc-5d049ce1bc93Ù$fb5112f0-e605-11ea-2f00-6d621a6c36a1±published_objects€¥nbpkgŠ¯install_time_nsÀ¬instantiatedÃ²installed_versions€°terminal_outputs€§enabledÂ·restart_recommended_msgÀ´restart_required_msgÀ­busy_packages�¶waiting_for_permissionÂÙ,waiting_for_permission_but_probably_disabledÂ«cell_inputs‰Ù$7ff9aa7e-e603-11ea-1955-c7907182b1ec„§cell_idÙ$7ff9aa7e-e603-11ea-1955-c7907182b1ec¤codeÙGlet
	i = process_raw_js_image_data(img)
	svd_compress(i .|> red, n)
end¨metadataƒ©show_logsÃ¨disabledÂ®skip_as_scriptÂ«code_foldedÃÙ$46a589f4-e604-11ea-345f-397b1b0c4f80„§cell_idÙ$46a589f4-e604-11ea-345f-397b1b0c4f80¤code´@bind n Slider(1:20)¨metadataƒ©show_logsÃ¨disabledÂ®skip_as_scriptÂ«code_foldedÂÙ$a5353288-e601-11ea-09cc-5d049ce1bc93„§cell_idÙ$a5353288-e601-11ea-09cc-5d049ce1bc93¤codeÚ2function unwrap_js_image_data(raw_js_image_data)
	# the raw image data is a long byte array, we need to transform it into something
	# more "Julian" - something with more _structure_.
	
	# The encoding of the raw byte stream is:
	# every 4 bytes is a single pixel
	# every pixel has 4 values: Red, Green, Blue, Alpha
	# (we ignore alpha for this notebook)
	
	# So to get the red values for each pixel, we take every 4th value, starting at 
	# the 1st:
	reds_flat = UInt8.(raw_js_image_data["data"][1:4:end])
	greens_flat = UInt8.(raw_js_image_data["data"][2:4:end])
	blues_flat = UInt8.(raw_js_image_data["data"][3:4:end])
	
	# but these are still 1-dimensional arrays, nicknamed 'flat' arrays
	# We will 'reshape' this into 2D arrays:
	
	width = raw_js_image_data["width"]
	height = raw_js_image_data["height"]
	
	# shuffle and flip to get it in the right shape
	reds = reshape(reds_flat, (width, height))' / 255.0
	greens = reshape(greens_flat, (width, height))' / 255.0
	blues = reshape(blues_flat, (width, height))' / 255.0
	
	(reds=reds, greens=greens, blues=blues)
end¨metadataƒ©show_logsÃ¨disabledÂ®skip_as_scriptÂ«code_foldedÂÙ$4dea78e4-e603-11ea-395c-a34b645dba9e„§cell_idÙ$4dea78e4-e603-11ea-395c-a34b645dba9e¤code³using LinearAlgebra¨metadataƒ©show_logsÃ¨disabledÂ®skip_as_scriptÂ«code_foldedÂÙ$7f4b0e1e-7f16-11ea-02d3-7955921a70bd„§cell_idÙ$7f4b0e1e-7f16-11ea-02d3-7955921a70bd¤codeÚL@bind img html"""
<canvas width="200" height="200" style="position: relative; display: block;"></canvas>
<button>Clear</button>

<script>
const canvas = this.querySelector("canvas")
const button = this.querySelector("button")
const ctx = canvas.getContext("2d")

function send_image(){
	// ðŸ�¸ We send the value back to Julia ðŸ�¸ //
	canvas.value = {
		width: 200,
		height: 200,
		data: ctx.getImageData(0,0,200,200).data,
	}
	canvas.dispatchEvent(new CustomEvent("input"))
}

var prev_pos = [80, 40]

function clear(){
	ctx.fillStyle = '#ffecec'
	ctx.fillRect(0, 0, 200, 200)

	send_image()
}
clear()

function onmove(e){
	const new_pos = [e.layerX, e.layerY]
	ctx.lineTo(...new_pos)
	ctx.stroke()
	prev_pos = new_pos

	send_image()
}

canvas.onmousedown = e => {
	prev_pos = [e.layerX, e.layerY]
	ctx.strokeStyle = '#003d6d'
	ctx.lineWidth = 5
	ctx.beginPath()
	ctx.moveTo(...prev_pos)
	canvas.onmousemove = onmove
}

button.onclick = clear

canvas.onmouseup = e => {
	canvas.onmousemove = null
}

// Fire a fake mousemoveevent to show something
onmove({layerX: 130, layerY: 160})

</script>
"""¨metadataƒ©show_logsÃ¨disabledÂ®skip_as_scriptÂ«code_foldedÂÙ$fb5112f0-e605-11ea-2f00-6d621a6c36a1„§cell_idÙ$fb5112f0-e605-11ea-2f00-6d621a6c36a1¤codeÙøfunction process_raw_js_image_data(raw_js_image_data)
	# we have our 2D array for each color
	# Let's create a single 2D array, where each value contains the R, G and B value of 
	# that pixel
	
	RGB.(unwrap_js_image_data(raw_js_image_data)...)
end¨metadataƒ©show_logsÃ¨disabledÂ®skip_as_scriptÂ«code_foldedÂÙ$3d9d9c80-e603-11ea-3845-cf9ee612316f„§cell_idÙ$3d9d9c80-e603-11ea-3845-cf9ee612316f¤codeÙofunction svd_compress(i, N)
	ðŸ“š = svd(i)
	ðŸ“š.U[:,1:N] * Diagonal(ðŸ“š.S[1:N]) * ðŸ“š.Vt[1:N,:] .|> Gray
end¨metadataƒ©show_logsÃ¨disabledÂ®skip_as_scriptÂ«code_foldedÂÙ$548722e2-e601-11ea-3a1f-770d7456c77c„§cell_idÙ$548722e2-e601-11ea-3a1f-770d7456c77c¤codeÙ0begin
	import Pkg
	Pkg.activate(mktempdir())
end¨metadataƒ©show_logsÃ¨disabledÂ®skip_as_scriptÂ«code_foldedÂÙ$8f3a3e06-e601-11ea-201d-23a204daa10f„§cell_idÙ$8f3a3e06-e601-11ea-201d-23a204daa10f¤codeÚUbegin
	# we will work with the package Images.jl, and to display images on the screen,
	# we also need ImageIO and ImageMagick
	Pkg.add(["Images", "ImageIO", "ImageMagick"])
	# we also use PlutoUI for some interactivity
	Pkg.add("PlutoUI")
	
	# now that it is installed, we can import it inside out notebook:
	using Images
	using PlutoUI
end¨metadataƒ©show_logsÃ¨disabledÂ®skip_as_scriptÂ«code_foldedÂ«notebook_idÙ$554f4a08-4aa9-11f0-1ed1-6d9dad83eee8«in_temp_dirÂ¨metadata€