<?xml-stylesheet href="https://connected-environments.org/pretty-feed-v3.xsl" type="text/xsl"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0">
  <channel>
    <title>UCL Connected Environments</title>
    <description>Using digital technology to gain insights into our complex built and natural environment.</description>
    <link>https://connected-environments.org/</link>
    <atom:link href="https://connected-environments.org/feeds.xml" rel="self" type="application/rss+xml"/>
    <pubDate>Tue, 14 Jul 2026 03:00:09 +0100</pubDate>
    <lastBuildDate>Tue, 14 Jul 2026 03:00:09 +0100</lastBuildDate>
    <generator>Jekyll v4.4.1</generator>
    
      <item>
        <title>Closing the Loop on Gemma 4 using Antigravity</title>
        <description>One of the major bottlenecks in creating your own specific model, in my opinion, has always been the fine-tuning process. We need models that not only understand specific domains, like navigating the complicated and ever changing requirements of academic regulations, but have ways we tweak the output to get great output that we can actually use.  If we ask a language model questions about these regulations and get an answer we will just get a wall of text back.  What if we want to get the smarts of an LLM to parse and understand the content but also have a way to integrate this output into an interactive application and have the visual interface a way to link back to the regulations then we need to do something different! First of all we need a model that can produce the data back to the application we need!



Let’s fine-tune an offline model like Gemma 4 to output perfectly formatted JSON payloads instead of giving us back dry text that just tells us the regulations.  To do this, we traditionally created cycles of manual tweaking: adjusting learning rates, tweaking LoRA ranks, and waiting for compile/test cycles to finish. We test the model and then we compare the output.  Who’s got time for that!  It’s boring and we have better things to do.  Why don’t we use agentic coding not only to create our model, but to test, tweak, reframe, iterate and improve it while we just wait and get on with all the admin we need to do (or just touch grass).

Let’s move away from manually typing commands and work towards a continuous, headless engineering process which can create the model for us.

Antigravity: SDK, CLI, and /goal

Antigravity isn’t just another agentic LLM prompt; it’s an orchestration engine designed for background automated tasks. It offers multiple surfaces—a desktop command center (2.0), an IDE, a Python SDK, and a CLI. Each surface treats the agent as an on-demand worker rather than a localised file-editor.
The real magic for this project, however, lies in Fully Autonomous Goal Execution via the /goal command. Instead of single-turn prompts, /goal gives the agent a purpose. It instructs Antigravity (and the agentic model selected) to run iteratively, spawning parallel subagents to handle individual tasks until the objective is verified as complete, all without blocking or waiting for input from you as the user..

Architecting the Multi-Agent Pipeline

To tackle the academic regulations manual (which is five years of dense PDF documents), we can’t just dump the text into a single prompt and ask Gemma to process it and give us an answer. We need a team of subagents that can process the data, get it into the format that’s needed to fine tune the model, ask the model questions and test the responses.  Armed with the PDFs and an example of JSON outputs I need for my application, we can begin.

Here’s how I architected the pipeline within Antigravity to handle the extraction, training, and evaluation for the project.


  
    The Lead Architect (Main Agent): This agent holds the top-level /goal. It manages the overall process, tracks the timeline across the 5 years of regulations, evaluates the agent’s responses and coordinates all the subagents and their responses.
  
  
    The Data Engineer (Subagent): This agent is tasked with processing the PDFs for agents via a custom SKILL.md file, and has the examples of the JSON output we want from the Gemma model.   This agent extracts the text and synthesizes a high-quality dataset of Instruction-Response pairs. The input is example and completed fabricated student scenarios; the required output is a strict JSON payload mapping the regulation codes, location of the regulation in the manual (section X.Y),  routing and rationale of why this regulation is in play.
  
  
    The Training Operator (Subagent): This agent handles the actual local fine-tuning loop. It manages the process of creating the model, creating, tweaking and triggering the execution script (using MLX to accommodate my local machine and its resources), monitors the activity on the machine , and saves the Gemma 4 checkpoints and model output files.
  
  
    The Critic (Subagent): This is the heart of the closed-loop system. After a training run, this agent serves the checkpoint and runs scenarios that the model hasn’t seen yet. The agent will load the input examples and what the output should be and evaluate the output JSON syntax and how accurate the  mapping to the regulations are.
  


Let’s Setup Antigravity

We create a new folder for our project and then create some agent files for Antigravity to use.  For this project, I set up the following files in Antigravity IDE (after creating a new project).

.agents/skills/
├── setup-mlx-environment
│   └── SKILL.md
├── extract-pdf-rules/
│   └── SKILL.md
├── generate-qa-pairs/
│   └── SKILL.md
├── run-mlx-lora/
│   └── SKILL.md
└── evaluate-checkpoint/
    └── SKILL.md


Each agent has a specific skill and task to complete. For example lets look at the evaluate-checkpoint agent to see what the agent is tasked with.

---
name: evaluate-checkpoint
description: Loads a trained LoRA checkpoint, runs test scenarios, and evaluates the outputs for schema adherence and accuracy. Use this skill immediately after a training run completes.
---
# Compliance Critic and Evaluator

## Goal
Serve the latest Gemma 4 checkpoint, run a suite of hold-out test scenarios, and generate a PASS/FAIL critique to determine if further hyperparameter tweaking is required.

## Steps
1. Load the base Gemma 4 model with the adapter weights from `/checkpoints/latest/`.
2. Run 10 the student scenarios in the /data/example directory (that were not in the training set) through the model.
3. Capture the generated JSON payloads.
4. Pass the outputs and evaluate against two strict criteria:
   - **Syntax:** Is the output 100% valid JSON?
   - **Accuracy:** Do the regulation codes and routing match the logic in the source manuals in the examples?
5. Generate an `evaluation_report.md` containing the pass rate percentage, specific failure modes (e.g., hallucinated codes), and a definitive PASS/FAIL status based on a 90% threshold.
## Verification
- Ensure the evaluation report explicitly suggests which hyperparameters in `config.json` should be adjusted if the result is a FAIL.


Here is a top tip for your own project.  Get Gemini to help you create these skill files, tweak them and add more context to help the agentic system.  I used the LLM multiple times to improve the agent skills in multiple runs to get the agents to work better and improve the overall system.

Let’s Run our Orchestra

Starting the process in the Antigravity is incredibly straightforward. The prompt looks something like this:

/goal Build and execute a self-correcting fine-tuning pipeline for Gemma 4 to act as an academic regulations mapping utility. 

Execute the following state machine autonomously using the available workspace skills:

1. ENVIRONMENT INIT: Use the &apos;setup-mlx-environment&apos; skill to provision the virtual environment, install the patched MLX-LM framework directly from GitHub, and download a 4-bit quantized Gemma 4 model.
2. DATA PIPELINE: Use the &apos;extract-pdf-rules&apos; skill to parse thePDF manuals in the `/data` directory into clean markdown.
3. DATA FORMATTING: Use the &apos;generate-qa-pairs&apos; skill to create a fine-tuning dataset (`train.jsonl`) of 150 Instruction-Response pairs. 
4. TRAINING LOOP: Create a `config.json` with baseline hyperparameters (e.g., LR: 2e-5, epochs: 3, LoRA rank: 8) and use the &apos;run-mlx-lora&apos; skill to execute the training run asynchronously.
5. EVALUATION: Once training completes, use the &apos;evaluate-checkpoint&apos; skill to grade the model&apos;s outputs using the unseen data within the /data/example directory 
6. THE CLOSED LOOP: If the evaluation report results in a FAIL, analyze the failure mode, autonomously modify the `config.json` with adjusted hyperparameters, and trigger another &apos;run-mlx-lora&apos; iteration.
7. TERMINATE and output a final Markdown report when the evaluation achieves a PASS status (90%+ accuracy) or after 20 maximum training loops.


Note:  I’ve hardcoded some values such as 20 maximum loops and 4-bit version of Gemma Model. I also told my environment agent where Gemma was installed locally as well as the path for MLX.  You could also setup this up to use TPUs inside Google Cloud to speed up the training

Now sit back, wait 30 hours (in my case with my M3 macbook pro and 64Gb of GPU Ram and you’ll have a few models and a report which shows the best model for us to use for our project.

Next Steps

The next blog post in this series will focus on using this model in an interactive site where we can see how the academic manual can be updated into a fully functional question and answer system that we can interact with to help us make decisions from natural language.
</description>
        <pubDate>Thu, 09 Jul 2026 00:00:00 +0100</pubDate>
        <link>https://connected-environments.org/blog/2026-07-10-antigravity-and-gemma-4/</link>
        <guid isPermaLink="true">https://connected-environments.org/blog/2026-07-10-antigravity-and-gemma-4/</guid>
        
        <category>ai</category>
        
        <category>vibe-coding</category>
        
        <category>agentic</category>
        
        
        <category>projects</category>
        
      </item>
    
      <item>
        <title>Queer Community College Philippines</title>
        <description>In April 2026, Leah Lovett (CASA) joined UCL colleagues Lo Marshall (Bartlett School of Architecture), Simon Lock (Science and Technology Studies) and Juliana Demartini Brito (Gender and Sexuality Studies) in Metro Manila, Philippines, to deliver Queer Community College (QCC) in collaboration with educators from University of the Philippines Diliman (UP Diliman). The group had been invited by the British Council in the Philippines under their Arts and Creative Industries remit.

QCC was founded in 2024 in partnership with Queer Circle, North Greenwich, to share queer thinking and practice with LGBTQ+ adults in a community setting. The programme invites guest educators to explore aspects of identity, spatial politics, history and futures, bringing together discursive and creative practice to think collectively and enable different modes of engagement. The London iterations of the programme operated on a drop-in basis and welcomed a diverse range of participants, including artists, activists, students and people looking for ways to connect with queer communities outside of nightlife. One of the first participants in those sessions was Andrei Nikolai Pamintuan, who took on the role of Head of Arts for the British Council in the Philippines after leaving the UK, and extended the invite to Queer Community College to reimagine the offer in collaboration with Filipino educators.

The QCC team was fortunate to partner with Roselle Pineda, Associate Dean for Research, Creative Work, Extension and Publication, College of Arts and Letters, UP Diliman. She connected us with researchers and artists, Holden Alcazaren (Speech Communications and Theatre Arts), Isola Tong (College of Arts and Letters), Charles Erize Ladia (Speech Communication and Theatre Arts), and human rights advocate, Anna Raphaela Cubacub (PANTAY), who co-designed new sessions for QCC Philippines. Over two days in the Gimenez Gallery, UP Diliman, around 30 participants joined us to bring thinking on queer politics, cultures, identities activism and creativity into a cross-cultural conversation. We asked what these concepts can offer, and importantly, what they miss? How might queer approaches shed light on ways that gender and sexuality intersect with class, race and colourism, patriarchy and the long shadow of empire in the Philippines? What resonates, and what needs to be reworked or resisted? We engaged with these questions through walks, creative workshops, talks and discussions, following a pedagogic ethos that prioritises empathy and recognises the lived experiences and expertise that everyone brings to the space.

Feedback from participants and educators highlighted how affirming and meaningful it can be for people who are minoritised in their everyday lives to gather, take up space, and make sense of their experiences through learning from and discussing research. The creative activations and contributions from grassroots organisations allowed for expansive conversations, as well as providing participants with tools to take with them into their own work, including in the spheres of education, activism, arts and culture, urban planning, and policy. A follow up meeting with the British Council of the Philippines and local activists, advocates and community organisers raised further opportunities for meaningful collaboration and knowledge exchange to support gender and sexual minorities across both contexts.


Lunch hosted by British Council in the Philippines, with Filipino LGBTQIA+ community organisers and activists, Janlee Dungca, Claire De Leon, Herson Arcega, and, Solimar De Castro, with Andrei Nikolai Pamintuan, Sari Molintas, Alyssa Flores, and Catherine Joan Violago from the British Council in the Philippines Arts and Education Teams.


Artist, Isola Tong (University of the Philippines Diliman), sharing her practice-based research during a session co-led with Leah Lovett and Lo Marshall, which took a spatial justice approach to thinking about queerness and transness in relation to creativity, connection and care.
</description>
        <pubDate>Tue, 23 Jun 2026 00:00:00 +0100</pubDate>
        <link>https://connected-environments.org/blog/2026-06-23-british-council/</link>
        <guid isPermaLink="true">https://connected-environments.org/blog/2026-06-23-british-council/</guid>
        
        <category>events</category>
        
        
        <category>events</category>
        
      </item>
    
      <item>
        <title>Agents, Cloud Architecture, and ... Socks: Highlights from Google Cloud Next ’26</title>
        <description>A few weeks ago I had the opportunity to attend Google Cloud Next ‘26 in Las Vegas. This was my second time attending the event and I had the privilege to meet lots of cloud companies while out there (many of the services we use within the lab such as Grafana, GitHub and Anthropic) , attend many of the hands on session at the conference, see some fabulous demos of the new technology and meet many of my friends in the Cloud space!

This year attending as a Google Developer Expert and a researcher bridging the gap between cloud architecture, advancements in AI and spatial computation at UCL CASA made this visit a unique one. It’s certain that yet again, “This is the year of Agentic AI” (isn’t every year?). Although this year, after talking with many of the attendees, there is a fundamental shift away from just chatting with LLMs but actually getting work done, and getting it done quicker! It was an amazing experience, and here are some of my highlights.

What is Google Cloud Next?

For those who haven’t experienced it, Google Cloud Next is the annual flagship event for all things Google Cloud and Google AI. The events team takes over one of the biggest hotels on the strip, the Mandalay Bay, bringing together over 30,000 developers, IT leaders, Enterprise and Cloud Practitioners. It’s where Google drops its biggest product announcements, deep-dives into new capabilities, and sets the pace for the cloud industry for the coming year. The Las Vegas Strip is full of white badges, Google Next Branding and lots of people carrying backpacks! Last year, they even took over some branding graphics on the Sphere!

The great thing is that the Keynote, Developer Keynote and many of the sessions can all be watched virtually. Some of the deeper dive sessions are only for the attendees so I’ve tried to focus on some of the information of this post to these sessions so you can get a glimpse into some of the technology under the hood.

Being a Google Developer Expert, however, gives me some extra perks. We had some exclusive demos of the Android XR headset from Samsung, some deeper dives with DeepMind and the AI Agent team within Google who gave us a behind the scenes information about the latest models and how they interact with the various agent harnesses available today.

The Opening Keynote

The keynotes were held in the Mandalay Bay’s Arena, which seats 10,000 people. It sounds like a lot, but it’s not enough! Only about a third of attendees manage to get seated in the arena, and you have to queue early. Lucky for me we had some allocated seating right next to the stage to watch the proceedings.

Pre-Entertainment came from a Google Engineer who was controlling live visuals with graphic shaders created by Gemini using hand gestures. Each finger was a real-time shader that had been generated using the audio being played by the on-stage DJ. Pretty cool! The intro to the event was created by Nano Banana 2, Veo 3.1, and Genie 3. It shows just how far in one year we’ve come in the world of Generative AI content.

The Era of the Agent is Here.

I promised I wouldn’t do a rigid keynote recap, but the central theme is too important to ignore, especially for the research we are doing. We are officially out of the agentic “proof-of-concept” era. We are in a world where everyone works with agents, and we now need to ensure these agents are production-ready, scalable, and can be fully observed and auditable.

Here are a few of the standout technical announcements that caught my eye:


  
    Gemini Enterprise Agent Platform: Vertex AI has evolved into this new four-pillar platform: Build, Scale, Govern, and Optimize.
  
  
    Advanced RAG &amp;amp; Grounding Integrations: This one was big. They announced natively integrated, high-fidelity vector search and cross-database grounding within the Agent Registry. For those of us currently upgrading local RAG pipelines for publication and blog generation, the hybrid local/cloud architectural possibilities here are brilliant.
  
  
    Spatial &amp;amp; Multi-Modal Agents: We’re seeing dedicated off-the-shelf skills for agents to natively interpret complex, multi-modal geospatial datasets, which is going to be incredibly disruptive for geocomputation.
  
  
    Automated Agent Evaluation: A new governance framework designed to benchmark hallucination rates and enforce deterministic boundaries across multi-agent systems—an absolute necessity for deploying LLMs in rigorous academic and enterprise environments.
  
  Infrastructure &amp;amp; AI Hypercomputer: Advancements here included the 8th Gen TPUs (split into TPU 8t for training and TPU 8i for inference), the Google Cloud Axion N4A (offering 2x price-performance vs comparable x86 chips), and the new Virgo network doubling bandwidth between chip pods. Up to 1 million TPUs can now sit in a single training cluster, with up to 9,600 TPUs in a single Superpod!

  
    Cross-Cloud Lakehouse: Standardised on Apache Iceberg, allowing agents to query data in AWS or Azure with zero-copy federation. Gone are the days of your data being locked to one cloud vendor, Google is making a play here for all your AI workloads being processed within GCloud and enterprises bringing their data from wherever it’s stored.
  
  Rapid Cache: A new storage family within Cloud Storage(replacing Anywhere Cache) that hits 2.5 TB/s throughput for bursty AI training workloads


The Expo Floor: Socks, Stickers, and Puppies

The expo floor is where everyone in the event hangs out. Here we eat lunch, talk to each other, play with some of the new tech and get to meet various companies who are adding value to Google Cloud through various integrations. The booth suppliers brought their A-game for swag this year. The undisputed champion of the 2026 conference floor? Socks. I am returning to London with no fewer than 8 pairs of vendor socks, alongside vast amounts of stickers to cover my server racks. At the end of the event I had a bed full of stickers, mugs, t-shirts, scarves, bags and even an Apple Airtag! I’m glad I had space in my suitcase to bring them all back to the lab.

Oh, and the puppies! Did i mention they had an area dedicated to puppies and allowing attendees to come make friends. Lots of hugs were given out during the 3 days!

The Developer Keynote

If you get a chance you should check out the developer keynote. The main demo this year was a marathon planner, simulator and organisation. The team broke down each part of the application (which is open-source and hosted on GitHub). The map simulating the 1000’s of runners (each an agent giving feedback on the route and a persona) was just stunning. Alongside this demo, all of the main demos throughout the event is published as a codelab and is runnable on Google Cloud (they also give you some credits per demo to try the tech). This is a first for a Google event and gives developers and students some hands-on experience playing with the APIs and the technology.

The Main Takeaway

The “Agentic Era” means moving away from single prompts. Google is betting that you won’t just “use AI,” but rather “manage a workforce of agents” that have their own identities, memories, and governed access to your data. Next ‘26 made one thing clear: the days of chatting to LLMs is old news, and the intelligent agent has arrived. The challenge for the next year won’t be ‘if’ you use AI, but how effectively one can harness a team of agents where your ideas, intuition and agentic autonomy work together. As we move toward these agentic workflows, the next frontier will be grounding these agents not just in text and code, but in the physical and spatial contexts where real-world decisions actually happen.  The biggest question, however, stands, how much will this agentic future cost!

</description>
        <pubDate>Thu, 28 May 2026 00:00:00 +0100</pubDate>
        <link>https://connected-environments.org/blog/2026-05-28-google-cloud-next-26/</link>
        <guid isPermaLink="true">https://connected-environments.org/blog/2026-05-28-google-cloud-next-26/</guid>
        
        <category>events</category>
        
        <category>cloud</category>
        
        <category>ai</category>
        
        
        <category>events</category>
        
      </item>
    
      <item>
        <title>City Clock: A City where the People Tell the Time</title>
        <description>City Clock: The City Where People Tell the Time


  
    
      May 2026
      making
      ai, vibe-coding, canvas, ios, clock
    
  




Last month we launched Aqua Clock on iOS - a clock where the fish tell the time. It was an experiment in agent based modelling and vibe coding, creating a unique app which acts as both an aquarium and clock.

Aqua Clock

City Clock expands the concept into a living breathing city - complete with a city square where citizens gather and every minute - tell the time.



The concept is similar to Aqua Clock but fish exist in a contained volume of water. They have no destinations, no routines, no reason to be anywhere in particular. A city is the opposite. A city is almost entirely made of reasons to be places. Shops to visit, homes to return to, friends to meet, a coffee to get before 9am. If you’re going to build a city that also happens to tell the time, you need to build the city first — properly, with all of its rhythms and routines — and then add the clock on top.

![City Clock — with clock formation in the central plaza]City Clock - with the Clock Formation in the City Square



The Clock Mechanism

At the start of every minute, 112 pedestrians are summoned to the central plaza to form a four-digit digital clock — HH:MM — using seven-segment geometry. Each digit uses up to 28 people, four per segment. They walk in from wherever they are in the city, take their positions, hold for 15 seconds, then scatter.

For the remaining 45 seconds of every minute, those same 112 people — along with hundreds of others — simply live their lives.

They have homes. Assigned houses with garden paths and front doors. They visit cafes and queue outside at rush hour. They sit on benches. They go home at 10pm. Some of them have dogs. A few ride bicycles. One of them is always trying to find somewhere to sit with their coffee.

You can double-tap anywhere to force the formation immediately, without waiting for the next minute. It’s oddly satisfying — a whole city dropping what it’s doing to spell out the time.

)
Pedestrians mid-formation. The fountains serve as the colon separator.



A Living City

What makes this more than a clock-with-scenery is that the city actually runs. It’s not decorative background — it has systems.

Traffic navigates junctions with working traffic lights, brakes for pedestrians, and takes smooth Bézier-curve turns at corners. Emergency vehicles push through with flashing lights and sirens. Delivery vans park outside venues and drop packages. Rubbish trucks do their rounds, collecting wheelie bins that reappear a few minutes later once residents wheel them back in.

Pedestrians use a needs-based model — Energy, Hunger, Social — with thought bubbles indicating their current priority. They shelter under awnings when it rains. They queue longer at cafes on weekday mornings. They stay home at night.

Weather is live, pulled from Open-Meteo, or cycles through all ten types in demo mode — drizzle, snow, fog, thunderstorms, hail. Roads get wet and reflective. Puddles form and slowly evaporate. Fog rolls in as animated layered tendrils rather than a flat grey wash. It also provides a full 12 hour forecast for your chosen location.

The day/night cycle runs in real time. At dusk, street lamps flicker on and cast warm pools across pavements. Building windows glow amber. Car headlights sweep the roads. By 2am the city is almost dark, with just a few lit windows where someone is working late.

A street musician sets up in the plaza between 9am and 9pm. Passers-by stop to listen and occasionally throw coins. A newspaper kiosk opens at dawn and folds away by lunchtime. Steam trains run to Central Station and the branch line at West St. — more on that below.

The plaza itself has a compass rose picked out in the paving. Two fountain basins serve as the colon in the clock display, which is either very elegant design or a very happy accident, depending on when you noticed it.


Between formations the plaza is just a plaza. Outdoor seating, market stalls on weekends, a busker, benches. The city information stream (bottom left) reports events as they happen.



The Canal and the Mills

Somewhere mid-development, the city acquired a canal.

It runs the full height of the map along the right edge — a narrow waterway separated from the city blocks by a stone towpath. Three narrowboats travel up and down, slowing near bridges, giving way to each other, the way narrowboats do. Next to the canals are factories. The factories work. Goods accumulate in the yards over time — wooden crates, metal drums, canvas sacks — until a narrowboat passes the loading bay, slows, and moors up to take them on. The cargo appears on the boat’s deck and slowly fades as it’s delivered further down the canal. The city information stream reports each loading event.

The chimneys smoke independently. Each factory has its own cycle — active for 30 to 120 seconds, then quiet for a shift change or a stoking break, then active again. They don’t synchronise. Standing at the right zoom level you can watch them come and go across the row of mills, which is unexpectedly hypnotic.

* the full city with Canals and a Railway Network*



Two Lines, Two Stations

The bottom of the city is given over entirely to the railway. A full-width corridor of track, signal infrastructure, allotment gardens on the left — proper fenced plots with crop rows, sheds, and water butts — and terraced housing on the right. Central Station sits at the centre, a stone-fronted building with a clock above the entrance and a platform that fills with waiting passengers.

Every few minutes, a steam locomotive arrives from the right edge of the map. It slows as it approaches the platform, stops, and waits. While it’s stationary, new arrivals step out of the carriages and fade into view on the platform before making their way into the city — heading for the bus stop, the plaza, wherever they’re going. Passengers who have been waiting on the platform board as the train prepares to depart, fading out as they step onto the carriages. Then the locomotive pulls away to the left and disappears. The city information stream logs the departure.

What makes this more than a visual loop is that passengers are real pedestrians. Arrivals are spawned from the train and immediately join the city’s population — they need somewhere to go, they have the same needs and routines as everyone else. Departing passengers were walking around the city moments before; they received a summons, walked to the platform, and waited. The train is connected to the city’s social fabric, not just painted onto it.

The branch line adds another layer. West St. station sits at the far left of the map, served by a vertical track running the full height of that column. A smaller locomotive — a branch service — runs independently on its own schedule, arriving from the south and departing northward. The same boarding and alighting cycle plays out on its own platform. Two lines, two departure toasts, two streams of arrivals filtering into the city from different directions.

Between the main line and the branch line, the bottom of the city has a texture you don’t find in the rest of the grid — slower, more industrial, with the allotment plots adding an unexpected patch of green alongside the track.



The City Information Stream

One of the things that emerged fairly naturally was a notification layer — a running feed of city events displayed as toasts in the bottom-left corner. Not intrusive, not demanding attention, just quietly reporting what’s happening.

Train departing. Canal loading. Ice cream van parked near the plaza. Fog settling in. Flash mob in progress. The Sunday market is open.

The ice cream van deserves a mention of its own. On warm afternoons between April and September, a white-and-pink van parks near the plaza — drawn top-down like every other vehicle, with a serving hatch window, a pink stripe along its length, and a small scoop sign on the roof. Its jingle plays when it arrives. A queue forms outside. It stays for a while, then leaves when the weather turns or the afternoon ends.

It’s on by default and can be turned off in settings. When it’s running it gives the city a texture of ongoing activity — a sense that things are happening slightly beyond the edge of the screen, and have been happening all along.



The City Dashboard

One of the more quietly satisfying additions is a daily stats panel. Toggle it on in Settings and a small overlay appears showing what the city has actually done today: how many people are currently in the plaza, how many are at home, how many train passengers have arrived, how many coffees have been sold, pints pulled, books bought, flowers purchased.

The City Dashboard

The market veg stock percentage ticks down through the day as pedestrians browse the stalls. The number of mills operating updates as factories cycle on and off. Although at the moment they do all seem to be drinking too much coffee…

It’s a snapshot of a day in the life of a city that’s been quietly going about its business the whole time.



Special Events: Buskers, Flash Mobs and the Alarm

Some of the most characterful moments in City Clock are the ones that are not scheduled.

A street musician appears in the plaza between 9am and 9pm, setting up for 40 seconds to two minutes at a time. There’s a guitar case on the ground. Floating ♪ ♫ music notes drift upward. Pedestrians who wander into earshot stop, turn to face the musician, and stand and listen. Occasionally one of them walks forward and throws a coin — rendered as a little arcing gold particle landing in the open case. The busker has a star rating below them. You can zoom in close enough to read it.

Flash mobs erupt occasionally without warning. A crowd gathers, the event unfolds — a protest with banners, or a spontaneous performance — and then disperses. Nearby pedestrians are drawn in, stop to watch, and drift away again when it’s over. The city information stream announces it quietly: A flash mob has broken out in the plaza. Everyone is dancing.

The alarm clock was central to the system with the aim to make the ‘happiest alarm sound’ possible.

Set a time in Settings and when the clock reaches it, the entire city population converges on the plaza and dances. Not a polite shuffle — a full celebration, everyone streaming in from wherever they are, umbrellas and hats and the whole chromatic range of pedestrian clothing swirling in loose spirals. A bandstand appears in the upper plaza with a five-piece band: singer, guitar, bass, drums, keys.

Snooze for nine minutes or dismiss entirely. When the alarm ends, the bandstand fades and everyone disperses back to their routines — home, the café, the park bench, wherever they were going before the music started.

The Alarm Function

The alarm clock triggers a city-wide dance in the plaza.



The Calendar: Seasons, Holidays and Quiet Sundays

The city is aware of the calendar in a way that accumulates gently over time rather than announcing itself.

The plaza decorates itself for major events: a Christmas tree with twinkling baubles and fairy lights strung between lamp posts from December through early January; jack-o’-lanterns at the plaza corners for Halloween with candlelight flickering inside at night; a bonfire in the upper plaza for Bonfire Night with rising sparks and an orange glow spreading across the paving; confetti for New Year, a maypole for May Day, shamrocks for St Patrick’s Day, pastel eggs for Easter. Each event is drawn in the dynamic layer beneath pedestrians, so life continues normally around the decorations — people walk through the Christmas scene, queue outside the café beside the Halloween lanterns.

Bunting is strung between lamp posts for every event, colour-coded to the occasion — green and orange for St Patrick’s, red and green for Christmas, rainbow for weekends. Flags hang in a natural catenary droop, individual triangles in the correct colours, dimming proportionally at night.

Three atmosphere overlays run continuously. A gradient morning mist sits at ground level from 5am and burns off by 9am. A warm amber wash builds through the afternoon and peaks at golden hour around 6pm. On Sunday mornings, a barely perceptible cool blue tint settles over the city before noon — so faint you might not consciously notice it, but the city feels slower.

The residential chimneys smoke more in cold months and at morning and evening heating peaks. Gardens look the same year-round but the quality of light shifts across the day in a way that makes the city feel genuinely different at 7am on a Tuesday in February versus 6pm on a Saturday in July.



Under the Hood

Everything is rendered on an HTML5 Canvas using TypeScript, built with Vite. There are no runtime dependencies. No React, no game engine, no physics library.

The city is split into a static canvas layer — roads, buildings, houses, parks, the plaza — pre-rendered at startup and rebuilt only when lighting changes or zoom drifts significantly. This is composited each frame with a dynamic layer containing everything that moves or changes: pedestrians, cars, weather, canal boats, chimney smoke, market stalls, the train.

Pedestrian pathfinding uses a 9px walkability grid covering the whole city, with 8-directional A* for routing home. Traffic runs on a node graph with Bézier curve turns at junctions. The weather system cross-fades between states — rain doesn’t vanish mid-drop when conditions change, it tapers out naturally over about 7 seconds before the new weather fades in.

The clock geometry is a standard seven-segment layout scaled to fill the plaza, with each segment subdivided into four pedestrian positions. At summons time, eligible pedestrians compute their target position, cancel whatever they were doing, and walk there. When released, they don’t teleport back — they just resume normal wandering from wherever they’re standing in the plaza.

Sound is a mix of authentic recordings and procedural synthesis via the Web Audio API. A narrow-gauge train whistle plays on each departure — a real recording, fetched and decoded into an AudioBuffer on first interaction so it’s ready without any autoplay restriction. A genuine thunder crack fires during storms. A UK police siren plays once per emergency vehicle (a WeakSet ensures it never repeats for the same car object). When an ice cream van parks near the plaza, its jingle plays. Everything else — rain, the fountain spray, bird calls, the ambulance wail — is procedurally synthesised. Everything starts muted and can be toggled in settings.



Vibe Coding a City

The Aqua Clock post described vibe coding as “a process of iterating through ideas, accepting suggestions, discarding others, and allowing the final artefact to emerge from the generative process itself.” City Clock is that, at considerably larger scale.

The canal wasn’t planned. Neither were the mills, or the goods system, or the independent smoke cycles, or the city information stream. They emerged from the question each version of the city was implicitly asking: what would make this feel more real?

The human role in this process wasn’t writing code — this was the first system I have built where I never looked at the code. It was an odd feeling but times are changing - it was mainly a process in this is what i want - a living breathing small city living in my web browser and and on my phone’ that by the way, tells the time.

It was a conversation and aesthetic and editorial judgment. It was also a joy to build, developed as a ‘sideline’ between the actual day to day job and one of those things to give 20 minutes here and 20 minutes there to. Development (if it can be called development nowadays?), took two weeks.

At the moment it runs in any browser and if i have a few more 20 mintues side lines free, coming to iOS as an app.



Load the City

Do give it a go digitalurban.github.io/city-clock — add to your home screen for a fullscreen standalone experience and do try out the alarm.

City Clock - The Place where People Tell the Time.


</description>
        <pubDate>Wed, 06 May 2026 09:00:00 +0100</pubDate>
        <link>https://connected-environments.org/blog/2026-05-06-city-clock-vibe-coding-boids-people-tell-time/</link>
        <guid isPermaLink="true">https://connected-environments.org/blog/2026-05-06-city-clock-vibe-coding-boids-people-tell-time/</guid>
        
        <category>ai</category>
        
        <category>vibe-coding</category>
        
        <category>boids</category>
        
        <category>clock</category>
        
        <category>ios</category>
        
        
        <category>making</category>
        
      </item>
    
      <item>
        <title>Green Wall Irrigation System live at Avenue School</title>
        <description>Great to see the Nuna Green Wall Irrigation System going up over the Easter school holidays at Avenue Primary School. We have been working with Mac Van Dam with support from a UCL EPSRC Impact Acceleration Account (Circular Economy Innovation Challenge Grant Award) to add in some edge AI to their design. This first step was getting a monolithic off grid pumping system working, next up is creating a modular system (Hydrogrid project).



We have been documenting the project as we go to remind ourselves of the different off-grid approaches we are experimenting with. Initial tests involved working out the power requirements needed to pump water up a height of 7m - turns out gravity does have an impact on lifting a head of water. (Video from tests a month or so ago)

We used the DJI Mini 4 to get some footage of the install process. The second day of filming was quite windy making getting slow close up shots of the planters in the wall tricky. Ended up shooting way more footage than I would have liked (3 batteries worth) but did some experimenting with vertical filming and filming in D-Log. Results below.



3 minute landscape



30 second portrait

Looking forward to working on the distributed micro version of this over the next few months.

</description>
        <pubDate>Sat, 25 Apr 2026 09:00:00 +0100</pubDate>
        <link>https://connected-environments.org/blog/2026-04-25-biogrid/</link>
        <guid isPermaLink="true">https://connected-environments.org/blog/2026-04-25-biogrid/</guid>
        
        <category>making</category>
        
        <category>research</category>
        
        
        <category>events</category>
        
      </item>
    
      <item>
        <title>Celebrating 200 Years of UCL with the Time Telephone</title>
        <description>In February 2026, UCL launched its bicentennial celebrations, opening a year of exhibitions, installations, performances, and public events marking 200 years since its foundation (see the full programme here). As part of these celebrations, I was invited to contribute with one of my favourite long-term installation: the Time Telephone.

A Familiar Phone Box with a Story

If you’ve spent time around UCL in recent years, you may have already spotted it, the distinctive red telephone kiosk K6 originally designed by Sir Giles Gilbert Scott has travelled between Marshgate, the UCL Institute of Education, the Connected Environments Lab, and even at the University of Sheffield.

In its first iteration, the installation invites visitors to “call” the past and listen to recordings of children’s play gathered across generations and locations in the UK during the EPSRC Playing the Archive project, offering a simple yet powerful way to connect with shared cultural memories. You can read more about its concept and development on our Connected Environments website, on the Iona and Peter Opie Archive website and from our book Playing the Archive: From the Opies to the digital playground



A New Home for UCL 200

For the UCL 200 celebrations, the Time Telephone has taken up residence in the UCL Student Centre as part of the Two Centuries Here exhibition. In this new setting, the Time Telephone invites students, staff, and visitors to pick up the handset and explore stories from UCL’s past.
The recordings featured in this iteration come from Generation UCL: an oral history of student life in London. The installation includes excerpts from more than 90 interviews recorded between 2022 and 2025, drawn from research by Professor Georgina Brewis and Dr Sam Blaxland for their upcoming book Student London: A New History of Higher Education in the Capital.
Within the first two months of its opening, the Time Telephone has received over 600 calls and counting. 
A big thank you goes to Dean Veall for the support during the installation, and Cyrus Shroff whose careful restoration work refreshed the phone box after more than eight years of uninterrupted service.



Project Origins

The Time Telephone was originally developed by Dr Valerio Signorelli as part of the Playing the Archive project, co-led by Prof Andrew Burn, Prof Jackie Marsh, Prof Andy Hudson-Smith, and Dr Duncan Hay.
The project explored children’s play activities from past and present, and was created in collaboration with:

  UCL Knowledge Lab,
  UCL ReMAP
  The Bartlett Centre for Advanced Spatial Analysis (CASA)
  The University of Sheffield
  The Young V&amp;amp;A
  The Bodleian Libraries
  The British Library


The concept of the TimeTelephone was co‑created and tested with primary school children in Tower Hamlets by Prof John Potter, Dr Kate Cowan, and Dr Valerio Signorelli, with recordings collected in Sheffield, Cardiff, London, and Aberdeen by Dr Julia Bishop, Dr Catherine Bannister, and Alison Somerset-Ward.

</description>
        <pubDate>Fri, 17 Apr 2026 09:00:00 +0100</pubDate>
        <link>https://connected-environments.org/blog/2026-04-17-timetelephone-at-ucl200/</link>
        <guid isPermaLink="true">https://connected-environments.org/blog/2026-04-17-timetelephone-at-ucl200/</guid>
        
        <category>making</category>
        
        <category>engagement</category>
        
        <category>research</category>
        
        
        <category>events</category>
        
      </item>
    
      <item>
        <title>Indoor Solar Energy Harvesting with Supercapacitors</title>
        <description>Introduction

With advances in photovoltaics, low power circuits and communication protocols, it is possible to sustainably power simple indoor sensor circuits via the energy harvesting of indoor ambient light. Indeed, it is now possible to buy commercial indoor environment sensor systems such as the Elsys ERS Co2 LoRa indoor environment monitor that can run indefinitely on harvested indoor light.

The aim of this work was to explore a simple and cheap DIY approach to sustainably powering an indoor connected sensor system, through the harvesting of ambient light.
A key design decision was to use a supercapacitor for energy storage. Batteries, even rechargeable ones, have a limited lifetime (charge/discharge cycles) and generally required a dedicated charging IC. Supercapacitors avoid these limitations and although their energy storage capacities are much less than a similar sized battery, they are more environmentally friendly.

LoRaWAN was chosen as the communications protocol, since it is has low power demands on the client and the infrastructure already existed.

Building Blocks

Photovoltaic Panel

A small 5cm x 5cm organic light harvesting solar panel was used (Epishine LEH3_50x50_6) due to its superior low light performance, compared to conventional silicon panels.

Rectifier Diode

A BAT43 Schottky diode for its low forward voltage drop

Supercapacitor

Abracon 10F 5.5V (ADCM-S05R5SA106RB) supercapacitor. Affordable and high nominal voltage.

Voltage Supervisor

Texas Instruments TPS3839G33DBZR ultralow power, supply voltage monitor. The choice of this component was inspired by this thread. The voltage supervisor disables the system (via the voltage regulator) when the capacitor voltage level falls below the threshold required to reliably operate the circuit. It also adds some hysteresis into the circuit such that the ‘off’ threshold voltage (3.4 V) for a falling capacitor voltage (discharging) is less than the ‘on’ threshold voltage (3.6 V) for a rising capacitor voltage (charging). This ensures that for a rising capacitor voltage the capacitor has a sufficient reservoir of charge to operate the circuit reliably before the regulator is enabled.

Regulator

A 3 V ultra-low quiescent current,  low drop out (LDO)  regulator (Microchip MCP1711T-30I/OT), which includes an enable/disable pin.

Microcontroller

Microchip Technology ATMega328P-AU. This is compatible with the Arduino platform and the LoRaWAN library required for the LoRa module

LoRa Module

RFM95W which is a cheap and widely available LoRa radio module. The MCCI LoRaWAN LMIC library is used to provide LoRaWAN compatibility.

Sensor

Texas Instruments HDC1080 Temperature/Humidity sensor. Good quality, affordable sensor with low current requirement.

Circuit





Focusing on the energy harvesting part of the circuit, CN1 is a connector into which the solar panel plugs. The Schottky diode prevents the supercapacitor C1 discharging into the panel when light levels are low. The voltage divider formed by R1 and R2 is used to set the required ‘off’ threshold to about 3.4 V, since the intrinsic threshold of the voltage supervisor is a somewhat on the low side at about 3.08 V. The feedback resistor R4 adds the required hysteresis – the calculation details for determining the appropriate resistor values are documented in a Texas Instruments technical note. With the hysteresis, the voltage supervisor disables the regulator when the rail voltage (the voltage across the supercapacitor) falls to 3.4 V and enables the regulator when the supercapacitor voltage rises to 3.6 V. The hysteresis prevents the system endlessly cycling around the threshold voltage (i.e. the charging capacitor reaches the threshold voltage, the microcontroller starts up and transmits data over LoRa, which discharges the supercapacitor such that its voltage immediately falls below the threshold). The bypass capacitor C2 is critical to correct operation of the circuit, since the voltage supervisor periodically senses the voltage rail using short 200 µS samples that consume a current of approximately 15 µA, sufficient to cause a significant voltage drop across R1 in the absence of the bypass capacitor. The capacitor pairs C4,C5 and C6,C7 provide charge reservoirs to supply the excess current required by the fast transient that occurs when the LoRa radio transmits. R7 is a pullup resistor to ensure the enable pin of the regulator is kept HIGH when not being dragged LOW by the voltage supervisor.

Operation

In general, the prototype worked pretty well in an indoor environment with light levels typically in the range of 500-1000 lux (artificial lighting supplemented by some natural light through windows).  For a duty cycle of one transmission every 10 minutes, an average current draw of 115 µA was estimated – assuming a leakage current of 10 µA for the supercapacitor, which is probably a realistic figure. This current draw should be just about sustainable given the prevailing light levels and chosen solar panel. In practice some outages were observed particularly in winter when there was little daylight to supplement the artificial lighting, but the system would restart smoothly once ambient light levels recovered. With a lower duty cycle it is possible the system down time could be avoided altogether. However, it is clear the performance of this simple prototype was not as good as the more sophisticated Elsys system in very low light levels. It is worth noting that swapping out the organic light harvesting solar panel with a much cheaper conventional 0.5 W silicon panel of a similar size made little difference to the performance in a well lit indoor environment, at a considerable cost saving (~ £30 v £3), but would likely not perform as well in dimly lit conditions.





Possible Refinements

There are a number of refinements possible that could improve the performance further. The microcontroller and LoRa radio combined consume about 7 µA when sleeping, which is a satisfactory figure. However, in addition to this, the R1,R2 voltage divider continuously sinks more than 1 µA. And the pullup resistor (R7) will sink perhaps 3.5 µA when the regulator is disabled by the voltage supervisor. Whereas there maybe optimisations possible to the above, it is likely that the largest current drain is the supercapacitor leakage (estimated at 10 µA). One interesting optimisation that the Elsys system employs is a variable duty cycle depending on the supercapacitor state of charge (voltage). This could be implemented, but would require additional components. Another optimisation that would be interesting to explore is using a boost converter to harvest more energy from the solar panel - currently if the voltage across the supercapacitor exceeds that available from the solar panel, then no energy is harvested. However, such optimisations would add additional complexity and cost to the design.

</description>
        <pubDate>Wed, 08 Apr 2026 09:00:00 +0100</pubDate>
        <link>https://connected-environments.org/blog/2026-04-08-energy-harvesting/</link>
        <guid isPermaLink="true">https://connected-environments.org/blog/2026-04-08-energy-harvesting/</guid>
        
        <category>making</category>
        
        <category>sensors</category>
        
        <category>solar</category>
        
        <category>connected-environments</category>
        
        
        <category>projects</category>
        
      </item>
    
      <item>
        <title>Wrapping Up Term 2 with Group Prototyping and Pitching</title>
        <description>Our last week of the Term 2 has started, and with it the 2025–26 cohort is getting ready to submit their final assessments. First in line is Group Prototyping and Pitch. Working in six groups, the students have been prototyping and developing their ideas in response to the brief Across the Miles.



They have been applying the technical skills learned in the Term 1, and extending them through lectures and workshops on group collaboration, prototyping techniques, PCB design, and including an insightful session from John Nussey (Onn Studio), and through video production support from our colleagues in BA Media (big thanks to Gyorgy Beck, Ardeshir Abdolrahimi and Robin Billingham).



It is been great to see how their ideas have evolved week after week. The way the cohort responded to the theme ranged widely: from connected butterflies that use proximity sensors to detect movement and express presence through kinetic motion, to a connected piano designed to help people feel, see, and learn music together. Other groups explored devices that connect people across the miles through mood‑sharing interactions, or reimagined traditional practices, such as the tea ceremony, to bring families and friends together in a shared moment of calm amid a busy day. We also saw projects engaging with sport and wellbeing, including a device that supports cyclists and allows them to connect in case of emergency, as well as a boxing‑inspired training system.





  
  Mood Link



  
  Tea for Three



  
  Butterfly Effect



  
  Tether



  
  Punch Reach



  
  MelodiUS



The individual dissertation projects are also beginning to take shape, and if you are interested in seeing the results, please save 16 July 2026 in your calendar for the opening exhibition at UCL Marshgate. Work from previous years can be viewed on our CE Digital Showroom exhibition website.


</description>
        <pubDate>Wed, 25 Mar 2026 08:00:00 +0000</pubDate>
        <link>https://connected-environments.org/blog/2026-03-25-teaching-gpp-showcase/</link>
        <guid isPermaLink="true">https://connected-environments.org/blog/2026-03-25-teaching-gpp-showcase/</guid>
        
        <category>making</category>
        
        <category>student</category>
        
        <category>connected-environments</category>
        
        
        <category>teaching</category>
        
      </item>
    
      <item>
        <title>Aqua Clock: Multi-Model Vibe Coding, Boids, and the Fish That Tell the Time</title>
        <description>An Aquairum, published into the Apple Store, that tells the time was never the plan. The plan was to explore the use of the latest AI tools to develop agent based models with the aim to use those models to display data feeds. It turned into its own unique app where the fish (the aqents) gather every minute to tell the time - Aqua Clock.



Aqua Clock began as a loose experiment, in between writing a paper on the ‘Phygital City’. It aimed to explore how to build an agent-based simulation entirely through conversational AI — no design document, no formal spec, just an open-ended dialogue and a canvas to draw on? The fish came first as the boids algorithm is a natural first step. The idea of the clock came mid break from the paper and it was so nice, the release into the  The App Store came next.



Aqua Clock: where the fish tell the time Download on the App Store

What is Vibe Coding?

Vibe coding is now a common term, but the tools are moving rapidly and to keep on top of developments its good to take a fresh look at the workflows every could of months. Rather than writing code to meet a brief, its a processes of  iterating through ideas, accepting suggestions, discarding others, and allowing the final artefact to emerge from the generative process itself. Its like have a computer scientish on hand, where you discuss ideas and they go off and build things.

There is no requirements document, no architecture diagram drawn in advance, no sprint backlog. There is a conversation — often exploratory, sometimes surprising — between a human an AI system with broad technical knowledge. Its a new an emerging world of developing apps and in many ways it frees up creativity.

Its all about the Boids

The project started with a classic problem in computational simulation: how do you model the collective, emergent behaviour of a group of agents following simple local rules? Craig Reynolds’ boids algorithm, first published in 1987, remains the canonical answer. Three steering rules — separation (avoid crowding neighbours), alignment (steer toward the average heading of neighbours), and cohesion (steer toward the average position of neighbours) — produce uncannily lifelike flocking behaviour from agents with no global awareness of the group.



The original goal was modest: Claude (we used both Claude and Gemini during the developement) was prompted with an open-ended invitation: let’s build a fish tank with flocking fish. What followed was a series of exchanges in which the AI generated, explained, and iteratively refined a TypeScript/React simulation rendered on an HTML5 Canvas. Ghost shrimp, snails, a crab, bubbles, and drifting plants were added over successive sessions. The result was a convincing living aquarium — aesthetically pleasing, behaviourally rich, and computationally lightweight at under 11 MB. AI systems have ‘token’ limits on use and the development of the app took a series of back and forth flows between Gemini and Claude, which we detail in the next section.

At this point, the project had no clock, just a nice living aquarium where the plants grow over time and the fish school together, as planned.

The Creative Pivot: Fish as Time Display

The idea emerged, as many good ones do, from a tangential observation mid-session. The tetra fish — small, numerous, 28 in the final implementation — could in principle be choreographed to form recognisable shapes. Seven-segment displays, the kind used in digital clocks and calculators since the 1960s, are composed of straight line segments. Fish swimming in formation along those segments could render digits legibly. Regular readers of my site over at digitalurban.org will know i have a ‘thing’ about clocks, physcial and digital.

This is the core design insight of Aqua Clock: the fish are not decorative, they are functional. Every minute, the 28 tetra fish abandon their emergent flocking behaviour and are assigned target positions along the seven-segment outlines of four digits representing HH:MM. They swim to those positions, hold formation, then dissolve back into free flocking. The transition — fish departing their natural behaviour to form the time and then dispersing — is itself a kind of performance, observable in real time.

A double-tap gesture summons the time on demand, holding the formation for seven seconds before releasing the fish. Single-tap drops food pellets the fish chase and consume. Pinch and scroll adjust water brightness. An optional ambient underwater soundscape plays in the background.

None of these features were in a specification. Each one emerged from the conversation.

The living aquarium between time displays

A Dual-AI Workflow with GitHub at the Centre

One of the core aspects of this project was its use of two distinct AI systems in alternating roles, with GitHub as the shared substrate between them.



Claude handled the heavier architectural work — the initial boids implementation, the entity system (VectorFish, GhostShrimp, Snail, Crab, Bubble, Food), the canvas rendering pipeline, and the seven-segment clock logic. Claude’s strength in this context was its ability to hold a large codebase in working context and reason about the interactions between components.

Gemini AI Studio was brought in at points where a fresh perspective was useful — reviewing code for performance issues, suggesting interaction patterns, and providing an independent read on the user experience. Critically, Gemini operated from the code as it existed in GitHub at each handoff: the repository served as a shared ground truth that neither AI system owned, and that both could read.

GitHub, in this model, is not merely version control — it is the handoff protocol. Committing code to the repository creates a durable, readable artefact that can be passed to a different AI system without loss of context. Each commit is, in effect, a message in a conversation between two AI interlocutors mediated by a human developer who understands both.

This is a pattern worth naming: multi-model vibe coding, in which different LLMs contribute distinct perspectives to a shared codebase, with version control as the neutral interchange format.

Under the Hood

The final application is built on a deliberately lightweight stack:


  React + TypeScript for component architecture and state management
  Vite as the build tool, chosen for fast hot module replacement during iterative sessions
  HTML5 Canvas API for all rendering — no WebGL, no external graphics library
  Capacitor for iOS packaging — the web application wrapped in a native iOS container, no Swift written by hand


Battery efficiency was a deliberate concern. The animation loop uses requestAnimationFrame with frame-rate throttling, and its suspends entirely via the visibilitychange API when the app is backgrounded. The bubble simulation is capped at 150 active bubbles to prevent unbounded growth at high air pump settings.

The fish themselves are roughly 50 lines of simulation logic per entity per frame — position update, velocity update, boids force accumulation, wall steering, food steering, and clock-formation steering when active. The emergent complexity of the aquarium arises from the interaction of these simple rules across 28+ fish, not from any global choreography system.

Deployment: From Browser to App Store

Capacitor, developed by Ionic, bridges web applications to native mobile platforms. The build process was:


  npm run build — Vite compiles the React/TypeScript application to a static web bundle
  npx cap sync ios — Capacitor copies the bundle into an Xcode project scaffold
  Xcode — the compiled app is signed and submitted to Apple’s App Store Connect


The entire application logic — including all simulation code — runs in TypeScript inside a WKWebView on iOS. The app is 10.5 MB, requires iOS 15.0 or later, and is compatible with iPhone, iPad and Mac (Apple Silicon).

The absence of native Swift code in the application layer is itself a product of the vibe coding approach: when the AI generates web technology natively, and Capacitor wraps it for distribution, the boundary between “web app” and “native app” dissolves in ways that would have seemed implausible even a year ago. The development of an app to the store is so short that a rise in ‘app abandonment’ is probable, where its so easy to make an publish apps that ‘developers’ (maybe that term now needs a new name) rapidly move onto the next thing.

What Vibe Coding Reveals

Aqua Clock would not exist without vibe coding — not because the underlying techniques are beyond a skilled developer, but because no specification for it would ever have been written. The combination of a living aquarium with a fish-formation clock is an idea that emerges from the process of making, not from planning.

This is what vibe coding offers: a mode of creative-technical practice in which the act of building is also the act of discovery. The AI does not replace the developer; it accelerates iteration to a pace at which exploration becomes viable. Ideas that would require days to prototype can be tested in hours.

The dual-AI workflow introduces a further dimension: different models bring different tendencies. Using Claude and Gemini in alternating roles — with GitHub as the neutral handoff — introduces a productive form of creative friction, analogous to showing a half-finished painting to a different critic at each stage.

What remains irreducibly human in this process is aesthetic judgement: the decision that fish should form a clock, that the transition between modes should be visible and unhurried, that the aquarium should feel inhabited rather than mechanical. The AI provided the means; the human provided the meaning.

City Clock - The City where the People Tell the Time

Of course the majority of our work is concerned with cities and the concept extends in a City where the People Tell the Time - as such City Clock is under development (its almost complete) and will be incoming to the Apple Store soon…



Download it

Aqua Clock is free on the Apple App Store for iPhone, iPad, and Mac. An Android version is incoming, probably ‘developed’ during a break on a book chapter i need to complete next week…

Download on the App Store

</description>
        <pubDate>Fri, 20 Mar 2026 08:00:00 +0000</pubDate>
        <link>https://connected-environments.org/blog/2026-03-20-aqua-clock-vibe-coding-boids-fish-tell-time/</link>
        <guid isPermaLink="true">https://connected-environments.org/blog/2026-03-20-aqua-clock-vibe-coding-boids-fish-tell-time/</guid>
        
        <category>ai</category>
        
        <category>vibe-coding</category>
        
        <category>boids</category>
        
        <category>clock</category>
        
        <category>ios</category>
        
        
        <category>making</category>
        
      </item>
    
      <item>
        <title>Two Fully-Funded PhD Opportunities</title>
        <description>Two Fully-Funded PhD Opportunities at UCL&apos;s CASA Connected Environments Lab

UCL is now accepting applications for the EPSRC Landscape Award (UELA) 2026/27, offering 50 fully-funded four-year PhD studentships starting 1 October 2026. Among the 100+ projects listed, two of them are based with us at Connected Environments Lab. 

 Project 1:  Overlayed Realities – Situated Visualisation and Analyses for Managing and Predicting Resilient Urban Systems
Supervisor: Dr Valerio Signorelli

Cities are increasingly layered with digital information, yet much of this data remains fragmented and difficult to interpret in context. This project explores how Human-AI collaboration can transform Extended Reality (XR) technologies from passive visualisation tools into platforms for analysing and interpreting urban systems.

The research aims to make urban data more legible, experiential, and actionable, supporting better decision-making in areas such as climate adaptation and urban resilience. Applicants will work across disciplines, architecture, computer science, urban studies, game design, geography, and develop immersive toolkits that turn complex datasets into situated narratives.

 Project 2:  The Invisible Cyclist – Mandating V2X Presence Messaging for Autonomous Urban Streets
Supervisor:  Prof Duncan Wilson

In partnership with The Bicycle Association of Great Britain

This high-impact project addresses a critical safety challenge: the inability of vehicles to detect cyclists when line-of-sight is obstructed. With autonomous vehicles on the rise, this research aims to ensure cyclists are no longer invisible to connected road systems.

You’ll engineer a low-power IoT transmitter for bicycles that guarantees sub-2-second V2X communication, and develop the policy and economic case to mandate V2X receivers in all new vehicles. This is a rare opportunity to combine technical innovation with transport policy to shape the future of safer urban mobility.

 UELA Studentship Highlights:

  50 fully-funded studentships (Home &amp;amp; International; max. 15 international places)
  Start date 01 October 2026 (flexibility possible for exceptional circumstances)
  Explore all 119 projects  here 
  Full studentship info &amp;amp; application guidance  here
  Application deadline: 05 January 2026 at 1pm


If you&apos;re interested in immersive technologies, urban systems, IoT, or shaping future mobility and resilience, these projects offer a unique opportunity to make a real-world impact.

Please share with anyone who might be interested!

</description>
        <pubDate>Mon, 27 Oct 2025 00:00:00 +0000</pubDate>
        <link>https://connected-environments.org/blog/2025-10-27-uela-phd-opportunity/</link>
        <guid isPermaLink="true">https://connected-environments.org/blog/2025-10-27-uela-phd-opportunity/</guid>
        
        <category>connected-environments</category>
        
        <category>phd</category>
        
        
        <category>PhD</category>
        
      </item>
    
  </channel>
</rss>