xxxxxxxxxx
const colourCodes = ['#73C8A9', '#DEE1B6', '#E1B866', '#BD5532', '#373B44']
//Stores data about the shapes we'll draw:
// position, size, and colour
const shapesData = [];
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL); //3d needs a different "renderer"
createShapesData(random(10, 100)); //once, only!
}
function draw() {
background(100)
//camera
orbitControl(5) //adjust camera based on mouse actions
//lights
ambientLight("gray");
//colour, and x, y, z of direction
directionalLight(color(200, 200, 200), 1, 1, -1);
//draw our shapes!
for (let oneShapeData of shapesData) {
drawShape(oneShapeData);
}
}
function createShapesData(numShapes) {
let clumpSpread = 60;
shapesData.length = 0; //throw away any old shapesData
for (let i = 0; i < numShapes; i++) {
shapesData.push(createOneShapeData(clumpSpread));
}
}
function createOneShapeData(clumpSpread) {
return {
color: random(colourCodes),
pos: createRandomPosition(clumpSpread), // {x,y,z}
size: {
w: random([40, 80, 160]), //width
h: random([40, 80, 160]), //height
d: random([40, 80, 160]), //depth,
},
rotationX: 0, //not in use.
rotationY: 0
}
}
/**
Draw a 3d cuboid with position, size, colour specified in the given "oneShapeData" data
*/
function drawShape(oneShapeData) {
push()
const pos = oneShapeData.pos;
translate(pos.x, pos.y, pos.z) //temporarily move origin
// rotateY(oneShapeData.rotationY)
// rotateX(oneShapeData.rotationX)
noStroke();
ambientMaterial(oneShapeData.color);
const size = oneShapeData.size;
box(size.w, size.h, size.d) //create a box at the current origin!
pop()
}
/**
Called when p5.js notices a key has been pressed.
Global variable "key" will be set (e.g. to "s" or " ")
*/
function keyPressed() {
if (key === " ") {
let numShapes = random(10, 100);
createShapesData(numShapes);
}
}
function createRandomPosition(clumpSpread) {
//we'll use randomGaussian to give randomness
//with a bell-curve distribution around 0
//Alternatively, you can experiment with random()
return {
x: randomGaussian(0, clumpSpread * 2),
y: randomGaussian(0, clumpSpread * 2),
z: randomGaussian(0, clumpSpread * 2),
}
}
function keyPressed() {
// this will download the first 5 seconds of the animation!
if (key === 's') {
saveGif('921189_boxClump', 5);
}
}