Procedural dynamic trees driven by local wind speed

The following code adds procedural, animated trees to the footer of my art section page. The trees are generated without the use of textures, or canvas, and make use of my weather data to react to wind speed and wind direction. This is reflected in their gentle, or not so gentle swaying. The trees of my little forest have three layers - the stem, primary branches, and secondary branches. The animation is procedural and driven by real time weather variables. It includes moving the thinner parts of the trees more than the thicker parts. Additionally the trees grow, fade, and re-grow every minute.

You may notice that some variable names refer to vines, this is a relic of how the project started. You can view the trees live in action on my art page, and see how I set the weather data variables to be retrieved in local storage in my blog post about weather effects.

HTML:

JAVASCRIPT:

<script>
document.addEventListener('DOMContentLoaded', function () { 
const subString = '/art';
const getURL = window.location.href;  
if (getURL.includes(subString)) { 
//mobile check
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
if (isTouch === false) {
const footer = document.getElementById('footer-sections');
const bottomSeparator = footer.querySelector('.horizontalrule-block');
const vinesMainContainer = document.createElement('div');
vinesMainContainer.id = "vinesMainContainer";
vinesMainContainer.classList.add('vinesMainContainer');  
const vinesContainer = document.createElement('div');
vinesContainer.id = "vinesContainer";
vinesContainer.classList.add('vinesContainer'); 
vinesMainContainer.appendChild(vinesContainer);
bottomSeparator.appendChild(vinesMainContainer);
//initial setup
const drawSpeed = 35;
const vinesDuration = 60 * 1000;
const maxVineCount = 15;
const hardMaxVineCount = 25;
let vineCount = 0;
let minInterval = 30;
let maxInterval = 500;
const minStartThickness = 4;
const maxStartThickness = 6;
let randomInterval = 100;
let lastVineStartX = [];
const minDistanceBetweenVines = 50;
const maxAttempts = minDistanceBetweenVines / 2;
const minVineHeight = 0.2;
const maxVineHeight = 0.55;
const splitOccurStart = 0.1;
const splitOccurEnd = 0.8;
let windSpeed = 15; 
let windDirection = 360;
const storedWeatherData = localStorage.getItem('weatherData');
if (storedWeatherData) {
const weatherData = JSON.parse(storedWeatherData);
const weather = weatherData.weather;
windDirection = weather.winddirection;
windSpeed = weather.windspeed;
}
//swaying animation
function applyWindEffect(svg) {
const vineSegments = svg.querySelectorAll('polyline'); // Get all vine segments
const mainVineSegments = Array.from(vineSegments).filter(segment => segment.classList.contains('main-vine')); // Filter for main vine segments
const baseSegment = mainVineSegments[0]; // The base of the main vine
const basePoint = baseSegment.getAttribute('points').split(' ')[0].split(',').map(Number);
const maxRotation = windSpeed * 0.00008; // Max swaying angle
let swayAngle = 0;
const swayDirection = windDirection >= 180 ? -1 : 1;
const swayIncrement = 0.07; // Adjust this value as needed
function sway() {
swayAngle += 0.03;
const rotationAngle = Math.sin(swayAngle) * maxRotation;
for (let i = 0; i < mainVineSegments.length; i++) {
const segment = mainVineSegments[i];
const group = segment.closest('g');
const subgroups = group ? group.querySelectorAll('g') : [];
let points = segment.getAttribute('points').split(' ').map(point => point.split(',').map(Number));
points = points.map((point, index) => {
const [x, y] = point;
const dx = x - basePoint[0];
const dy = y - basePoint[1];
const currentRotation = rotationAngle * (1 + swayIncrement * i);
const newX = basePoint[0] + (dx * Math.cos(currentRotation * swayDirection) - dy * Math.sin(currentRotation * swayDirection));
const newY = basePoint[1] + (dx * Math.sin(currentRotation * swayDirection) + dy * Math.cos(currentRotation));
return [newX, newY];
});
if (i > 0) {
points[0] = mainVineSegments[i - 1].getAttribute('points').split(' ').map(point => point.split(',').map(Number)).slice(-1)[0];
} else {
points[0] = basePoint;
}
segment.setAttribute('points', points.map(point => point.join(',')).join(' ')); 
//move branches
subgroups.forEach(subgroup => {
const subgroupPolylines = subgroup.querySelectorAll('polyline');
subgroupPolylines.forEach(polyline => {
const subgroupPoints = polyline.getAttribute('points') ? polyline.getAttribute('points').split(' ').map(point => point.split(',').map(Number)) : [];
const isSecondarySplit = polyline.classList.contains('secondary-split');
const newSubgroupPoints = subgroupPoints.map((point) => {
const [x, y] = point;
const dx = x - basePoint[0];
const dy = y - basePoint[1];
// Use different logic for secondary splits
const currentRotation = isSecondarySplit ? rotationAngle * swayDirection : rotationAngle * (1 + swayIncrement * i); 
const newX = basePoint[0] + (dx * Math.cos(currentRotation) - dy * Math.sin(currentRotation));
const newY = basePoint[1] + (dx * Math.sin(currentRotation) + dy * Math.cos(currentRotation));
return [newX, newY];
});
if (newSubgroupPoints.length > 0) {
polyline.setAttribute('points', newSubgroupPoints.map(point => point.join(',')).join(' '));
}
});
});
//end branches move  
}
requestAnimationFrame(sway);
}
sway();
}
//create the trees
function createVinesSVG(id) {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('id', id);
svg.setAttribute('class', 'vine');
vinesContainer.appendChild(svg);
return svg;
}
function createVines() {
const uniqueId = `vine-${Date.now()}`;
const svg = createVinesSVG(uniqueId);
let startX;
let attempts = 0;
// Try to find a valid position for the vine's startX
do {
startX = Math.random() * svg.clientWidth;
attempts++;
} while (attempts < maxAttempts && lastVineStartX.some(prevX => Math.abs(prevX - startX) < minDistanceBetweenVines));
let startY = svg.clientHeight; 
let maxHeight = Math.random() * (svg.clientHeight * maxVineHeight) + (svg.clientHeight * minVineHeight);
let segments = Math.floor(maxHeight / (svg.clientHeight / 40));
const startThickness = Math.random() * (maxStartThickness - minStartThickness) + minStartThickness;
let x = startX;
let y = startY;
lastVineStartX.push(startX);
if (lastVineStartX.length > maxVineCount - 1) {
lastVineStartX.shift();
}
// Draw segments over time
let currentSegment = 0;
let splitCount = 0;
let drawInterval = setInterval(() => {
if (currentSegment < segments) {
let polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
polyline.setAttribute('fill', 'none');
let thickness = Math.max(startThickness - (currentSegment * (maxStartThickness / segments)), maxStartThickness / 3.3);
polyline.setAttribute('stroke-width', `${thickness}px`);
polyline.setAttribute('class', 'main-vine'); 
let mainGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
mainGroup.appendChild(polyline);
svg.appendChild(mainGroup);
let points = `${x},${y}`;
y -= (maxHeight / segments);
x += (Math.random() - 0.5) * 3; // Random horizontal displacement
points += ` ${x},${y}`;
polyline.setAttribute('points', points);
// Determine if a split should occur
let splitStartThreshold = Math.floor(segments * splitOccurStart);
let splitEndThreshold = Math.floor(segments * splitOccurEnd);
let splitDirection = Math.random() < 0.5 ? 'left' : 'right';
if (currentSegment > splitStartThreshold && currentSegment < splitEndThreshold && currentSegment % 2 === 0  && Math.random() > 0.45) {
drawSplit({ x, y, direction: splitDirection }, svg, splitCount, thickness, mainGroup);
splitCount++;
}
currentSegment++;
} else {
clearInterval(drawInterval);
setTimeout(() => {
applyWindEffect(svg);
}, 3000);
setTimeout(() => {
vinesContainer.removeChild(svg);
vineCount--;
}, vinesDuration);
}
}, drawSpeed);
}
// Splitting for primary branches
function drawSplit(split, svg, splitCount, stemThickness, mainGroup) {
let x = split.x;
let y = split.y;
let splitSegments = 4 + Math.floor(Math.random() * 3);
let maxSplitLength = (svg.clientHeight / 30) * (4 - splitCount);
let minSplitLength = (svg.clientHeight / 30) * 2;
let splitHeight = Math.random() * (maxSplitLength - minSplitLength) + minSplitLength;
let maxHorizontalDisplacement = Math.tan(Math.PI / 4.5) * splitHeight;
let currentSplitSegment = 0;
let thickness = stemThickness / 1.3; //starting branch thickness
let splitStartThreshold = Math.floor(splitSegments * 0.2);
let splitEndThreshold = Math.floor(splitSegments * 0.5);
let splitGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
mainGroup.appendChild(splitGroup);
let splitDrawInterval = setInterval(() => {
if (currentSplitSegment < splitSegments) {
let points = `${x},${y}`;
let horizontalDisplacement = (Math.random() - 0.5) * maxHorizontalDisplacement;
if (split.direction === 'left') {
x -= Math.abs(horizontalDisplacement);
} else {
x += Math.abs(horizontalDisplacement);
}
y -= splitHeight / splitSegments;
points += ` ${x},${y}`;
let splitPolyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
splitPolyline.setAttribute('fill', 'none');
splitPolyline.setAttribute('points', points);
splitPolyline.setAttribute('stroke-width', `${thickness}px`); 
splitPolyline.setAttribute('class', 'primary-split'); 
splitGroup.appendChild(splitPolyline);
//svg.appendChild(splitPolyline);
thickness = Math.max(thickness - ((stemThickness - 1) / splitSegments), 1);
// Randomly trigger secondary split
if (currentSplitSegment >= splitStartThreshold && currentSplitSegment <= splitEndThreshold && Math.random() > 0.43) {
drawSecondarySplit({ x, y, direction: Math.random() < 0.5 ? 'left' : 'right' }, svg, splitCount + 1, thickness, splitGroup);
}
currentSplitSegment++;
} else {
clearInterval(splitDrawInterval);
}
}, drawSpeed * 2);
}
// secondary branches
function drawSecondarySplit(split, svg, splitCount, parentThickness, splitGroup) {
let x = split.x;
let y = split.y;
let splitSegments = 2;
let maxSplitLength = (svg.clientHeight / 50) * (3 - splitCount);
let minSplitLength = (svg.clientHeight / 60) * 1;
let splitHeight = Math.random() * (maxSplitLength - minSplitLength) + minSplitLength;
let maxHorizontalDisplacement = Math.tan(Math.PI / 8) * splitHeight;
let currentSplitSegment = 0;
let thickness = parentThickness / 1.7; 
const secondaryGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
splitGroup.appendChild(secondaryGroup);
let splitDrawInterval = setInterval(() => {
if (currentSplitSegment < splitSegments) {
let points = `${x},${y}`;
let horizontalDisplacement = (Math.random() - 0.5) * maxHorizontalDisplacement;
if (split.direction === 'left') {
x -= Math.abs(horizontalDisplacement);
} else {
x += Math.abs(horizontalDisplacement);
}
y -= splitHeight / splitSegments;
points += ` ${x},${y}`;
let secondaryPolyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
secondaryPolyline.setAttribute('fill', 'none');
secondaryPolyline.setAttribute('points', points);
secondaryPolyline.setAttribute('stroke-width', `${thickness}px`);
secondaryPolyline.setAttribute('class', 'secondary-split');
secondaryGroup.appendChild(secondaryPolyline);
currentSplitSegment++;
} else {
clearInterval(splitDrawInterval);
}
}, drawSpeed * 4);
}
//animate
function triggerRandomVines() {
if (vineCount < maxVineCount) {
vineCount++;
createVines();
}
randomInterval = Math.random() * (maxInterval - minInterval) + minInterval;
setTimeout(triggerRandomVines, randomInterval);
}
setTimeout(triggerRandomVines, 2000);
//exit
}
}
});
</script>

CSS:

@keyframes vineFade {
0% {opacity: 1; stroke: #000000; filter: blur(0.0px)}
95% {opacity: 1; stroke: #000000; filter: blur(0.0px)}
100% {opacity: 0; filter: blur(6px); stroke: #464646;}
}

//VINES TREES FOREST//
#vinesMainContainer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  width: 75%;
  height: 200px;
  transform: translateX(-50%);
  align-items: center;
  bottom: 50%;
  left: 50%;
  padding: 0; 
}
#vinesContainer {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}
.vine {
  position: absolute;
  pointer-events: none;
  //filter: blur(0.0px);
  stroke: #000000;
  width: 100%;
  height: 100%;
  top: 0%;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: vineFade 59s forwards;
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 7%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 60%);
  mask-image: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 7%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 60%);
}