28:null 29:["$","title",null,{"children":"Animated canvas | Lauren Nishizaki | Observable"}] 2e:T162f,class Tree { constructor() { this.height = 0; this.imgHeight = 200; this.imgWidth = 400; this.maxHeight = 100; this.trunkColor = 'brown'; // function of height this.leaves = []; // location of leaves (origin = base of trunk, y = height above ground) this.leafColor = ['green']; // array of color options - color of a single leaf is iteratively assigned this.leafSize = 5; // circle radius this.leafOpacity = 0.5; this.branches = []; // height of branches from ground this.branchSlope = 0.3; this.context = DOM.context2d(width, height); this.growing = true; } // add branches if the tree is still growing taller animateBranchAddition(heightInterval) { var treeHeight = this.height; if (this.growing && (treeHeight > 0) && (treeHeight % heightInterval == 0) && !(this.branches.includes(treeHeight))) { this.branches.push(treeHeight); } } // add leaves if the tree is still growing taller // 1 leaf per branch per time interval animateLeafAddition(leafInterval) { var numBranches = this.branches.length; var treeHeight = this.height; if (this.growing && (treeHeight > 10) && (treeHeight % leafInterval == 0)) { // add leaves var newLeaves = this.branches.map(function(branch,iBranch) { var xPos = (Math.random() * 2 - 1) * 3 * (numBranches - iBranch); xPos += (xPos > 0) ? (numBranches-iBranch) : -(numBranches-iBranch); return [xPos, (iBranch + 1) * 10 + numBranches]; }); this.leaves = this.leaves.concat(newLeaves); } } // check if tree is still growing animateHeight() { this.growing = (this.height < this.maxHeight); } // color the tree trunk as a function of age animateTrunkAppearance() { var trunkColorRange = d3.interpolateHcl('green',d3.rgb(76, 28, 0)); if (this.height <= this.maxHeight / 2) { // color is a function of height this.trunkColor = trunkColorRange(this.height * 2 / this.maxHeight); } else { this.trunkColor = trunkColorRange(1); } } // color leaves according to the date animateLeafAppearance(season, seasonalDate, seasonLength) { var seasonPercent = seasonalDate / seasonLength; if (season == 0) { // spring this.leafSize = 4 * seasonPercent + 1; this.leafOpacity = - 0.5 * seasonPercent + 1; if (seasonPercent < 0.3) { this.leafColor = ['pink',null,null]; } else if (seasonPercent < 0.7) { this.leafColor = ['pink','pink','lightgreen']; } else { this.leafColor = ['pink','lightgreen','green']; } } else if (season == 1) { // summer this.leafSize = 4 * seasonPercent + 5; this.leafOpacity = 0.2 * seasonPercent + 0.5; if (seasonPercent < 0.4) { this.leafColor = ['lightgreen','green']; } else if (seasonPercent < 0.8) { this.leafColor = ['lightgreen','green', 'green']; } else { this.leafColor = ['green']; } } else if (season == 2) { // fall this.leafSize = 9; this.leafOpacity = -0.2 * seasonPercent + 0.7; if (seasonPercent < 0.4) { this.leafColor = ['green','green','green','orange']; } else if (seasonPercent < 0.8) { this.leafColor = ['red','green','orange','orange']; } else { this.leafColor = ['red','brown','orange','orange']; } } else { // winter this.leafSize = 9 - 6 * seasonPercent; this.leafOpacity = -0.2 * seasonPercent + 0.5; if (seasonPercent < 0.3) { this.leafColor = [null,'brown','orange','orange']; } else if (seasonPercent < 0.6) { this.leafColor = [null,'brown','orange',null]; } else if (seasonPercent < 0.8) { this.leafColor = [null,'brown',null,null]; } else { this.leafColor = [null]; } } } render() { // draw the tree in its current state const maxWidth = 20; const xStart = this.imgWidth/2; const trunkWidth = Math.min(this.height/10, maxWidth); const treeHeight = this.height; const imgHeight = this.imgHeight; const cxt = this.context = DOM.context2d(this.imgWidth, imgHeight); // draw trunk cxt.fillStyle = this.trunkColor; cxt.beginPath(); cxt.moveTo(xStart - trunkWidth/2, this.imgHeight); cxt.lineTo(xStart, this.imgHeight - treeHeight); cxt.lineTo(xStart + trunkWidth/2, this.imgHeight); cxt.closePath(); cxt.fill(); // draw branches cxt.beginPath(); cxt.strokeStyle = this.trunkColor; const numBranches = this.branches.length; const branchSlope = this.branchSlope; this.branches.forEach(function(branchHeight, i) { // odd branches to the left, even to the right var slope = branchSlope * (((i%2)==1) ? -1 : 1); var yDelta = (treeHeight - branchHeight) / 10; var xDelta = yDelta / slope; cxt.lineWidth = Math.min((numBranches - i)/2, 3); // bottom branches are thicker than top branches cxt.moveTo(xStart, imgHeight - branchHeight); cxt.lineTo(xStart + xDelta, imgHeight-branchHeight - yDelta); cxt.stroke(); }); // draw leaves const colors = this.leafColor; const leafRadius = this.leafSize; const leafOpacity = this.leafOpacity; this.leaves.forEach(function(leaf, i) { var color = d3.color(colors[i % colors.length]); if (color != null) { color.opacity = leafOpacity; cxt.fillStyle = color; cxt.beginPath(); cxt.arc(xStart + leaf[0], imgHeight - leaf[1],leafRadius,0,Math.PI * 2, true); cxt.fill(); } }); return cxt.canvas; } }2f:[] 2c:{"id":"e6fd995105c79cb6","slug":"animated-canvas","title":"Animated canvas","thumbnail":"a57f3acd35fd22a5b89e0f8022ebf787383845719bbf3ae3d36cdab2814feb03","access_level":"public","create_time":"$D2018-04-24T22:04:41.508Z","update_time":"$D2018-04-28T06:54:34.971Z","view_time":null,"first_public_time":"$D2018-04-28T06:21:41.919Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"256a9410144c43cb","login":"lemonnish","name":"Lauren Nishizaki","avatar_url":"https://avatars-next.observableusercontent.com/428c5ebc526524a55b9ff3af186d0405b364c8bc8e8c40e7f09db77da9371b40","tier":"starter_2024"},"version":1094,"publish_version":1094,"role":null,"authored":false,"authors":[{"type":"individual","id":"a58b7acc21a44633","login":"lemonnish","name":"Lauren Nishizaki","avatar_url":"https://avatars-next.observableusercontent.com/428c5ebc526524a55b9ff3af186d0405b364c8bc8e8c40e7f09db77da9371b40","tier":null}],"members":[{"type":"individual","id":"a58b7acc21a44633","login":"lemonnish","name":"Lauren Nishizaki","avatar_url":"https://avatars-next.observableusercontent.com/428c5ebc526524a55b9ff3af186d0405b364c8bc8e8c40e7f09db77da9371b40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"3b5709e991c684c8","slug":"animations/2","title":"Animations","owner":{"id":"256a9410144c43cb","login":"lemonnish","name":"Lauren Nishizaki"}},"type":"notebook","body":{"title":"Animated canvas","cells":[{"id":0,"value":"md`# Animated canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"{\n var staticTree = new Tree();\n staticTree.imgWidth = 400;\n staticTree.imgHeight = 200;\n staticTree.branches = [20,30,40,50,60,70,80,90,100,110,120,130,140,150,160,170,180];\n staticTree.trunkColor = 'grey'\n staticTree.height = 190;\n staticTree.leaves = [[15,25],[50,40],[21,72],[40,95],[2,98],[12,120],[15,156],[2,175],[-40,32],[-10,52],[-44,70],[-25,80],[-27,110],[-13,140]];\n staticTree.leafSize = 15;\n return staticTree.render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"md`\nThis tree is represented using a \\`Tree\\` object. The tree's state encodes height, color, etc. The \\`Tree\\` class has a render function that draws the current tree. \n\nThe entire tree is redrawn for each animation frame (every time one of the counters increments). There are 2 separate counters, one for seasons and one for tree height.\n\nLeaf color, size, and opacity get updated based on season, and leaves and branches are added based on current height.\n\nReplant the tree to restart the animation.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`Current season: ${ seasonName }`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"viewof replantButton = button({ value: 'Replant Tree' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"animatedTree = {\n tree.imgWidth = width;\n tree.imgHeight = height;\n tree.height = treeHeight;\n tree.maxHeight = maxHeight;\n \n tree.animateHeight();\n tree.animateBranchAddition(10);\n tree.animateLeafAddition(20);\n tree.animateTrunkAppearance();\n tree.animateLeafAppearance(season, seasonalDate, seasonLength);\n \n return tree.render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"md`---\n## Tree class and variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"width = 400 // of canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = 400 // of canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"value":"md `\nThe \\`Tree\\` class does all the heavy lifting. It is used to animate the tree by adding branches and leaves based on the current height, and changing the appearance of leaves based on input season information. The \\`Tree\\` class also contains a \\`render()\\` function that knows how to draw the current state of the tree.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"// this is the tree that gets animated\nmutable tree = new Tree()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"treeHeight = {\n let i = this || 0;\n \n if (replantButton) { // redefine the tree variable\n mutable tree = new Tree();\n yield i = 0;\n }\n \n while (true && i < maxHeight) {\n ++i;\n yield Promises.delay(50, i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"maxHeight = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"md`## Season variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"seasonLength = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"yearDate = {\n let i = this || 0;\n var seasonTemp = 0;\n const waitTime = 500;\n const yearLength = seasonLength * 4;\n \n while (true) {\n if (i % seasonLength == 0) mutable season = i / seasonLength;\n mutable seasonalDate = i % seasonLength;\n ++i;\n if (i == yearLength) i = 0;\n yield Promises.delay(waitTime, i);\n }\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"mutable season = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"mutable seasonalDate = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"seasonName = {\n var list = ['spring','summer','fall','winter'];\n return list[season];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"// d3-color is used for color interpolations and opacity levels\nd3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"