04 A New Dimension

In order to prepare for working with 3d objects (my plan for representing the planets), I wanted to familiarize myself with the tools in p5.js that enable 3d. As it turns out, they’re rather simple. You must simply declare the canvas with an extra argument (WEBGL), and then you may call commands such as orbitControl() which enables movement in 3d via the mouse.

To practice the placing of objects in 3d, I played around with the code snippets provided in the documentation. Firstly, it’s just a sphere comprising rings of cubes.

I added the ability to make concentric layers, here is 1 internal layer.

To ensure this looks nice I am scaling the size of the cubes, the distance between the spheres of cubes, and the line thickness of each edge of the cubes.

And at 9 internal layers, 10 concentric spheres in total, some interesting shapes and patterns emerge.

Below is the code that was used to generate these images. I achieve different results by tweaking the values I have passed into different functions, chiefly the scale of the main sphere and number of sub-spheres passed into drawCubeSpheres(50, 10); 50 being the size used for all of these images, and 10 being the amount of spheres in these final two images

function setup() {

    createCanvas(1150, 750, WEBGL);

    angleMode(DEGREES);
    noFill();
    stroke(32, 8, 64, 255);
    describe(
        "Users can click on the screen and drag to adjust their perspective in 3D space. The space   contains a sphere of dark purple cubes on a light pink background.");
}

function draw() {

    background(250, 180, 200);

    // Call every frame to adjust camera based on mouse/touch

    orbitControl();

    drawCubeSphere(50,10);

}

function drawCubeSphere(scale, numSpheres) {
    scale = ceil(scale);
    // number of spheres of cubes
    for (let i = 0; i < numSpheres; i++) {
        // Rotate rings in a half circle to create a sphere of cubes
        for (let zAngle = 0; zAngle < 180; zAngle += 30) {
            // Rotate cubes in a full circle to create a ring of cubes
            for (let xAngle = 0; xAngle < 360; xAngle += 30) {
                push();
                // Rotate from center of sphere
                rotateZ(zAngle);
                rotateX(xAngle);
                // Then translate down (eg.)50 * 8 = 400 units
                translate(0, (scale * 8) / (i + 1), 0);

  
                strokeWeight(scale / 10 / (i + 1)); // scales down
                // strokeWeight((scale / 10) * (i + 1)); // scales up
                // strokeWeight(5); // constant
                box(scale / (i + 1)); // scales down
                // box(scale * (i + 1)); // scales up
                // box(scale); // constant
                pop();
            }
        }
    }
}

What I’m working on next in this area is tracing 3d objects around a circular/elliptical field. This project is involving more math revision than I anticipated but i do welcome the process of refreshing my geometry.

Music

I must admit little progress has been made the last couple of weeks due to my failing to schedule time experimenting with music, I do however have a demonstration of the music in its starting state. I am working in Bitwig Studio as opposed to Ableton Live because I’ve found it much more stable and crashes far less often. The video shows one track per planet/celestial object and in this current state each orbiting body is introduced slowly to get the listener accustomed to the rhythm before further complicating it with more and more cycles of notes.

This week I will be playing more with the actual sound or timbre of each planet as well as trying more structures that the piece might work in.