Falling Blocks of Black and White with Artificial Physics

Falling and bouncing boxes of black and white with artificial physics in a grey world that is constantly speeding and slowing and with periodic resetting. It was made using P5 for the graphics and matter.js for the physics engine.

Here is a screen capture video of it running:

To view the running animation click below:

https://dnassler.github.io/creative-coding/expMatter1/build/

The animation by default will have a crickets sound in the background which is nice but can be muted by pressing the ‘h’ key and, in the control panel, clicking/checking the ‘isMuted’ option. Next press the ‘h’ key again to make controls disappear. An interesting sound to accompany the animation is sound of Jupiter from a NASA recording. Open the following link in a separate tab/window:

Triangular Patterns With Animation

https://dnassler.github.io/creative-coding/triangles2/build/

This P5 sketch involves constantly shifting triangle patterns with an invisible grid of possible triangle positions where only a single triangle may occupy a particular grid location at a given moment.

Various attributes can be changed with the control panel on the right but the changes will not be applied until the user clicks on the ‘resetScene’ button in the same control panel. There are a few exceptions including: the scale of the scene can be modified in realtime and the sounds are controllable with immediate affect (i.e. try changing sounds by modifying the ‘useAlternateSounds’ control, by changing the volume or muting it entirely).

Decreasing the number of rows or columns will increase the size of the triangles. Increasing the number of rows/columns will decrease their size and will result in a more sparse layout of shapes unless the ‘numBlocksOnReset’ attribute is increased as well.

To get a feel for some of the possibilities, try clicking on the ‘randomConfiguration’ button.

Also try changing the colour mode before changing or resetting the configuration to see its effect.

 

ThreeJS With Pointlight Shadows and Star Sphere

https://dnassler.github.io/creative-coding/threejs/expTriangles1/build

This is another experiment using the ThreeJS library I made recently to learn about point light and shadows and creating a background surrounding illusion of stars.

The scene starts with only 2 of the blue shapes but the user can add more shapes or remove them one by one with the control panel on the right and clicking on the ‘addShapes’ or ‘killShape’ buttons.

The point light source can be moved by changing it’s position values via the control panel. Other light attributes can also be tweaked by the user.

There is a rotating star field in the background that surrounds the scene of blue shapes and this can also be controlled.

The ground itself can be raised or lowered to change the feel of the shapes in the scene. When the ground in raised, the shapes appear as if they are smaller objects meandering in a larger space. When the ground is lowered, the shapes hover over it.

Finally, the viewpoint perspective of the scene can be changed with a mouse to rotate around, over and under (click and drag the mouse to do so). Also the view can be zoomed in and out (use the mouse scroll wheel or two fingers sliding without pressing on an apple mouse/touchpad).

The below image shows the scene with the ground level raised so that only the very tops of the shapes are visible. This makes me think of skaters at night on a large illuminated surface of freshly smoothed ice.

Another Abstract Animated 2D Sketch

This is sketch shows an animated perspective panning and zooming in and out from a scene of frequently changing coloured squares. It works well when paired with droning abstract electronic style music such as this song (https://itun.es/ca/5Sz7P?i=703437800) by The Field called 20 Seconds of Affection from their album Cupid’s Head. Or maybe this song (https://itun.es/ca/5Sz7P?i=703437698):  Black Sea, from the same album. And if those aren’t sufficiently interesting then try this song by Monolake (https://itun.es/ca/7Ln1q?i=282385327) called Arte.

Click below to see the sketch live:

https://dnassler.github.io/creative-coding/expSquares2/

And here are a few examples of the application running:

Experimenting With ThreeJS PointLight, Shadows and Sound With Animation

There is a set of blocks of slightly irregular shape. There are shifting shadows from a mysterious point-light source that sometimes descends from above. When the light source is close to the blocks they feel an invisible rotational force and as they rotate they emit a screeching sound proportional to their speed. The light itself seems to make strange electronic noise sounds as if it contains or is directed by a mysterious unknowable intelligence.

The perspective of this 3d scene is adjustable in various ways such as by manually clicking and moving the mouse or zooming in and out by the scroll wheel.

To view it running click here:

https://dnassler.github.io/creative-coding/threejs/exp3/index.html

Experiment with 3D Blocks and Story

Here shows animated blocks “living” within a strange limited artificial world which cycles through different phases “controlled” by the pattern of the blocks’ movement. The initial phase shows “intelligent” incomprehensible block movement in a relatively safe state where the surrounding walls’ blue ripples represent a shield force that protects them from harmful particles. After a while the blocks get tired and feel no motivation to continue and so stop. They rest. But as a result, slowly the blue ripples stop appearing on the surrounding walls. Then the walls show particles hitting them and sometimes those hits correlate to a hit of some central blocks. A hit block will flash and resist the disturbance. After a time the collective decides enough is enough and begins a new phase of synchronized movement in a kind of sine wave pattern. Eventually this succeeds in restoring the surrounding walls’ protective powers and the blocks regain autonomy. They regain their complex coordinated movements. Until the cycle repeats again.

https://dnassler.github.io/p5/creative-coding/exp_6b/index.html

The speed of the blocks “inside” can be controlled by clicking and dragging the mouse or by touching the screen and dragging left and right.

Here is a recording of an example run:

3d Animated Blocks With “Intelligent” Movement

This is another p5 experiment with floating objects that constantly reposition themselves atop different towers while avoiding conflicts with other moving objects that are attempting to land at the same spot. The colours and scene change periodically and there are subtle changes to how the floaters arrange themselves on the towers initially.

Some floaters come “from space” and some launch themselves back “into space”. Other floaters rotate and flip their way around the landscape’s “sky” to land on some other tower top that is available.

I find the animation interesting especially if you have patience watching.

https://dnassler.github.io/p5/creative-coding/exp_5/index.html

Here is a screen recording of an example 10minutes:

3d Animated Towers #1

Here is my first experiment using WebGL with p5 javascript library for creative coding. It shows bouncing towers with coloured top blocks in varying light and constantly changing camera perspective. Every so often the blocks will reset to a subtly different configuration with a different wave frequency that dictates their up/down motion.

https://dnassler.github.io/p5/creative-coding/exp_4/index.html

As with this all, I recommend having patience and try listening to abstract music while watching. In particular, I would recommend Laurie Spiegel, her album called “The Expanding Universe” from 1980 (https://itun.es/ca/WiLA2).

https://dnassler.github.io/p5/creative-coding/exp_4b/index.html

Here is another variation that allows for more control of the wave speed using keyboard controls. Press the “+” or “-” keys to speed up or slow down the wave-like motion of the towers. Press “m” to let the mouse position control the speed. Press “2” or “1” to decrease or increase the frame rate “jumpiness”. Press “p” to pause all movement. Also clicking and dragging the with the left mouse button will shift the perspective (i.e. “orbit”)  around the scene centre point.

https://dnassler.github.io/creative-coding/3dBlockTowerWave/

Black and White Rotating Arcs and Circular Shapes

This is an interesting black and white animated p5 sketch I did recently.

https://dnassler.github.io/p5/creative-coding/exp_arcs2/index.html

Blooming Circles In Rotating Starfield

This P5 sketch shows an overlapping pattern of constantly changing colourful circles expanding, contracting or fading in a star field that rotates to the viewer’s perspective. The speed is controllable by clicking and draging left/right. I recommend a slower speed generally. This sketch is appreciated better when accompanied by appropriate abstract music or sound-art.

https://dnassler.github.io/p5/creative-coding/exp_arcs3/index.html