SpringMesh

SpringMesh


Spring Mesh Expample 1

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.

Created with openFrameworks 0.7b.

More info

Spring Mesh Example 2

SpringMesh fue creado usando el plug in ofxBox2d physiscs para openFrameworks. El cual consiste en una serie de partículas interconectadas por una serie SPRINGS, las partículas al borde son estáticas  permitiendo que el Mesh mantenga su forma original, mientras las partículas interiores se repelen o atraen debido a la manipulación del usuario o la fuerza de gravedad. El color es una representación directa de las fuerzas aplicadas, mientras más fuerte sea la fuerza el color será más claro.

Construyendo el Mesh

La grilla es generada por un número en específico de celdas horizontales, con el cual se calcula un número celdas vertivales usando una proporción de grilla, (rows = (int)( cols / gridRatio )). El resto resulta de un circuito de programación para calcular la posición: float x = colCellDist * i; y para crear las partículas: if ( i == 0 || i == cols || j == 0 || j == rows ) {//stuff}}). Partículas sin masa se consideran estáticas,  las cuales son creadas en los contornos para mantener el Mesh en su lugar. Las demás partículas son creadas en el interior, estas tienen propiedades de masa, densidad  y fricción. Después se crean conexiones horizontales usando las nuevas partículas creadas y las anteriores con el índice (index [idx - 1]), guardados en un contenedor de SPRINGS. Las conexiones verticales siguen los mismos principios que antes pero ahora  tomamos la partícula anterior del contenedor con el índice [idx - cols - 1], que se encuentra en el contenedor de SPRINGS.

Renderizado del marco del MESH

Para la visualización del marco se hace un ciclo a través de los contenedores de los SPRINGS, tomando ambos lados del SPRING, el color es calculado por la separación que existe entre las partículas.

Creando la Interfaz

La interfaz fue construida por un ejemplo básico de un UIKit en conjunto con Frameworks. Las vistas son creadas por vistas físicas, vistas de MESH y las vistas de datos las cuales son los controles que aparecen cuando uno da click en los botones. La aplicación contiene distintas variables como el ajuste de la frecuencia de los SPRINGS, el ajuste del radio de la fuerza, las cuales se encuentran conectadas a sliders. De la mimsa manera

Creado con openFrameworks 0.7b.

Más información

:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>