Something went wrong.

We've been notified of this error.

Need help? Check out our Help Centre.

Provide

Technical tools

  • Brackets
  • JavaScript
  • p5.play.js
  • Procreate
  • Adobe Photoshop
  • LeapMotion

Concepts

  • Loops
  • Sprites
  • States

Course

Programming Foundations with Jay Taylor-Laird at Northeastern University College of Professional Studies

My role

Designer, artist, developer

I started developing this program as a single page web app that would be controlled with a Leap Motion. I was inspired by the idea of a community garden: something that provides peace of mind and enjoyment to many contributors at once. However, I am not known to be a good plant mother, so I wondered: what would happen if a community garden were digital?

As I developed it, I imagined that the end result would ideally be displayed either on a large screen or projected onto a wall. A Leap Motion would be set-up on a pedestal near the display. Users would be able to walk up to the pedestal and use hand motions to interact with the program. They would be able to choose to either plant a flower, or care for one that already exists. The flowers would indicate when they need water or sunlight, and the user would be able to provide this for them through gesturing with the Leap Motion. Together, the members of the community would be responsible for keeping these flowers alive.


A quick sketch of how users could interact with the installation, both as observers and participants.

I originally envisioned my project as encompassing the functionality of the Leap Motion, so I immediately set out to make my way through the documentation so I would be able to program with it. I used svg.js as my library for the initial prototype. At the time I was picturing watching these flowers grow from an elevation view, and in this first sketch it shows the flowers rising soon after they are planted and growing in diameter.

I then refined my concept to show the user the garden from a plan view. Part of my initial idea was to entice potential viewers to interact with the program because the aesthetics would help to draw them in. Although still visually interesting from an elevation view, I decided that making it from a plan view would really emphasize the potential beauty of the design.


The Final Prototype

The final prototype is more of a simulation than an actual representation of how this would exist in real life if it were to be made. For beta testing purposes it doesn’t make much sense to make the growth of a flower take an entire day, so I sped up the lifecycle of each flower to be between a matter of seconds rather than hours. This way, the user still gets an idea of how the application would function, but doesn’t have to wait the actual time for a digital flower to grow. Additionally, in this beta prototype it exists in a webspace rather than as an installation, and users don’t need the Leap Motion to use it. My prototype functions so that the user can simply use a mouse and arrow keys.


The Code

I mainly used Javascript for this application, utilizing the libraries P5.js and P5.play.js. I primarily used a built in array of sprites to contain the flowers, and looped through them to check their states. I learned a lot about boolean variables in the process of this project, in addition to the creation of objects and methods, and the utilization of sprites.

Using Format