From 341dbe10238fbb2bc91fbe33df5748871f4152d2 Mon Sep 17 00:00:00 2001
From: gbrochar <gaetanbrochard@protonmail.com>
Date: Mon, 23 Nov 2020 06:38:10 +0100
Subject: [PATCH] many cube rotating around a point

---
 src/client/main.ts | 82 ++++++++++++++++++++++++++++++++++++++++++----
 views/index.ejs    |  2 +-
 2 files changed, 76 insertions(+), 8 deletions(-)

diff --git a/src/client/main.ts b/src/client/main.ts
index 93892c6..f12951f 100644
--- a/src/client/main.ts
+++ b/src/client/main.ts
@@ -139,7 +139,7 @@ function initBuffers(gl: any) {
 	// operations to from here out.
 	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 	// Now create an array of positions for the square.
-	const positions = [
+	const cube = [
 		// Front face
 		-1.0, -1.0, 1.0,
 		1.0, -1.0, 1.0,
@@ -171,6 +171,48 @@ function initBuffers(gl: any) {
 		-1.0, 1.0, 1.0,
 		-1.0, 1.0, -1.0,
 	];
+
+	const positions = [];
+
+	for (let j = -2; j < 3; j++) {
+		for (let i = 0; i < cube.length; i++) {
+			positions.push(cube[i] + j * 3);
+		}
+	}
+	for (let k = -1; k < 3; k++) {
+		for (let j = -2; j < 3; j++) {
+			if (j != 0) {
+				for (let i = 0; i < cube.length; i++) {
+					if (i % 3 != k) {
+						positions.push(cube[i] + j * 3);
+					} else {
+						positions.push(cube[i]);
+					}
+				}
+				for (let i = 0; i < cube.length; i++) {
+					if (i % 3 == k) {
+						positions.push(cube[i] + j * 3);
+					} else {
+						positions.push(cube[i]);
+					}
+				}
+				for (let i = 0; i < cube.length; i++) {
+					if (i % 3 == k) {
+						positions.push(cube[i] + j * 3);
+					} else {
+						positions.push(cube[i] - j * 3);
+					}
+				}
+				for (let i = 0; i < cube.length; i++) {
+					if (i % 3 == k) {
+						positions.push(cube[i] + j * 3);
+					} else {
+						positions.push(cube[i] - j * 3);
+					}
+				}
+			}
+		}
+	}
 	// Now pass the list of positions into WebGL to build the
 	// shape. We do this by creating a Float32Array from the
 	// JavaScript array, then use it to fill the current buffer.
@@ -179,23 +221,35 @@ function initBuffers(gl: any) {
 		new Float32Array(positions),
 		gl.STATIC_DRAW);
 
-	const faceColors = [
+	const myColors = [
 		[1.0, 1.0, 1.0, 1.0],
 		[1.0, 0.0, 0.0, 1.0],
 		[0.0, 1.0, 0.0, 1.0],
 		[0.0, 0.0, 1.0, 1.0],
 		[1.0, 1.0, 0.0, 1.0],
 		[1.0, 0.0, 1.0, 1.0],
+		[0.0, 0.0, 0.0, 1.0],
+		[0.0, 1.0, 1.0, 1.0],
 	];
 
+	let faceColors: any = [];
+
+	for (let i = 0; i < 70; i++) {
+		faceColors = faceColors.concat(myColors);
+	}
 	// Convert the array of colors into a table for all the vertices.
 
 	let colors: any = [];
 
 	for (let j = 0; j < faceColors.length; ++j) {
-		const c = faceColors[j];
+		const c = [
+			faceColors[Math.floor(Math.random() * 8)],
+			faceColors[Math.floor(Math.random() * 8)],
+			faceColors[Math.floor(Math.random() * 8)],
+			faceColors[Math.floor(Math.random() * 8)],
+		];
 		// Repeat each color four times for the four vertices of the face
-		colors = colors.concat(c, c, c, c);
+		colors = colors.concat(c[0], c[1], c[2], c[3]);
 	}
 
 	const colorBuffer = gl.createBuffer();
@@ -209,7 +263,7 @@ function initBuffers(gl: any) {
 	// indices into the vertex array to specify each triangle's
 	// position.
 
-	const indices = [
+	const indicesTemplates = [
 		0, 1, 2, 0, 2, 3,
 		4, 5, 6, 4, 6, 7,
 		8, 9, 10, 8, 10, 11,
@@ -218,6 +272,14 @@ function initBuffers(gl: any) {
 		20, 21, 22, 20, 22, 23,
 	];
 
+	const indices = [];
+
+	for (let j = 0; j < 70; j++) {
+		for (let i = 0; i < indicesTemplates.length; i++) {
+			indices.push(indicesTemplates[i] + 24 * j);
+		}
+	}
+
 	// Now send the element array to GL
 
 	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
@@ -272,10 +334,16 @@ function drawScene(gl: any, programInfo: any, buffers: any, deltaTime: number) {
 
 	// Now move the drawing position a bit to where we want to
 	// start drawing the square.
+	mat4.rotate(modelViewMatrix,
+		modelViewMatrix,
+		Math.PI,
+		[0, 1, 0]);
+
 	mat4.translate(
 		modelViewMatrix,
 		modelViewMatrix,
-		[-0.0, 0.0, -6.0]);
+		[0.0, 0.0, 48]);
+
 
 	mat4.rotate(modelViewMatrix,
 		modelViewMatrix,
@@ -344,7 +412,7 @@ function drawScene(gl: any, programInfo: any, buffers: any, deltaTime: number) {
 	}
 
 	{
-		const vertexCount = 36;
+		const vertexCount = 36 * 69;
 		const type = gl.UNSIGNED_SHORT;
 		const offset = 0;
 		gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
diff --git a/views/index.ejs b/views/index.ejs
index 500fe09..40f1139 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -12,7 +12,7 @@
 	</head>
 	<body>
 		<div id="root">
-			<canvas id='glCanvas' width='640' height='480'></canvas>
+			<canvas id='glCanvas' width='640' height='640'></canvas>
 		</div>
 		<script src="js/bundle.js"></script>
 	</body>