The purpose of project “Cloudscape” is to create a web-based application for landscape zoning solutions. This online spatial configurator allows the user to interact with the online interface and identify the landscape plot boundary, total area, different zones area, number of trees, and different visualization styles. The project created using Grasshopper3d for Rhino, ThreeJS, Javascript, HTML, and RhinoCompute.

The web app is published here on Heroku:

Hesham Shawqy, Javascript, Programming, Grasshopper, Web, Applications, Configurators,

The image shows the final interface for the online spatial configurator.


The configurator algorithm was created using Rhino and Grasshopper3d, few components from Kangaroo were used to avoid different zones collision while the user changing the landscape iterations or the land boundary. All of the materials were created using mesh gradient colors.

The image shows the script done in Grasshopper3d in the backend of the online configurator.

HeshamShawqy, Grasshopper3d, Rhinoceros3d, landscape

The GIF shows the different phases of creating the landscape configurator.

Other applications were created using Grasshopper3d, ThreeJS, and RhinoCompute:
Differential Growth





Cloudscape is a project of IAAC, Institute for Advanced Architecture of Catalonia developed in the Master In Advanced Computation For Architecture & Design  2020/21 byStudent: Hesham Shawqy
Lead Faculty:  Luis Fraguada-Will Pearson