SpringMesh

Inspired by the natural phenomena of cloths and liquids, Ricardo Sanchez explores spring mesh dynamics using box2D physics. SpringMesh is an interactive cloth you can twist, pull and deform using multitouch or gravity.

Created by Ricardo Sanchez and published by CreativeApplications.Net
Made with openFrameworks, an open source C++ toolkit.

SpringMesh was built using ofxBox2d physics addon for openFrameworks. It consists of a series of particles interconnected by springs, border particles are static allowing the mesh to maintaing its original form, while inner particles repel, attract to user input (multitouch) or fall under gravity. Its colour is a direct representation of the forces applied, the stronger the force the lighter the colour.

Building the Mesh

The grid is build by specifying the number of horizontal cells, from it we calculate the number of vertical cells by using a gridRatio (rows = (int)( cols / gridRatio )). The rest fall in place with a couple of for loops (to calculate positions: float x = colCellDist * i; and to create particles: if ( i == 0 || i == cols || j == 0 || j == rows ) {//stuff}}). Particles with no mass are static, these are created at the edges that maintaing the mesh in place, stored in a particle container. The rest of the particles are created inside, these have mass, density, and friction properties also stored in a particle container. Then we create horizontal connections by using the newly created particles and the previous in the container with index [idx - 1], stored in a spring container. Vertical connections follows same principle as before but now we take the previous particle from the container with index [idx - cols - 1], stored in a spring container.

Rendering wireframe mesh

For the wireframe view we loop through the springs container, getting both sides of the spring, its colour is calculated by the separation distance of both particles. By calculating distance between spring bodies positions we change colours. Here we draw all springs but but not the edge ones, as the edge particles contain no mass.

Building UI

The UI is built upon basic UIKit example bundled with openFrameworks. Additional views are created physicsView, meshView and infoView which are the pop-ups you see when clicked on buttons. The app variables such as adjustSpringDamping, adjustSpringFrequency, adjustForceRadius are connected to sliders. Likewise, their values are updated by init() (example: guiViewController.springDampingSlider.value = drag;). One all the dots were connected, adding a random button was easy by simply void testApp::runRandom() which randomises those values. Saving settings was done using ofxXmlSettings where slider values and switches are written to the xml file. When the app opens, the XML is read and values mapped to setup().

Created with openFrameworks 0.7b.

Addons used