Websites that adapt to changing energy levels

Ūrjā

What makes a good website? Ask a designer and they might talk about established principles for building intuitive, aesthetic, accessible sites. Keeping aside individual user experiences, if we a take the whole of the web into account, particularly its global energy consumption, another metric becomes apparent. What is the energy cost of a webpage whizzing past the cables, criss-crossing the planet, going from servers to clients? Ūrjā is a project that considers energy consumption as a parameter for the design of the web.


                                                                                                
    :..       ....  .. ........... .            ..   ...        .            . .                   
    ..?.   .: ?!7?^ ~~.5PP5JY5?~!^^! ^      ^^^ ~7  .Y~!: ^     ~.          :^ !     .: ^:         
      ?.   .: ?77J^ ~~.5GGPY5P?!!^^! ^      ^^^ !7   Y~7: ^     ~.          :^ !     .: ^:         
      ?.   .: ?77J^ ~~.5GPPJY5?!!^^! ^      ^^^ !7   Y~!: ^     ~.          :^ !     .: ^:         
      ?.   .: ?77J^ ~~.5GPPJY5?!!^^! ^      ^^^ !7   Y~!: ^     ~.          :^ !     .: ^:         
      ?.   .: ?77J^ ~~.5GPPJY5?!!^^! ^      ^^^ !7   Y~!: ^     ~.          :^ !     .: ^:         
      ?.   .: ?77J^ ~~.5GPPJY5?!!^^! ^      ^^^ !7   Y~!: ^     ~.          :^ !     .: ^:         
      ?    .: ?77J^ ~~.5GPPJY5?~!^^! ^      ^^: ~7   Y~!: :     ~.          :^ !      : ^:         
    ^.?:.  :^.?7?Y!.!!:PGGP5YPY??777.~... :.!!!.!J~.:5!7^.!:    7... .:^....^!:7 ..: :^.~^..       
      J~:  ^~.?!?GY:J!:GPPGPYGGGY5P?:7:.:.~^5JJ:?5Y:!G7J^^Y!   .Y.:. ^~?^:^.~7!7 ^.~ ~!:7!.:       
      J^:  ^~.?!?GY.?!:GPPGPYGPPY5P?:7:.:.~^YJJ:75J:!G7J^^Y!   .Y.:. :~?::^.~7~7 ^.~ ~!:!!.:       
      J^:  ^~.?!?GY.?!:GPPGPYGPPY5P?:7:.:.~^YJJ:75J:!G7J^^Y!   .Y.:. :~?::^.~7~7 ^.~ ~!:!!.:       
      J^:  ^~.?!?GY.?!:GPPGPYGPPY5P?:7:.:.~^YJJ:75J:!G7J^^Y!   .Y.:. :~?::^.~7~7 ^.~ ~!:!!.:       
      J^:  ^~.?!?GY.?!:GPPGPYGPPY5P?:7:.:.~^YJJ:75J:!G7J^^Y!   .Y.:. :~?::^.~7~7 ^.~ ~!:!!.:       
      J^:  ^~.?!?GY.?!:GPPGPYGPPY5P?:7:.:.~^YJJ:75J:!G7J^^Y!   .Y.:. :~?::^.~7~7 ^.~ ~!:!!.:       
    . J^:  ^~.?!?GY.?!:GPPGPYGPPY5P?:7..: ~^YJJ:75J:~G7J:^Y!   .Y... :~?::^.~7~7 :.~ ~~:!~.:       
    : YYYJJYYJ555GPY55YGPPGPPGGPPPPPY5YJYJYYP5PY5PPY5G55YYP5JJJJPJYJJYY5YYYYY555JYJYJ55Y55JYJJJ7   
      YGGGGGGGGGGPPGGGGPPPPPPPPPPGPGGGGGGGGGPGGGGPGGGPGGGGPGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGY   
      YGPPPPPPPPPPPPPPPPPPPPPPPPPPPGPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPGPPPPPPPPPPPPPPPPPPPPPPPPPPPGJ   
      YGPPPPPPPPPPPPPPPPPPPPPPPPPPPGPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPGPPPPPPPPPPPPPPPPPPPPPPPPPPPGJ   
      YGPPPPPPPPPPPPPPPPPPPPPPPPPPPGPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPGPPPPPPPPPPPPPPPPPPPPPPPPPPPGJ   
      YGPPPPPPPPPPPPPPPPPPPPPPPPPPPGPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPGPPPPPPPPPPPPPPPPPPPPPPPPPPPGJ   
      YGGGGGGGGGGGGGGGGGGGGGGGGGGGPGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGPGGGGGGGGGGGGGGGGGGGGGGGGGGGGGJ   
    :.JPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPJ   
    . ..........................................................................................  


                                                                                                
    : ...:.........  ............. .........  .................  .. .............. .       .       
    . J?!G5!JP5G~Y?  !5G5G5P5P5J!5^P5P5G55^P. ?Y!~5PJ!5J!P5PJ~!  JJ Y5!7!~55!775P5 !^      !^      
      JJ!BP!YP5B!Y?  !PG5G5PPGPY!P^GPG5G55^G. ?Y!~5GY!PY!GPGY~!  JJ YP!?!~55!7?PGP !~      !~      
      JJ!BP!JP5B!Y?  !PG5G5P5GPY!P^G5G5G55^G. ?Y!~5GJ!PY!PPGY~!  JJ YP!?!~55!7?PGP !~      !~      
      JJ!BP!JP5B!Y?  !PG5G5P5GPY!P^G5G5G55^G. ?Y!~5GJ!PY!PPGY~!  JJ YP!?!~55!7?PGP !~      !~      
      JJ!BP!JP5B!Y?  !PG5G5P5GPY!P^G5G5G55^G. ?Y!~5GJ!PY!PPGY~!  JJ YP!?!~55!7?PGP !~      !~      
      JJ!BP!JP5B!Y?  !PG5G5P5GPY!P^G5G5G55^G. ?Y!~5GJ!PY!PPGY~!  JJ YP!?!~55!7?PGP !~      !~      
      JJ!BP!JP5B!Y?  !PG5G5P5GPY!P^G5G5G55^G. ?Y!~5GJ!PY!PPGY~!  JJ YP!7!~55!7?PGP !^      !~      
    ^ JY7BP?YP5B!YJ  7PG5G5PPGPY!P!GPG5G55~G~:JY?7PGY!PY7PPGY7?..JJ.5P??!~55??JPGP !7:.:..:?~      
    . JP5G5GPP5B!Y? .G5G5G5P5GPY!PPG5G5G55^GPG5PGPPGJ!PPGPPGP5P^7JJ7P5GY!~55G5G5GP !BP!?!~5P^      
      JP5G5G5P5B!Y? .G5G5G5P5GPY!PPP5G5G55^GPG5PGPPGJ!PPGPPPP5P^7JJ7P5GJ!~55G5G5GP !BP!?!~5P^      
      JP5G5G5P5B!Y? .P5G5G5P5GPY!PPP5G5G55^G5G5PPPPGJ!PPPPPPP5P^7JJ7P5GJ!~55G5G5GP !BP!?!~5P^      
      JP5G5G5P5B!Y? .P5G5G5P5GPY!PPP5G5G55^G5G5PPPPGJ!PPPPPPP5P^7JJ7P5GJ!~55G5G5GP !BP!?!~5P^      
      JP5G5G5P5B!Y? .P5G5G5P5GPY!PPP5G5G55^G5G5PPPPGJ!PPPPPPP5P^7JJ7P5GJ!~55G5G5GP !BP!?!~5P^      
      JP5G5G5P5B!Y? .P5G5G5P5GPY!PPP5G5G55^G5G5PPPPGJ!PPPPPPP5P^7JJ7P5GJ!~55G5G5GP !BP!?!~5P^      
      JP5G5G5P5B~Y? .P5G5G5P5GPJ!PPP5G5G55^G5G5PPPPGJ!PPPPPPP5P^7JJ7P5GJ!~55G5G5GP !BP!7!~5P^      
    ^ JP5G5GPP5B?5Y~!G5G5G5PPG55?PPGPG5G5P7GPG5PGPPGYJPPGPPGP5G7JYYJP5GYJ?P5G5GPGP~?B5JJJ7P5?~!~   
      JP5G5G5P5G5G5GPG5G5G5P5G5G5PPP5G5G5PPP5G5PPPPPPG5PPPPPP5GPGPPGP5GPGPP5G5G5PPP5G5GPP5G5BPGY   
      JP5G5G5P5G5G5P5G5G5G5P5G5G5PPP5G5G5PPP5G5PPPPP5G5PPPPPP5G5PPPPP5G5PPP5G5G5PPP5G5G5P5G5G5PY   
      JP5G5G5P5G5G5P5G5G5G5P5G5G5PPP5G5G5PPP5G5PPPPP5G5PPPPPP5G5PPPPP5G5PPP5G5G5PPP5G5G5P5G5G5PY   
      JP5G5G5P5G5G5P5G5G5G5P5G5G5PPP5G5G5PPP5G5PPPPP5G5PPPPPP5G5PPPPP5G5PPP5G5G5PPP5G5G5P5G5G5PY   
      JP5G5G5P5G5G5P5G5G5G5P5G5G5PPP5G5G5PPP5G5PPPPP5G5PPPPPP5G5PPPPP5G5PPP5G5G5PPP5G5G5P5G5G5PY   
      JP5G5G5P5G5G5P5G5G5G5P5G5G5PPP5G5G5PPP5G5PPPPP5G5PPPPPP5G5PPPPP5G5PPP5G5G5PPP5G5G5P5G5G5PY   
    . JGPBPGPGPB5BPGPGPB5BPGPGPBPPPGPGPBPPPGPGPPGPPGPGPPGPPGPPGPGPPGPPGPGPPPBPGPGPPPBPGPGPB5BPGY   
    ^ ~7!7!7!7!7!7!7!7!7!7!7!7!7!!!7!7!7!!!7!7!!7!!7!7!!7!!7!!7!7!!7!!7!7!!!7!7!7!!!7!7!7!7!7!7~ 
      

Solar Protocol is a global network of volunteer-run servers powered by solar energy. These servers hold the same information butcommunicate with each other over public APIs to determine which server has the most energy at any moment in time & hence should become the active server. In effect, these servers share their workload, handing off responsibility as they wait to be recharged.

In the visualisation above, I use the Solar Protocol API to fetch the voltage and current data logged by the active server over the past week. The natural cyclical pattern in solar energy becomes apparent by the rise and fall in power over time. This data is fetched in real-time and rendered as an animated graphic in high-energy use designs, shown as a static image in medium-energy, and as an ASCII diagram on the low-energy page.

Imagine that the server-client interaction is akin to a chit-chat between two people. We intuitively gauge our own & our partner's energy levels and adapt the discourse accordingly. Similarly, clients and server must assess each other's energy levels to choose a design appropriate for their capacity.


    SERVER                                   CLIENT
 -------------------------------------------------------
  FEELING GOOD ----> [HIGH ENERGY] ------> FEELING GOOD
  I'M SO SO -------> [MEDIUM ENERGY] ----> I'M SO SO
  GOING DOWN ------> [LOW ENERGY] -------> GOING DOWN
  FEELING GOOD ----> [MEDIUM ENERGY] ----> I'M SO SO
  I'M SO SO -------> [MEDIUM ENERGY] ----> FEELING GOOD
  FEELING GOOD ----> [LOW ENERGY] -------> GOING DOWN
  GOING DOWN ------> [LOW ENERGY] -------> FEELING GOOD