let cubes = [];
const cubeNumber = 3;
let boxSize = 50;
let spacing = 4;
let shift = -0.5 * (boxSize + spacing) * (cubeNumber - 1);
let m = boxSize + spacing;
function setup() {
createCanvas(800, 800, WEBGL);
squaresize = 4; // Size of each smaller cube
for (let z = 0; z < cubeNumber; z++) {
for (let y = 0; y < cubeNumber; y++) {
for (let x = 0; x < cubeNumber; x++) {
cubes.push(new Cube(x, y, z));
}
}
}
}
function draw() {
background(0, 0, 0, 64);
clear();
orbitControl();
for (const c of cubes) {
push();
// Translate so the newest cube being drawn is centered at the origin
translate(
c.xPos * m + shift,
c.yPos * m + shift,
c.zPos * m + shift
);
// Change stroke color for selected cubes
stroke(0);
// Draw the boxes
c.draw();
pop();
}
}
class Cube {
constructor(x, y, z) {
this.xPos = x;
this.yPos = y;
this.zPos = z;
// this.rot = new Quaternion();
this.calculateColors();
}
draw() {
const hSize = boxSize / 2;
shininess(255);
push();
// const {axis, angle} = this.rot.axisAngle();
// rotate(angle, axis);
// Draw the outlines
strokeWeight(4);
noFill();
box(boxSize);
strokeWeight(0);
// noStroke();
// Front faces
push();
translate(0, 0, hSize);
fill(this.frontColor);
plane(boxSize);
pop();
// Back faces
push();
rotateY(PI);
translate(0, 0, hSize);
fill(this.backColor);
plane(boxSize);
pop();
// Left faces
push();
rotateY(3*Math.PI/2);
translate(0, 0, hSize);
fill(this.leftColor);
plane(boxSize);
pop();
// Right faces
push();
rotateY(Math.PI/2);
translate(0, 0, hSize);
fill(this.rightColor);
plane(boxSize);
pop();
// Top faces
push();
translate(0, -hSize, 0);
rotateX(Math.PI/2);
fill(this.topColor);
plane(boxSize);
// Bottom faces
translate(0,0,-boxSize);
fill(this.bottomColor);
plane(boxSize);
pop();
pop();
}
// Choose the colors of each rubik's cube face
calculateColors() {
this.bottomColor = [255,255,0]; // Yellow
this.frontColor = [255,0,0] // Red
this.leftColor = [0,255,0]; // Green
this.rightColor = [0,0,255] // Blue
this.topColor = [255,255,255]; // White
this.backColor = [255,128,0]; // Orange
}
}
// --------------------------------------------------------------------
// simple cubes
// let angleX = 0.01;
// let angleY = 0.02;
// function setup() {
// createCanvas(800, 800, WEBGL);
// squaresize = 40; // Size of each smaller cube
// }
// function draw() {
// background(0);
// orbitControl();
// rotateX(angleX);
// rotateY(angleY);
// for (let i = 0; i < 5; i++) {
// for (let j = 0; j < 5; j++) {
// for (let k = 0; k < 5; k++) {
// push();
// // Random color with opacity
// let r = random(255);
// let g = random(255);
// let b = random(255);
// let alpha = random(100, 200); // Opacity
// ambientMaterial(r, g, b, alpha);
// translate(i * squaresize - 90, j * squaresize - 90, k * squaresize - 90);
// box(squaresize);
// pop();
// }
// }
// }
// angleX -= 0.001;
// angleY -= 0.001;
// }
// -----------------------------------------------------------------------------
// Number of nodes in each layer:
// const noinput = 3;
// const nohidden = 6;
// const nooutput = 1;
// let angleX = 0.01;
// let angleY = 0.02;
// const gridSize = 5;
// const squaresize = 40;
// // Define the exemplars to learn from for 3D XOR:
// let training_data_3d = [
// { inputs: [0, 0, 0], outputs: [0] },
// { inputs: [0, 0, 1], outputs: [1] },
// { inputs: [0, 1, 0], outputs: [1] },
// { inputs: [0, 1, 1], outputs: [0] },
// { inputs: [1, 0, 0], outputs: [1] },
// { inputs: [1, 0, 1], outputs: [0] },
// { inputs: [1, 1, 0], outputs: [0] },
// { inputs: [1, 1, 1], outputs: [1] }
// ];
// let nn; // Global neural network variable
// const learningrate = 0.2;
// // Train this number of times per draw()
// const notrain = 10;
// function randomWeight()
// {
// return ( AB.randomFloatAtoB ( -0.5, 0.5 ) );
// }
// function setup() {
// createCanvas(800, 800, WEBGL);
// $.getScript ( "/uploads/codingtrain/matrix.js", function()
// {
// $.getScript ( "/uploads/codingtrain/nn.js", function()
// {
// nn = new NeuralNetwork ( noinput, nohidden, nooutput );
// });
// });
// }
// function draw() {
// background(255);
// clear();
// orbitControl();
// if ( typeof nn == 'undefined' ) return;
// nn.setLearningRate(learningrate);
// for (let i = 0; i < notrain; i++) {
// let data = random(training_data_3d);
// nn.train(data.inputs, data.outputs);
// }
// rotateX(angleX);
// rotateY(angleY);
// for (let i = 0; i < gridSize; i++) {
// for (let j = 0; j < gridSize; j++) {
// for (let k = 0; k < gridSize; k++) {
// push();
// // Calculate coordinates
// let x = i * squaresize - 90;
// let y = j * squaresize - 90;
// let z = k * squaresize - 90;
// // Input values based on coordinates
// let inputs = [
// map(x, -90, 90, 0, 1),
// map(y, -90, 90, 0, 1),
// map(z, -90, 90, 0, 1)
// ];
// // Predict the output using the neural network
// let output = nn.predict(inputs);
// // Map the output to color
// let col = map(output, 0, 1, 0, 255);
// fill(col);
// box(squaresize);
// pop();
// }
// }
// }
// angleX -= 0.001;
// angleY -= 0.001;
// }
// Number of nodes in each layer:
// const noinput = 3;
// const nohidden = 9;
// const nooutput = 1;
// const gridSize = 5;
// const squaresize = 40;
// const learningrate = 0.2;
// function randomWeight()
// {
// return ( AB.randomFloatAtoB ( -0.5, 0.5 ) );
// }
// var nn; // Global neural network variable
// let training_data_3d = [
// { inputs: [0, 0, 0], outputs: [0] },
// { inputs: [0, 0, 1], outputs: [1] },
// { inputs: [0, 1, 0], outputs: [1] },
// { inputs: [0, 1, 1], outputs: [0] },
// { inputs: [1, 0, 0], outputs: [1] },
// { inputs: [1, 0, 1], outputs: [0] },
// { inputs: [1, 1, 0], outputs: [0] },
// { inputs: [1, 1, 1], outputs: [1] }
// ];
// function setup() {
// createCanvas(800, 800, WEBGL);
// $.getScript ( "/uploads/codingtrain/matrix.js", function()
// {
// $.getScript ( "/uploads/codingtrain/nn.js", function()
// {
// nn = new NeuralNetwork ( noinput, nohidden, nooutput );
// });
// });
// }
// function draw() {
// if ( typeof nn == 'undefined' ) return;
// nn.setLearningRate ( learningrate );
// background(255);
// orbitControl();
// // Train the neural network
// for (let i = 0; i < 10; i ++) {
// let data = random ( training_data_3d );
// nn.train ( data.inputs, data.outputs );
// }
// for (let i = 0; i < gridSize; i++) {
// for (let j = 0; j < gridSize; j++) {
// for (let k = 0; k < gridSize; k++) {
// drawCube(i,j,k);
// }
// }
// }
// }
// function drawCube(i,j,k) {
// push();
// translate(i * squaresize - 90, j * squaresize - 90, k * squaresize - 90);
// let inputs = [i / gridSize, j / gridSize, k / gridSize];
// let output = nn.predict(inputs);
// // console.log("i: ",inputs,"o: ",output)
// y = output[0];
// fill(color(y*255, y*255, y*255, y*250));
// stroke('black');
// // noStroke();
// box(squaresize);
// pop();
// }