Java and Processing

Fast 3D Vector Text in Processing

Open /scripts/analysis-and-simulation/fast-3d-vector-text-in-processing

Technical illustrations and 3D graphs tend to need lots of different kinds of text - some bold/italic, some large/small, and often in a range of different colors or shades of gray. Having struggled with image-based font glyphs for ages, I've finally had enough so set out to develop my own parametric vector text in Processing/OpenGL. Font glyphs are okay for most things, but small text often lacks definition and is difficult to read, but you want to keep most of your text small so as not to unnecessarily obscure other information. Also, tablet CPUs are slow and, when you have lots of text/annotation, invoking a display list for each character is a noticeable overhead. However, with vector text, you can easily cache all their line segments and pump them to the GPU using vertex buffer objects with just a few OpenGL calls. This applet is a demo of some of the types of 3D text object I've been playing with as well as some experiments with annotation arrows.

Dynamically Dimensioning 3D Models

Open /scripts/analysis-and-simulation/dynamically-dimensioning-3d-models

When interactively manipulating objects in 3D, having clear dimensions that update dynamically while dragging around allows for much greater confidence and accuracy in the process. This is especially true on a tablet where accurate alignment is well near impossible as your finger (and sometimes hand) effectively obscures the drag point. However, what started out as a quick experiment ended up sucking me into a 6 day vortex, swirling around with quaternion maths and 3D text manipulation in an attempt to get radial dimensions visible when viewed from any direction. This tiny applet is the result of those 6 days.

A gluUnproject() Function for P3D and OPENGL Sketches

Open /scripts/analysis-and-simulation/gluunproject-function-for-p3d-and-opengl-sketches

I have been struggling for a while in Processing with the reverse projection of 2D screen coordinates back into 3D world coordinates. It's relatively straightforward in OPENGL sketches using the JOGL view matrices and the GLU.gluUnproject() function. However, I could never get anything solid when using the P3D renderer or the PGraphics3D matrices. For some reason there was always a slight scaling issue which varied with different views. Previously I've used fudge factors to get it pretty close but, as I still prefer P3D for browser embedded work, I finally spent some time on it and made the breakthrough I needed. This is a brief description of what I learnt along the way as well as a demo applet and custom gluUnproject() function.

Analytical Space Inspection

Open /scripts/analysis-and-simulation/analytical-space-inspection

When dealing with complex analytical models, visually checking that all the spaces within a building have been generated correctly is never easy. This is because there are usually so many of them and their bounding surfaces are invariably adjacent to those of other spaces. You often wish that there was a way to 'explode' the building apart so you could see all of its constituent parts. Well, this the first of my experiments to do exactly that. As most analytical models don't define their spaces by storey, even though formats like gbXML allow it, there is actually quite a bit of work involved in generating that structure. There is even more work in managing the positions and animations. Thus, whilst later experiments will use springs and dampers to also separate spaces laterally, this one is just vertical separation.

Super Shapes Generator

Open /scripts/analysis-and-simulation/super-shapes-generator

Having just done the Spherical Harmonics demo, and with most of the infrastructure already in place, it would have been remiss not to do a Super Shapes demo. Super Shapes are 3D forms generated using Johan Gielis' generalisation of the superellipse formula, often termed the superformula. This was proposed in 2003 as a framework for simulating natural forms and is basically an equation with four input paramaters that generate a range of natural polygons. Two superformula (hence eight parameters) are used to generate complex 3D forms. By modulating the radius and/or Z coordinates, it can also create shells, spirals and helixes.

Spherical Harmonics Shape Generator

Open /scripts/analysis-and-simulation/spherical-harmonics-shape-generator

I have recently been looking at the use of spherical harmonics as a way of doing real-time diffuse lighting and shadowing effects in OpenGL. As I usually only really understand stuff when I can see it, I did a quick viewer in Processing to help make sure I was getting all the algorithms correct. Some of the visualisations and shapes started to look pretty good, so I figured I’d polish it a bit and put it up on my site. Apart from the visuals, spherical harmonics look really interesting as a means to simplify and relatively accurately approximate complex lighting environments.

Surface Shading Demonstration - Take One

Open /scripts/analysis-and-simulation/surface-shading-demonstration-take-one

The intention of this next iteration on the theme of overshadowing was to look at surface shading on a glazing panel. Unfortunately I got a bit bogged down trying to work out interactive design rules for louvres and brise soleil so didn't get as far as I'd have liked over the long weekend. However, I did finish a basic horizontal/vertical shade example and thought I'd put it up as, even though it doesn't yet show the shading effect on the glazing surface, simply being able to drag a shading mask around seems to give some useful insight into the solar apperture and obstruction effects.

Real-Time Site Analysis - For Android

Open /scripts/analysis-and-simulation/real-time-site-analysis-for-android

The latest version of Processing makes exporting sketches directly to Android relatively easy. However, as everyone on the Processing for Android wiki keeps saying, interacting with a mobile app is very different from using a standard mouse and keyboard. My aim has always been to develop and maintain a single code base to serve all platforms, for both libraries and sketches. This update is the first of my attempts to get this happening on my Galaxy Tab, which I use for testing such things.

Real-Time Site Analysis

Open /scripts/analysis-and-simulation/real-time-site-analysis

I often find myself trying to explain the concept of shading masks - typically over the phone which is never easy. Thus I thought I'd try both demonstrating and illustrating the basic ideas in an interactive web app. In the end it turned out far better than I ever thought it would. I managed to get the required ray-tracing working in pretty much real-time. The aim is that, as you interactively manipulate the 3D model or drag the position of the dome around, you can see instantly the resulting overshadowing effects at the dome centre, thus better understanding their relationship.

3D on the Web - Back to Processing...

Finally got some time to play with Processing again. It's been a hugely busy year with work and I have literally had no time to do any of my own stuff - you can see it's more than a year since my last post on this site. But, like many people in the UK, I took vacation time either side of Easter to take advantage of the Royal Wedding and May Day bank holidays. This gave me a bit of breathing space to look at WebGL and basic app development on iPad and Android, something I'd been looking forward to for a while. However, I always keep coming back to Processing.

Real-Time Dynamic Daylighting

Open /scripts/educational/real-time-dynamic-daylighting

Understanding the potential distribution of daylight in a room is a really key design skill. This applet lets you interactively manipulate windows in a room and see the daylight distribution recalculate and update in real-time. This really highlights the cause-and-effect relationships involved and helps develop that understanding. In addition to just showing daylighting, you can also overlay daylight factor protractors or frequency distribution data and see the effects of different surface reflectances on internally reflected light.

Simple Parametric Modelling Experiment

Open /scripts/educational/simple-parametric-modelling-experiment

This applet is an experiment with parametric modelling. The primary focus was the development of an interactive parameter class with a securely bounded range, variable precision, detailed string formatting, tweening/animation support and direct bindings to both the slider and 3D model classes. The result is a simple parametric tower model. This is relatively simple geometry, but I am really quite surprised how fast Java-based graphics can actually be, and this isn't even using OpenGL.

Cosine Law and Surface Incidence

Open /wiki/cosine-law-and-surface-incidence

Surface incidence is governed by the Lambert cosine law. This states that the relative intensity of radiation or light on a surface is equal to the cosine of the angle of incidence, and that the relative area over which it is distributed is the inverse of this value. This applet provides an interactive and highly visual demonstration of this effect on both horizontal and vertical surfaces. You can interactively drag altitude and azimuth angles to see changes in both the distribution area and relative intensity of an incident energy beam. It is particularly interesting to see these effects simultaneously on both surfaces.

Sun-Path Diagram Projection Methods

Open /scripts/educational/sun-path-diagram-projection-methods

Most of the real detail in a sun-path diagram is usually around the horizon. This is where adjacent buildings, trees and other site objects provide the greatest levels of obstruction. To increase detail at these low altitudes, different sun path projection methods can be used to essentially 'squeeze' altitude angles towards the zenith and expand them around the horizon. This applet demonstrates the most common altitude projection methods and shows how they can be mapped in both sky-dome and orthographic sun-path diagrams.

Horizontal and Vertical Shadow Angles

Open /scripts/educational/horizontal-and-vertical-shadow-angles

Horizontal and Vertical Shadow Angles (HSA & VSA) are very important when dealing with the design of shading devices. As opposed to solar azimuth and altitude angles, shadow angles are always taken relative to a particular surface. This applet presents a visual illustration of the complex relationship between location, solar position, orientation, tilt and shadow angle. Interactively changing the date, time and location is the key to developing a visual understanding of this fundamental shading design concept.

The Earth-Sun Relationship

Open /scripts/educational/earth-sun-relationship

This applet demonstrates the geometric relationship between the Earth and the Sun, showing the resulting illumination pattern at any time of the day and year for any location. All factors such as declination and the equation of time are fully considered and accurately modelled. It allows you to overlay information such as annual sun paths, important latitude/longitude lines and world time zones. You can rotate around the Earth in any direction or lock into a geo-stationary or view-from-sun perspective. Both annual and daily solar cycles can also be animated to better appreciate subtle effects.

Solar Position and the Sun-Path

Open /scripts/educational/solar-position-and-sun-path

Sun-Path Diagrams are a way of modelling and visualising the path of the Sun through the sky at a specific geographic location. With a little interactivity and a small element of play, such diagrams can significantly contribute to our understanding of how the Sun is likely to interact with a building - a concept crucial to the effective design of shading systems. This applet presents just such a Sun-Path diagram, allowing you to interactively change date, time and location as well as viewing it in a range of different ways.

Interactive 3D in a Web Page

This page discusses the results of my experiments with Processing over the Christmas break. What is interesting about Processing is that it allows you to create fully interactive 3D applets embedded in a standard web page on any platform. For visualising and playing around with complex concepts, this offers something far more exciting than even Adobe Flash.

Graph - Robustness Calculator

Open /scripts/data-visualisation/graph-robustness-calculator

A significant problem in the performance analysis of buildings is trying to understand hugely complex data sets that often results from the investigative process. These types of analysis are usually focused on the potential effect of different design parameters on the performance criteria we are designing to meet. The type of graph described here provides a simple means of interactively investigating and visualising complex relationships that may exist within a large number of calculation runs.

Graph - Annual Temperatures (Java)

Open /scripts/data-visualisation/graph-annual-temperatures-java

This graph is an experiment with the use Java applets to provide highly interactive charts and graphs embedded within a web page. It is just an example so the data it shows is not hugely meaningful - in this case a set of annual hourly air temperature values. However, it is an opportunity to play with my primitive attempt at an interactive and intuitive date range control. This control sits at the bottom of the chart and provides a means for selecting a date range for the values shown.

Embedding Java Applets in a Web Page

I have recently been experimenting with dynamically embedding Java applets within pages served by content management systems (CMS). As the <applet> and <embed> tags are depreciated and not XHTML standard compliant or supported by all browsers, that just leaves the <object> tag. This is fine, but even with this there are some serious inconsistencies between browser implementations - especially the Internet Explorer and the Mozilla/Gecko engines. This example shows how this can be solved fairly easily with some PHP in Drupal.