29:null 2a:["$","title",null,{"children":"Sorting | zequanr | Observable"}] 2f:Tb46,{ const selectionSortArray = [...sort] const canvasWidth = document.body.offsetWidth const canvasHeight = 480 const unitY = canvasHeight / (Math.max(...selectionSortArray) + 3) const unitX = (canvasWidth - unitY * 2) / (selectionSortArray.length * 2 + 1) const canvas = DOM.canvas(canvasWidth, canvasHeight) const p = new paper.PaperScope(); p.setup(canvas) for (let i = 0; i < canvasWidth - unitY; i += unitX) { new p.Path.Line({ from: [unitY + i, unitY], to: [unitY + i, canvasHeight - unitY], strokeColor: '#ECECEC' }) } for (let i = 0; i < canvasHeight - unitY; i += unitY) { new p.Path.Line({ from: [unitY, unitY + i], to: [unitX * Math.floor((canvasWidth - unitY * 2) / unitX) + unitY, unitY + i], strokeColor: '#ECECEC' }) } const translate = point => { return [unitY + point[0] * unitX, canvasHeight - (point[1] + 1) * unitY] } let hash = new Array() for (let i = 0; i < selectionSortArray.length; i++) { hash[i] = new p.Path.Rectangle({ point: translate([i * 2 + 1, selectionSortArray[i]]), size: [unitX, selectionSortArray[i] * unitY], strokeColor: 'black', fillColor : 'blue' }) } let swap = (a, b) => { hash[a].tweenTo( { position: [hash[a].position.x + (b - a) * 2 * unitX, hash[a].position.y] }, { duration: 800 } ).then(() => { hash[b].tweenTo({ position: [hash[b].position.x - (b - a) * 2 * unitX, hash[b].position.y] }, 800) let temp = hash[a] hash[a] = hash[b] hash[b] = temp hash.map(a => { a.fillColor = "blue" }) }) } const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay)) const conversionColor = (array, index, from, to) => { array.map(a => { if (a.fillColor.toString() == new p.Color(from).toString()) { a.fillColor = to } }) array[index].fillColor = from } const minColor = (array, index, from, to) => { array.map(a => { if (a.fillColor.toString() == new p.Color(from).toString()) { a.fillColor = 'blue' } }) array[index].fillColor = to } async function selectionSort(arr) { var len = arr.length var minIndex, temp for (var i = 0; i < len - 1; i++) { await sleep(2000) conversionColor(hash, i, "red", "blue") minIndex = i for (var j = i + 1; j < len; j++) { await sleep(1000) conversionColor(hash, j, "green", "blue") if (arr[j] < arr[minIndex]) { minIndex = j } } await sleep(500) minColor(hash, minIndex, "green", "orange") await sleep(1000) swap(i, minIndex) temp = arr[i] arr[i] = arr[minIndex] arr[minIndex] = temp } return arr } selectionSort(selectionSortArray) return canvas }30:Taa1,{ const bubbleSortArray = [...sort] const canvasWidth = document.body.offsetWidth const canvasHeight = 480 const unitY = canvasHeight / (Math.max(...bubbleSortArray) + 3) const unitX = (canvasWidth - unitY * 2) / (bubbleSortArray.length * 2 + 1) const canvas = DOM.canvas(canvasWidth, canvasHeight) const p = new paper.PaperScope(); p.setup(canvas) for (let i = 0; i < canvasWidth - unitY; i += unitX) { new p.Path.Line({ from: [unitY + i, unitY], to: [unitY + i, canvasHeight - unitY], strokeColor: '#ECECEC' }) } for (let i = 0; i < canvasHeight - unitY; i += unitY) { new p.Path.Line({ from: [unitY, unitY + i], to: [unitX * Math.floor((canvasWidth - unitY * 2) / unitX) + unitY, unitY + i], strokeColor: '#ECECEC' }) } const translate = point => { return [unitY + point[0] * unitX, canvasHeight - (point[1] + 1) * unitY] } let hash = new Array() for (let i = 0; i < bubbleSortArray.length; i++) { hash[i] = new p.Path.Rectangle({ point: translate([i * 2 + 1, bubbleSortArray[i]]), size: [unitX, bubbleSortArray[i] * unitY], strokeColor: 'black', fillColor : 'blue' }) } let swap = (a, b) => { hash[a].tweenTo( { position: [hash[a].position.x + (b - a) * 2 * unitX, hash[a].position.y] }, { duration: 800 } ).then(() => { hash[b].tweenTo({ position: [hash[b].position.x - (b - a) * 2 * unitX, hash[b].position.y] }, 800) let temp = hash[a] hash[a] = hash[b] hash[b] = temp }) } const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay)) const conversionColor = (array, index, from, to) => { array.map(a => { if (a.fillColor.toString() == new p.Color(from).toString()) { a.fillColor = to } }) array[index].fillColor = from array[index + 1].fillColor = from } const endColor = (array, index, from) => { array[index].fillColor = from } const allColor = (array, color) => { array.map(a => { a.fillColor = color }) } async function bubbleSort(arr) { let len = arr.length for (let i = 0; i < len - 1; i++) { for (let j = 0; j < len - 1 - i; j++) { await sleep(1000) conversionColor(hash, j, "red", "blue") if (arr[j] > arr[j + 1]) { await sleep(1000) swap(j, j + 1) let temp = arr[j] arr[j] = arr[j + 1] arr[j + 1] = temp } } await sleep(1000) endColor(hash, len- 1 - i, "orange") } await sleep(800) allColor(hash, "blue") return arr } bubbleSort(bubbleSortArray) return canvas }31:Td0b,{ const insertionSortArray = [...sort] const canvasWidth = document.body.offsetWidth let canvasHeight = 480 * 2 const unitY = canvasHeight / 2 / (Math.max(...insertionSortArray) + 3) const unitX = (canvasWidth - unitY * 2) / (insertionSortArray.length * 2 + 1) canvasHeight -= unitY * 2 const canvas = DOM.canvas(canvasWidth, canvasHeight) const p = new paper.PaperScope(); p.setup(canvas) for (let i = 0; i < canvasWidth - unitY; i += unitX) { new p.Path.Line({ from: [unitY + i, unitY], to: [unitY + i, canvasHeight - unitY], strokeColor: '#ECECEC' }) } for (let i = 0; i < canvasHeight - unitY; i += unitY) { new p.Path.Line({ from: [unitY, unitY + i], to: [unitX * Math.floor((canvasWidth - unitY * 2) / unitX) + unitY, unitY + i], strokeColor: '#ECECEC' }) } const translate = point => { return [unitY + point[0] * unitX, canvasHeight - (point[1] + 1) * unitY] } let hash = new Array() for (let i = 0; i < insertionSortArray.length; i++) { hash[i] = new p.Path.Rectangle({ point: translate([i * 2 + 1, insertionSortArray[i]]), size: [unitX, insertionSortArray[i] * unitY], strokeColor: 'black', fillColor : 'blue' }) } const swap = (a, b) => { hash[a].tweenTo( { position: [hash[a].position.x + (b - a) * 2 * unitX, hash[a].position.y] }, { duration: 800 } ).then(() => { hash[b].tweenTo({ position: [hash[b].position.x - (b - a) * 2 * unitX, hash[b].position.y] }, 800) let temp = hash[a] hash[a] = hash[b] hash[b] = temp }) } const motion = (a, action) => { if (action == "goUp") { hash[a].tweenTo( { position: [hash[a].position.x, hash[a].position.y - (canvasHeight / 2 - unitY)] }, { duration: 800 } ) } if (action == "decline") { hash[a].tweenTo( { position: [hash[a].position.x, hash[a].position.y + (canvasHeight / 2 - unitY)] }, { duration: 800 } ) } } const conversionColor = (array, index, from, to) => { array.map(a => { if (a.fillColor.toString() == new p.Color(from).toString()) { a.fillColor = to } }) array[index].fillColor = from } const endColor = (array, index, from) => { array[index].fillColor = from } const allColor = (array, color) => { array.map(a => { a.fillColor = color }) } const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay)) async function insertionSort(arr) { var len = arr.length for (let i = 1; i < len; i++) { await sleep(1000) motion(i, "goUp") conversionColor(hash, i, "red", "orange") let j, key = arr[i]; for (j = i - 1; j >= 0; j--) { if (arr[j] > key) { await sleep(1600) conversionColor(hash, j, "green", "orange") swap(j + 1, j) arr[j + 1] = arr[j] } else { break } } await sleep(1800) endColor(hash, j + 2, "orange") motion(j + 1, "decline") arr[j + 1] = key } await sleep(1200) allColor(hash, "blue") return arr } insertionSort(insertionSortArray) return canvas }32:[{"id":"7068118742b77844ec991d08205cddaf46e54741b2c70ca4db91de4e8894e0ae2e9673b61a1f677290e6db01e1cd09661f58717bd1d78b7f0ce4766a77832b13","href":"https://static.observableusercontent.com/files/7068118742b77844ec991d08205cddaf46e54741b2c70ca4db91de4e8894e0ae2e9673b61a1f677290e6db01e1cd09661f58717bd1d78b7f0ce4766a77832b13","name":"sort-selection@1.svg","type":"image/svg+xml","lastModified":1662088670341.497,"size":85162},{"id":"28d551145ace64fc1eac5141ac3aaae6a5fc1dc95a2bb8d841b024b142f49da77341fc3563ec53c67fc60bfdbf3fd10c3d2078cb7a9e926564a4ac397089576e","href":"https://static.observableusercontent.com/files/28d551145ace64fc1eac5141ac3aaae6a5fc1dc95a2bb8d841b024b142f49da77341fc3563ec53c67fc60bfdbf3fd10c3d2078cb7a9e926564a4ac397089576e","name":"bubble.svg","type":"image/svg+xml","lastModified":1662373253646.766,"size":83933},{"id":"c1b6d23c0757ea176db6879a35035c515672f6c184aecbd6f0b805204aa680695ea50d2f5ea1e2dd86094dba00ec62ad75480008214b01431f13cc1af7147dbf","href":"https://static.observableusercontent.com/files/c1b6d23c0757ea176db6879a35035c515672f6c184aecbd6f0b805204aa680695ea50d2f5ea1e2dd86094dba00ec62ad75480008214b01431f13cc1af7147dbf","name":"insertion.svg","type":"image/svg+xml","lastModified":1662432801874.263,"size":83975}] 2d:{"id":"be03cc35c18dcbef","slug":"paper","title":"Sorting","thumbnail":"bba0d883c44a540d2bcba5577374bad757de29e4a56522d0e0db8bba815706ce","access_level":"public","create_time":"$D2022-08-26T03:11:28.259Z","update_time":"$D2024-03-13T08:11:35.364Z","view_time":null,"first_public_time":"$D2022-08-30T12:08:10.341Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"dec476674409c240","login":"zequanr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7ebcb6cb6c371547c504cec14f2f5d2bc9f0a00379c74f9408751e49845e04a6","tier":"starter_2024"},"version":1161,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b9b9ceeb256945ea","login":"zequanr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7ebcb6cb6c371547c504cec14f2f5d2bc9f0a00379c74f9408751e49845e04a6","tier":null}],"members":[{"type":"individual","id":"b9b9ceeb256945ea","login":"zequanr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7ebcb6cb6c371547c504cec14f2f5d2bc9f0a00379c74f9408751e49845e04a6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"f7b4af8a162ddfec","slug":"paper","title":"Paper","owner":{"id":"dec476674409c240","login":"zequanr","name":""}},"type":"notebook","body":{"titling":"auto","title":"Sorting","cells":[{"id":0,"value":"# Sorting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":868,"value":"sort = [ 1, 2, 3, 4, 1, 2, 9, 3, 4, 5, 7 ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"## Selection sort","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":753,"value":"sortSelection1 = FileAttachment(\"sort-selection@1.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"## Bubble sort","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1095,"value":"bubble = FileAttachment(\"bubble.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":870,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"## Insertion sort","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1124,"value":"insertion = FileAttachment(\"insertion.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":978,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"## Import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"paper = require(\"paper\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"## Version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1147,"value":"paper.version","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2e:"$2d:body"