Baum animation

Animation wie sich ein Baum in Winter und Sommer sich verhält

Der hier verwendete Code

<!DOCTYPE html><meta charset="utf-8"/><body style="margin:0;"><canvas style="padding: 0; margin: auto; display: block;" id="tcanv"/> <script> BGC = "white"; FC = "#009cff"; seed = 1; ST = 1623776302086; Co = 30; C1 = 1500; MC = 0; TC = 60; maxDepth = 50; fps = 60; CB1 = 'green'; CB2 = 'saddlebrown'; fl = []; canvas = document.getElementById("tcanv"); ctx = canvas.getContext("2d"); t = 0; bC = 0; aux = 0; function Anim() { setTimeout(function() { window.requestAnimationFrame(Anim); draw(); }, 1000 / fps); }; function draw() { ss = Math.min(window.innerWidth, window.innerHeight); tcanv.width = ss; tcanv.height = ss; t = (Date.now() - ST) / 1000; ctx.fillStyle = BGC; ctx.fillRect(0, 0, ss, ss); ctx.fillStyle = FC; ctx.fillRect(ss / 8, ss / 8, 3 * ss / 4, ss - 40 * ss / 700 - ss / 8); ctx.translate(ss / 2, ss); ii = 0; Tree(); Sft = F(t, shS, TC); if (Sft > 0) { srd(1, 'rgba(255,255,255,0.7)'); if (Sft > 0.2) { CB1 = 'white' } }; if (Sft < -0.2) { CB1 = 'green' }; Rft = F(t, shR, TC); if (Rft > 0) { srd(4, 'rgba(0,0,255,0.7)') }; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillStyle = 'rgba(0,0,0,' + F(t, shDN, TC / 5) * 0.65 + ')'; ctx.fillRect(0, 0, ss, ss); }; Math.seed = function(s) { var mask = 0xffffffff, m_w = (123456789 + s) & mask, m_z = (987654321 - s) & mask; return function() { m_z = (36969 * (m_z & 65535) + (m_z >>> 16)) & mask; m_w = (18000 * (m_w & 65535) + (m_w >>> 16)) & mask; var result = ((m_z << 16) + (m_w & 65535)) >>> 0; result /= 4294967296; return result; } }; function F(tt, sh, T) { var aa = tt / T; aa = (aa - Math.floor(aa)) * 12; var i = Math.floor(aa); var v = (sh[i + 1] - sh[i]) * (aa - i) + sh[i]; return v; }; shS = [1, 0.87, 0.5, 0, -0.5, -0.87, -1, -0.87, -0.5, 0, 0.5, 0.87, 1]; shR = [0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0]; shMC = [0, 0.07, 0.25, 0.5, 0.75, 0.93, 1, 0.93, 0.75, 0.5, 0.25, 0.07, 0]; shL = [0, 0.07, 0.25, 0.5, 0.75, 0.93, 1, 0.93, 0.75, 0.5, 0.25, 0.07, 0]; shF = [0, 0, 0, 0, 0.5, 0.87, 1, 0.5, 0.0, 0, 0, 0, 0]; shDN = [1, 0.87, 0.5, 0, 0, 0, 0, 0, 0, 0, 0.5, 0.87, 1]; shD = [0, 0, 0.26, 0.71, 0.97, 0.97, 0.71, 0.26, 0, 0, 0, 0, 0]; function ir() { for (var i = 0; i < 15000; i++) { var rr = rand(0, 1); rav.push(rr) } }; function mr(i0) { for (var i = i0; i < 15000; i++) { var rr = rand(0, 1); rav[i] = rr } }; function ri() { for (var i = 0; i < 100; i++) { var xx = rand(-0.5, 0.5), yy = rand(-1, 0), rr = rand(2 / 700, 5 / 700); fl.push({ x: xx, y: yy, r: rr }) } }; function srd(sc, c) { for (var i = 0; i < 100; i++) { fl[i].y += 5 * sc / fl[i].r / 490000; if (fl[i].y > 0) { fl[i].y = -1; }; ci(fl[i].x * ss, fl[i].y * ss, fl[i].r / sc * ss, fl[i].r * sc * ss, c) } }; function Tree() { bC = 0; random = Math.seed(seed); Branch2(0, -40 * ss / 700, 10 * ss / 700, Math.PI / 2, 1, 0); }; function rand(min, max) { return (random() * (max - min) + min); }; function ci(x, y, r1, r2, c) { ctx.beginPath(); ctx.fillStyle = c; ctx.ellipse(x, y, r1, r2, 0, 0, 2 * Math.PI); ctx.fill(); }; function li(x0, y0, x1, y1, sw, c) { ctx.beginPath(); ctx.lineWidth = sw; ctx.lineCap = 'round'; ctx.strokeStyle = c; ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke(); }; function Branch2(x0, y0, length, angle, branch, depth) { bC++; MC = F(t, shMC, TC * 2) * (C1 - Co) + Co; if (bC > MC) { return; }; if (depth > maxDepth) { return; }; if (bC == Co) { random = Math.seed(seed * (Math.floor(0.5 * t / TC) + 1)); mr(ii); }; var x1 = x0 + length * Math.cos(angle), y1 = y0 - length * Math.sin(angle); var d = depth / maxDepth, sw = 0.7 + 40.0 * Math.pow(1.0 - d, 2.4) * (F(t, shD, TC * 2) * 0.7 + 0.4) * ss / 700, rA = 0.7, fA = 0.3; var rfr = F(t, shF, TC * 2) * 5 * ss / 700; var rl = (F(t, shL, TC * 2) * 0.7 + 0.3) * 5 * ss / 700; var pa = Math.pow(d, 0.5); rA *= pa; fA *= pa; length *= rav[ii] * 0.1 + 0.95; ii++; if (depth > 35) { if (rav[ii] > 0.95) { ci(x0, y0 + rfr, rfr, rfr, 'rgba(255,0,0,0.7)') } }; ii++; if (depth > 25) { if (rav[ii] > 0.95) { ci(x0, y0 + 2 * rl, rl, rl * 2, 'rgba(0,255,0,0.7)') } }; ii++; angle = angle + 0.005 * Math.sin(branch * t / 10 + branch); li(x0, y0, x1, y1, sw, CB2); li(x0 - sw / 2, y0, x1 - sw / 2, y1, sw, CB1); if (rav[ii] > 0.85 && depth > 5) { Branch2(x1, y1, length, angle - fA, branch + 1, depth + 1); Branch2(x1, y1, length, angle + fA, branch + 1, depth + 1); ii++; } else { ii++; Branch2(x1, y1, length, angle + rav[ii] * 2 * rA - rA, branch, depth + 1); ii++; } }; random = Math.seed(seed); ss = 700; ri(); random = Math.seed(seed); rav = []; ir(); Anim() </script></body>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!