# data[].attributes.headline
PROGRAMA DE TALLER CICLO AVANZADO .            2 SEM 2022

# data[].attributes.subject
PROGRAMA DE TALLER CICLO AVANZADO .            2 SEM 2022

# data[].attributes.attachment_link.title
UCR taller ciclo avanzado 6-7-8 - programa 2022-2

# data[].attributes.headline
APLICACION PARA ANALISIS BIOCLIMATICO 1 SUNPATH 3D

# data[].attributes.subject
APLICACION PARA ANALISIS BIOCLIMATICO 1 SUNPATH 3D

# data[].attributes.body
Referencias para georreferenciación de proyectos      PROF RUDY PIEDRA

# data[].attributes.attachment_link.readable_text
Overview

The aim of this app is to demonstrate the relationship between geographic location and solar position throughout the year. You can use the map to drag the location around and interactively see how the Sun-path diagram and shadow projections change. You can also directly relate the 3D Sun-path and day-length, as well as a range of different 2D Sun-path projections.

Background

This started out as an experiment to see just how responsive I could make the generation and display of 3D Sun-path diagrams and shadow projections using JavaScript and WebGL. I'm actually quite stunned as, even before any optimisation whatsoever, I found that I could build and rebuild the entire Sun-path mesh on every change in pretty well real time. Sure this was on an i7 processor, but it meant that the core technologies were not going to be the kind of bottleneck that I thought they'd be.

As it turned out, there was scope for some pretty fundamental optimisations, so now it's even quick enough on an iPad as well as most of my old Android tablets.

SVG and WebGL

The marriage of WebGL for 3D visualisation and SVG for 2D data presentation also turns out to be a pretty happy one. The core ideas when working in both are actually pretty similar - building up a set of visual components that are cached and rendered separately (OpenGL vertex buffer objects and SVG elements respectively). Any complex calculations in Javascript need only be done once to build up each visual component, or to rebuild if it physically changes. The actual rendering of that cached element is then done by a much faster lower-level process (OpenGL/GPU and the SVG engine respectively).

Optimsation Potential

Thus, for the kinds of animated 2D charts I need, SVG seems to have much more optimisation potential than using a HTML5 canvas element. As the canvas element is pixel-based, any content change usually requires a full redraw of all chart components, each being re-described and/or re-generated in your own Javascript code. If any components require complex calculation or involve detailed curves, you have to devise your own caching system as this all has to be redone for every redraw.

With SVG charts, you only need to re-describe and/or re-generate those components that actually change on each redraw. All other previously defined components are automatically re-rendered by the SVG engine, which is a core part of the browser itself (running as native code) so is significantly faster than working in Javascript.

Thus, the key to fast animations is to offload as much work as possible onto the SVG engine, or even the browser rendering engine. This can be done by, for example, transforming components instead of regenerating them, using CSS3 animations and transitions, interpolating between pre-built elements instead of regenerating new elements each time, etc. For me, this is the really fun bit as you often have to completely rethink how to do things before you finally get that vital Eureka moment.

© Dr. Andrew J. Marsh, 2014.

View Manipulation

You can interactively adjust the 3D view of the model using a mouse, pen or stylus, or by touch on a tablet or phone. You can also use the items in the 3D View Settings popup.

NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press.

Keyboard Modifiers

The Shift and Ctrl/Meta keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements.

Shift Key:

Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times.

Ctrl or Meta Key:

Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times.

NOTE: You can use the scroll wheel to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility.

# data[].attributes.body
Recopilación de proceso

# data[].attributes.headline
Repentina #1 de diseño - Dumar Badilla B70846 - Erick Carrillo B88884 - Paula Rojas B86867

# data[].attributes.subject
Repentina #1 de diseño - Dumar Badilla B70846 - Erick Carrillo B88884 - Paula Rojas B86867

# data[].attributes.attachment_link.title
Repentina #1 de diseño - Dumar Badilla B70846 - Erick Carrillo B88884 - Paula Rojas B86867

# data[].attributes.body
PROF RUDY PIEDRA.

# data[].attributes.attachment_link.readable_text
Overview

The aim of this app is to dynamically model the relationship between room size, aperture layout and the spatial distribution of internal daylighting. To make it fun to play with, I have tried to ensure that the app and its calculations are as fast and interactive as possible so that changes to the room or its apertures update the daylighting in close to real time, even on a tablet or phone.

To change the size of the room, simply select any of its bounding surfaces and then drag the appropriate arrow in the direction you want. To adjust an aperture, again simply select it by clicking or tapping it and then drag any of the manipulator arrows. The manipulator in the center of the aperture allows you to change its position. Whilst apertures are prevented from overlapping, you can still drag them into any area where they will fit, even within adjacent walls.

You can click or tap on any value in a dimension line to display a simple editor that lets you directly enter numeric data. Clicking or tapping in the ROOM INFORMATION panel on the left will also display an editor for numerically adjusting the room size.

Daylight Calculation Method

The daylight calculations here use the split-flux method developed by the Building Research Establishment (BRE) in the UK. This involved converting all the required protractors and nomograms to high-resolution look-up tables. To validate this approach, I have done extensive comparisons of both the absolute daylight factors generated in this model with those of the same model in Radiance from LBNL, as well as the magnitude of relative changes in value when apertures are enlarged/reduced, the room size changed or reflectance values varied. As the room is relatively simple and always convex, and the apertures are rectangular without any complex shading or light reflection systems, there is pretty close correlation with Radiance results.

A future version of this app will allow you to remotely render the current model in Radiance and then import the results for your own visual comparison. I am currently working on all the back-end systems to make this happen.

Points of Interest

At the moment all the daylight calculations are being done in Javascript, which is still blazingly fast. However, I do have a GPU-based version which is even faster. But, given that there is so much else going on when you interact with the model (especially when contours are displayed and multiple apertures are being checked for overlaps), it turns out that the daylighting calculations are only a relatively small component compared to the tesselation and mesh regeneration process. Thus the speed increase due to using the GPU is not actually that noticeable.
© Dr. Andrew J. Marsh, 2018.
View Manipulation

You can interactively adjust the 3D view of the model using a mouse, pen or stylus, or by touch on a tablet or phone. You can also use the items in the 3D View Settings popup.

NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press.

Keyboard Modifiers

The Shift and Ctrl/Meta keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements.

Shift Key:

Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times.

Ctrl or Meta Key:

Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times.

NOTE: You can use the scroll wheel to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility.

# data[].attributes.attachment_link.description
Overview The aim of this app is to dynamically model the relationship between room size, aperture layout and the spatial distribution of internal daylighting. To make it fun to play with, I have tried to ensure that the app and its calculations are as fast and interactive as possible so that changes to the room or its apertures update the daylighting in close to real time, even on a tablet or phone.