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>