<canvas id="patternCanvas"></canvas>
<div id="cloud"></div>
<div id="cloud"></div>

<button id="generateTreeButton">Generate New Tree</button>

<div class="footer">
    Made by Rafa
</div>

body {
  margin: 0;
  background: #fffbed;
}
.footer {
    position: absolute;
    bottom: 0;
    right: 0;
    font-family: monospace;
    color: #000;
    padding: 10px;
    font-size: 12px;
}
/* -------------------------------------- */
.leaf {
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: #fff;
	border-radius: 2px;
	box-shadow: 0px 0px 2px 0px rgb(255, 255, 255);
}
.fruit {
	background-color: #e66e4a;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: 0px 0px 4px 1px rgb(255, 102, 0);
	z-index: 1;
}
body {
	overflow: hidden;
}
body::after {
	content: "";
	display: block;
	width: 80vh;
	height: 80vh;
	max-height: 100vw;
	max-width: 100vw;
	background-color: #2a574d;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 10%;
	border-radius: 50%;
	z-index: -1;
	clip-path: circle(150% at 50% 218%);
}
body::before {
	content: "";
	display: block;
	width: 80vh;
	height: 80vh;
	max-height: 100vw;
	max-width: 100vw;
	background-color: #9dbeb7;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 10%;
	border-radius: 50%;
	z-index: -2;
}

/* easy cloud from NANOUU : https://codepen.io/antoniasymeonidou/pen/BawKMqg */
#cloud {
	background: rgb(255, 255, 255);
	width: 300px; 
	height: 100px;
	border-radius: 150px;	
	box-shadow: 10px 10px rgba(0,0,0,0.2);
	animation: move 16s ease-in-out infinite;
	position: absolute;
	top: 0;
	bottom: 20%;
	left: 0;
	right: 0;
	margin: auto;
	z-index: -1;
	opacity: 0.5;
}
#cloud:nth-child(2) {
 animation-delay: -4s;
 bottom: 10%;
 scale: 0.7;
}
  #cloud:after {
	content: '';
	background: rgba(255, 255, 255);
	position: absolute;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	top: -50px;
	left: 50px;
  }
  
  #cloud:before {
	content: '';
	background: rgba(255, 255, 255);
	position: absolute;
	width: 170px;
	height: 150px;
	border-radius: 50%;
	top: -90px;
	right: 40px;
  }
  
  @keyframes move {
	0% {
	  transform: translatex(-100px);
	}
	50% {
	  transform: translatex(100px);
	}
	100% {
		transform: translatex(-100px);
	}
  }
button {
	position: absolute;
	left: 10px;
	top: 10px;
	font-size: 14px;
	padding: 8px 12px;
	border: none;
	border-radius: 4px;
	background-color:#2a574dcc;
	color: #fff;
}
button:hover {
	background-color:#2a574d;
}

const canvas = document.getElementById('patternCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let leafCounter = 1;

function drawBranch(x, y, angle, branchLength, lineWidth) {
  if (branchLength < 5) {
    const leaf = document.createElement('div');
    leaf.classList.add('leaf');
    if (leafCounter % 220 === 0) {
      leaf.classList.add('fruit');
    }
    leaf.style.left = `${x - 5}px`; 
    leaf.style.top = `${y - 5}px`;
    document.body.appendChild(leaf);

    leafCounter++;
    return;
  }
  if (branchLength < 5) return; 

  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = '#412e1f'; 

  ctx.beginPath();
  ctx.moveTo(x, y);
  const endX = x + Math.cos(angle) * branchLength;
  const endY = y + Math.sin(angle) * branchLength;
  ctx.lineTo(endX, endY);
  ctx.stroke();
	
	let branchOutAngle = Math.floor(Math.random() * 25) + 15;
	
  const numBranches = Math.floor(Math.random() * 3) + 1;
  for (let i = 0; i < numBranches; i++) {
    const direction = Math.random() < 0.5 ? 1 : -1;
    const newAngle = angle + direction * (i % (180 / branchOutAngle) === 0 ? Math.PI / (180 / branchOutAngle) : -Math.PI / (180 / branchOutAngle));
    const newLength = branchLength * (0.6 + Math.random() * 0.2);
    drawBranch(endX, endY, newAngle, newLength, lineWidth * 0.8);
  }
}

function removeLeavesAndFruits() {
  const leavesAndFruits = document.querySelectorAll('.leaf');
  leavesAndFruits.forEach((leaf) => {
    leaf.remove();
  });
}


function drawCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  leafCounter = 1;
	
	removeLeavesAndFruits();

  const initialX = canvas.width / 2;
  const initialY = window.innerHeight / 2 + 120;
  const initialAngle = -Math.PI / 2;
  const initialBranchLength = Math.min(120, Math.min(window.innerWidth / 4, window.innerHeight / 5.5));
  const initialLineWidth = 7;

  drawBranch(initialX, initialY, initialAngle, initialBranchLength, initialLineWidth);
}
drawCanvas();
window.addEventListener('resize', () => {
  drawCanvas();
});

const generateTreeButton = document.getElementById('generateTreeButton');
generateTreeButton.addEventListener('click', () => {
  drawCanvas();
});