Skip to content

Instantly share code, notes, and snippets.

@neizod
Created June 10, 2022 10:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neizod/8275e2de5eb5909bd0091c500de2b480 to your computer and use it in GitHub Desktop.
Save neizod/8275e2de5eb5909bd0091c500de2b480 to your computer and use it in GitHub Desktop.
proof without words for 1²+2²+3²+...+n² = n(n+1)(2n+1)/6. illustrated with three.js
/*
* | y
* |
* .
* / \
* z / \ x
*
*/
const scene = new THREE.Scene();
scene.background = new THREE.Color('#ffffff');
const aspect = window.innerWidth / window.innerHeight;
const d = 9;
const camera = new THREE.OrthographicCamera(-d*aspect, d*aspect, d, -d, 1, 1000);
camera.position.set(125, 75, 175);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
make_cube = (x, y, z, color=0xffffff) => {
const geometry_body = new THREE.BoxGeometry(.98, .98, .98);
const material = new THREE.MeshBasicMaterial({ color: color });
const cube = new THREE.Mesh(geometry_body, material);
cube.position.set(x, y, z);
scene.add(cube);
const geometry_border = new THREE.BoxGeometry(1, 1, 1);
const edges = new THREE.EdgesGeometry(geometry_border);
const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: '#000000' }));
line.position.set(x, y, z);
scene.add(line);
}
const n = 5;
const dy = 3;
const colors = ['#e50000', '#ff8d00', '#ffee00', '#028121', '#004cff', '#770088'];
let ic = 0;
for (let x=0; x < n; x++) {
for (let z=0; z < n; z++) {
for (let y=0; y < n; y++) {
if (x <= y && z >= n-y-1) {
make_cube(x-n, y+dy, z, colors[ic]);
}
}
}
}
ic += 1;
for (let x=1-n; x < n; x++) {
for (let z=0; z < n; z++) {
for (let y=0; y < n; y++) {
if (z >= n-y-1 && Math.abs(x) < n-y) {
make_cube(x, y+dy, z, colors[ic]);
}
}
}
}
ic += 1;
for (let x=0; x < n; x++) {
for (let z=0; z < n; z++) {
for (let y=0; y < n; y++) {
if (x >= n-y-1 && z >= n-y-1) {
make_cube(x+1, y+dy, z, colors[ic]);
}
}
}
}
ic += 1;
for (let x=0; x < n; x++) {
for (let z=0; z < n; z++) {
for (let y=0; y < n; y++) {
if (x < n-y && z < n-y) {
make_cube(x-n, y-dy, z, colors[ic]);
}
}
}
}
ic += 1;
for (let x=1-n; x < n; x++) {
for (let z=0; z < n; z++) {
for (let y=0; y < n; y++) {
if (z < n-y && Math.abs(x) < y+1) {
make_cube(x, y-dy, z, colors[ic]);
}
}
}
}
ic += 1;
for (let x=0; x < n; x++) {
for (let z=0; z < n; z++) {
for (let y=0; y < n; y++) {
if (x >= y && z < n-y) {
make_cube(x+1, y-dy, z, colors[ic]);
}
}
}
}
const thegeometry = new THREE.BoxGeometry(2*n+1, 2*n+1, n);
const theedges = new THREE.EdgesGeometry(thegeometry);
const theframe = new THREE.LineSegments(theedges,
new THREE.LineDashedMaterial({ color: '#000000', scale: 3, dashSize: 1, })
);
theframe.computeLineDistances();
theframe.position.set(0, 2, (n-1)/2);
scene.add(theframe);
renderer.render(scene, camera);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment