Abstract

Floating Cities is an interactive browser game, intended for users of all ages. Through moving the building blocks and working with sliders, the user is able to generate different geometrical configurations. The project was created using Grasshopper3d for Rhino, ThreeJS, Javascript, HTML, and RhinoCompute.

Final Interface

Main Algorithm

The rules are as follows. Each movable point forms a building and a ground plane.
Through moving the points in space, different configurations are formed. Depending on the distance between these points, stairs appear, the ground planes are joined, or a bigger building is formed.

This algorithm has been developed first in grasshopper. Through javascript and the three.js library we are able to vizualize it in a browser. By then hosting it in heroku, a fully functional browser app is created.

Process

As we can see in this GIF besides moving the points, the user is able to also control different features through sliders, changing attraction, densities of the stairs trees and windows.
Through another slider in the header, we are able to change the way the scene is rendered, including or excluding the transform controls.

Floating Cities is a project of IAAC, Institute for Advanced Architecture of Catalonia developed in the  Master in Advanced Computation for Architecture & Design, Artificial Intelligence in Architecture  2021/22 by Student: Erida Bendo  and Faculty: David Andres Leon, Hesham Shawqy.