Skip to content

A Cube, made out of little cubes that are shifting around, written in JavaScript using P5JS

License

Notifications You must be signed in to change notification settings

johnnyawesome/ShiftingCubes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

ShiftingCubes

A Cube, made out of little cubes that are shifting around

Shifting Cubes

Info

The Project is written in JavaScript, using the P5JS library.

All little cubes are objects that move around on their own.

Credit

This was not my idea, all the credit goes to the YouTube-channel RenderedByBlender who posted this video. He did it using Blender and Python, I made my own version in P5JS, ready for the web!

How to use

You can change these variables to adjust cube-parameters to your liking:

//Size of the cubes
const cubeSize = 60;
//Distance between cubes
const cubeDist = 15;
const delta = cubeSize + cubeDist;
//Length in cubes of one side (e.g. '5' will produce a 5 x 5 x 5 cube)
const cubeNum = 5;

Change this block to create more free spots ("holes") inside the big cube:

//To leave some empty slots, there is a 15% chance
//that a cube will not be set
if (1 + Math.floor(Math.random() * 100) <= 15) {
  cubes.push(new Cube(xOff, yOff, -zOff, cubeSize, false))
} else {
  cubes.push(new Cube(xOff, yOff, -zOff, cubeSize, true));
}

Change this bit increase / decrease the chance that a little cube moves:

/*
Randomizes if a cube moves, even if it found an empty slot:
Too much simultaneous movement makes the cube look too busy
*/
randomizeMove(index) {
  if (Math.floor(Math.random() * 50) === 0) this.changeCoords(index);
}