processing实现canvas樱花树生长开花动画效果代码
代码语言:html
所属分类:动画
代码描述:processing实现canvas樱花树生长开花动画效果代码
代码标签: processing canvas 樱花树 生长 开花 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; box-sizing: border-box; overflow: hidden; } body { background: #e6e2ca; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } body canvas { box-shadow: 0.2em 0.2em 2em #0008; border: none; outline: none; } </style> </head> <body translate="no"> <canvas id="canvas"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.1.4.8.js"></script> <script> var sketchProc = function(processingInstance) { with (processingInstance) { size(600, 600); frameRate(60); smooth(); textAlign(CENTER, CENTER); textSize(25); strokeCap(PROJECT); //used for controlling the animation var lenBranches = 0, lenLeaves = 0, lenFlowers = 0; //define the tree object/properties var tree = { x: 300, y: 500, len: 100, depth: 6, angle: -90, branches: [], leaves: [], flowers: [], colors: { from: color(59, 39, 8), to: color(145, 108, 49) } }; //the recursive function (will be called from within itself) var addBranch = function(x, y, depth, angle, len) { //if the depth is zero then end the recursion if(depth === 0) { return; } //calculate the end points of the branch var x2 = x + cos(angle*Math.PI/180) * len; var y2 = y + sin(angle*Math.PI/180) * len; //add the new branch to the tree tree.branches.push({ x1: x, y1: y, x2: x2, y2: y2, depth: depth, color: lerpColor(tree.colors.from, tree.colors.to, map(depth, tree.depth, 1, 0, 1)) }); //add some random leaves to the branches if(depth > 0 && depth < tree.depth - 3 && random() < 0.3) { for(var i = 0; i < 2; i++) { var l = len * random(0.1, 0.9); var tx = x + cos(angle*Math.PI/180) * l; var ty = y + sin(angle*Math.PI/180) * l; tree.leaves.push({ x: tx, y: ty, diameter: random(5, 10), color: color(random(80, 100), random(150, 180), random(90, 110)), angle: random(angle - 60, angle + 60) }); } } //add some random flowers to the end of the branches if(depth === 1 && random() < 0.5 || depth === 2 && random() < 0.3) { tree.flowers.push({ x: x2, y: y2, diameter: depth === 1 ? random(15, 25) : random(10, 15), color: color(random(200, 255), random(60, 100), random(90, 120)), angle: angle, gap: random(0, 90) }); } //reduce the depth (extremely important to end your recursion) depth--; var l = len * (random(0.6, 0.8)); var x3 = x + cos(angle*Math.PI/180) * l; var y3 = y +.........完整代码请登录后点击上方下载按钮下载查看
网友评论0