Ark/leporello-js
1
0
Fork 0
mirror of https://github.com/leporello-js/leporello-js synced 2026-01-13 21:14:28 -08:00
Code Issues Packages Projects Releases Wiki Activity

deploy: leporello-js/app@a6e3f1b36f

Browse Source
This commit is contained in:
dmitry-vsl
2025-05-30 19:59:02 +00:00
parent 1a30311de4
commit 75b1c5e942
30 changed files with 959 additions and 832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docs/examples/animated_fractal_tree/animated_fractal_tree.js
View File

@@ -2,34 +2,33 @@
// Author: Sarah Bricault
// Canvas setup
const canvas = document.createElement('canvas')
const canvas = document.createElement("canvas")
canvas.width = 700
canvas.height = 700
document.body.appendChild(canvas)
const ctx = canvas.getContext('2d')
const ctx = canvas.getContext("2d")
ctx.translate(canvas.width / 2, canvas.height)
// Draw a tree
await fractalTreeBasic({totalIterations: 10, basicLength: 10, rotate: 25})
await fractalTreeBasic({ totalIterations: 10, basicLength: 10, rotate: 25 })
function sleep() {
return new Promise(resolve => setTimeout(resolve, 3))
}
async function fractalTreeBasic({totalIterations, basicLength, rotate}) {
async function fractalTreeBasic({ totalIterations, basicLength, rotate }) {
// Draw the tree trunk
const trunkLength = basicLength * 2 * Math.pow(1.2, totalIterations + 1)
const width = Math.pow(totalIterations, 0.6)
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(0, - trunkLength)
ctx.lineTo(0, -trunkLength)
ctx.lineWidth = width
ctx.strokeStyle = 'black'
ctx.strokeStyle = "black"
ctx.stroke()
await drawBranch(90, [0, - trunkLength], totalIterations + 1)
await drawBranch(90, [0, -trunkLength], totalIterations + 1)
async function drawBranch(angle, startPoint, iterations) {
const len = basicLength * Math.pow(1.2, iterations)
@@ -38,7 +37,7 @@ async function fractalTreeBasic({totalIterations, basicLength, rotate}) {
const red = Math.floor(255 - (iterations / totalIterations) * 255)
const green = 0
const blue = Math.floor( 255 - (iterations / totalIterations) * 255)
const blue = Math.floor(255 - (iterations / totalIterations) * 255)
const color = `rgb(${red}, ${green}, ${blue})`
const x1 = startPoint[0]
@@ -47,7 +46,7 @@ async function fractalTreeBasic({totalIterations, basicLength, rotate}) {
const y2 = y1 - len * Math.sin((angle * Math.PI) / 180)
const x2 = x1 + len * Math.cos((angle * Math.PI) / 180)
console.log('draw branch', x1, y1, x2, y2)
console.log("draw branch", x1, y1, x2, y2)
ctx.beginPath()
ctx.moveTo(x1, y1)