How many baubles ( Decorative Balls) in the tree? (∑ of first n odd numbers)

how-many-baubles-decorative-balls-in-the-tree-of-first-n-odd-numbers.markdown

How many baubles ( Decorative Balls) in the tree? (∑ of first n odd numbers)

Got the idea from this tweet.

We can represent the sum of the first n odd numbers as a tree where each row has a number of items equal to the corresponding odd number:

• the 1st row has as many items as the 1st odd number, 1 = 2·1 - 1, 1 item in the middle
• the 2nd row has as many items as the 2nd odd number, 3 = 2·2 - 1, 1 item in the middle and 1 = 2 - 1 item on each of the two lateral sides (branches)
• the 3rd row has as many items as the 3rd odd number, 5 = 2·3 - 1, 1 item in the middle and 2 = 3 - 1 items on each of the two lateral sides (branches)

... and so on... until we get to the nth row, which has as many items as the nth odd number, 2·n - 1, 1 item in the middle and n - 1 items on each of the two lateral sides (branches)

 1         0 
 3        111
 5       00000
 7      1111111
 9     000000000
11    11111111111
13   0000000000000
15  111111111111111

So our sum is 1 + 3 + 5 + ... + (2·n - 1).

We can also bend the branches of this tree up until they form a 45° angle with the vertical. This means they form a 90° angle between them and we now have a n×n grid, which contains n·n = n² items.

1 10101010
2 10101011
3 10101000
4 10101111
5 10100000
6 10111111
7 10000000
8 11111111

  12345678

A Pen by Siddhant Khare on CodePen.

License.

index.pug

mixin parity(i, cls)
	li.leaf(class=cls)

- let n = 10, m = ~~(.5*n - 1);

body(style=`--n: ${n}`)
	ul.deco
		li.star 🌟
		li: ul.tree(style=`--p: ${n%2}`)
			- for(let i = 0; i < n; i++)
				li.row(style=`--i: ${i}`): ul
					+parity(i, 'mid')
					- for(let k = 0; k < 2; k++)
						li.branch(style=`--k: ${k}`): ul
							- for(let j = 0; j < i; j++)
								+parity(i)

style.scss

$m: 2;
$d: 2*1em;
$z: 2*$d;
$p: 42.5%;
$t: '🎅⛄️merry✨✨christmas🕯️☃️ from Siddhant';
$l: 2*(str-length($t) + 1);

%anim { animation: a 4s ease-in-out alternate infinite }

%ymov { animation-name: ymov }
%xrot { animation-name: xrot }
%zrot { animation-name: zrot }
%fade { animation-name: fade }

@keyframes xmov { 
	to { transform: translate(-50%) }
}

@keyframes ymov { 
	0%, #{$p} { transform: translatey(0) }
	#{100% - $p}, 100% { transform: translatey(calc(var(--i)*#{$d}*(1.4 - 1))) }
}

@keyframes xrot {
	0%, #{$p} { transform: perspective(35em) translatez(-$z) rotatex(0deg) translatez($z) rotatex(0deg) }
	#{100% - $p}, 100% { transform: perspective(35em) translatez(-$z) rotatex(calc(var(--sgnp)*.5turn)) translatez($z) rotatex(calc(var(--sgnp)*-.5turn)) }
}

@keyframes zrot {
	0%, #{$p} { transform: rotate(0deg) }
	#{100% - $p}, 100% { transform: rotate(calc(var(--sgnk)*45deg)) }
}

@keyframes fade {
	0%, #{$p} { opacity: 0 }
	#{100% - $p} { opacity: 1 }
}

*, :before, :after {
	--notk: calc(1 - var(--k));
	--sgnk: calc(var(--sgnl, 1)*(1 - 2*var(--k)));
	--sgnp: calc(1 - 2*var(--p));
	margin: 0;
	padding: 0;
	min-width: $d; min-height: $d
}

body {
	overflow-x: hidden;
	min-height: 100vh;
	background: url(https://images.unsplash.com/photo-1512389142860-9c449e58a543?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 50%/ cover #ccc;
	background-blend-mode: overlay;
	font: 900 calc(25vmin/(var(--n) + 2))/ #{$m} monospace;
	text-align: center;
	
	&:after {
		position: fixed;
		bottom: 0; left: 0;
		color: crimson;
		font-size: 1.5em;
		letter-spacing: 1em;
		text-shadow: 0 0 1px #000, 0 0 2px #000;
		white-space: nowrap;
		animation: xmov $l*.2s linear infinite;
		content: '#{$t}#{$t}'
	}
}

ul { list-style: none }

.deco {
	padding-bottom: calc((1.4 - 1)*(var(--n) - 1)*#{$d});
	transform-style: preserve-3d;
	
	&:before, &:after {
		--p: 0;
		grid-row: 1;
		grid-column: 1;
		margin: 2em;
		border-radius: .5em;
		box-shadow: 0 0 .5em #fff, 0 0 .25em #fff;
		background: rgba(#fff, .75);
		font-size: 1.25em;
		@extend %anim;
		animation-name: xrot, fade;
		counter-reset: n var(--n);
		content: 'grid: n·n = n² = ' counter(n) '²'
	}
	
	&:before {
		--p: 1;
		animation-direction: alternate-reverse;
		counter-reset: n var(--n);
		content: 'incr. rows: 1 + 3 + ... + (2·' counter(n) ' - 1) = ∑(2·i - 1)'
	}
}

.star { font-size: 2em }

.tree {
	position: relative;
	
	&:before, &:after {
		position: absolute;
		bottom: 100%; left: 0;
		@extend %anim;
		@extend %fade;
		animation-direction: alternate-reverse;
		content: 'row number:'
	}
	
	&:after {
		right: 0; left: auto;
		content: 'items/ row (2·i - 1):'
	}
}

ul:not(.tree) { display: grid }

.row {
	--p: 0;
	position: relative;
	@extend %anim;
	@extend %ymov;
	counter-reset: i calc(var(--i) + 1) o calc(2*var(--i) + 1);
	
	&:nth-child(2n) { --p: 1 }
	
	> ul {
		place-content: center;
		grid-template-columns: repeat(3, max-content);
		grid-auto-flow: row dense
	}
	
	&:before, &:after {
		position: absolute;
		top: 0; right: 0;
		padding: 0 .5em;
		@extend %anim;
		@extend %fade;
		animation-direction: alternate-reverse;
		content: counter(o)
	}
	
	&:before {
		left: 0; bottom: 0;
		background: hsl(0, 0%, calc(85% + (1 - 2*var(--p))*5%));
		text-align: left;
		content: counter(i);
	}
}

.mid { grid-column: 2 }

.branch {
	transform-origin: calc(var(--notk)*100% + var(--sgnk)*#{.5*$d});
	@extend %anim;
	@extend %zrot;
	
	.row:last-child & {
		position: relative;
		
		&:after {
			position: absolute;
			top: 100%; left: calc(50% - #{.5*$d});
			box-shadow: 0 4px crimson;
			text-align: center;
			@extend %anim;
			animation-name: zrot, fade;
			counter-reset: n var(--n);
			content: counter(n)
		}
	}
	
	li, ul:after, &:after {
		--sgnl: -1;
		@extend %anim;
		@extend %zrot
	}
	
	ul {
		grid-template-columns: repeat(calc(var(--i) + 1), max-content);
		
		&:after {
			grid-row: 1;
			grid-column: calc(var(--i)*var(--k) + 1);
			animation-name: zrot, fade;
			content: counter(i)
		}
	}
}

.leaf {
	overflow: hidden;
	position: relative;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px hsl(calc(var(--p)*120), 50%, 25%);
	background: hsl(calc(var(--p)*120), 50%, 75%);
	
	&:before, &:after {
		position: absolute;
		left: 0;
		@extend %anim;
		@extend %fade;
		content: '🎄🎀';
		
		.row:nth-child(odd) & { bottom: 0 }
	}

	&:before {
		animation-direction: alternate-reverse;
		content: '🌲🎁'
	}
}