Introduction to Creative Exploration on the Web
Harvard Extension School

Jaz's Pokemon Ball

Jasmine Robinson

Project Details


Jasmine Robinson


Feb 2017


The Bauhaus (Spring 2017)

Student Comments

Bauhaus Inspiration

Object Number: BR49.392
People: Sewell Sillman, American (Savannah, Georgia 1924 - 1992 Lyme, Connecticut)

I have a tendency to make things more challenging than they should be because I enjoy experimenting. I spent hours dabbling with different ideas before I finally picked something I wanted to tackle. This painting appealed to me because the red and white circle in the right hand corner reminded me of a pokemon ball. After wasting far too much time on PokemonGo last summer, I guess the hope of finding a pikachu was permanently ingrained in my subconscious. 

My goal was to replicate the painting and add interaction that when you clicked the pokemon ball, a pikachu danced around the screen. Trying to figure out exact coordinates for each vector was a challenge. I ended up in Adobe Illustrator outlining a design, exporting it to SVG and then copying the path coordinates into my p5js sketch file. 

I also have not needed to do geometry in over ten years so I am still not sure why mathematically PI gives me half a circle but through trial and error, if something worked, I did not question the miracle. 

By making ample mistakes, I learned the the P5JS IDE is buggy and likes to crash. I learned my shapes are stacked in order and inherited the last fill and stroke you listed. I learned that 60 frames per second draws really fast. I learned it is a thousand times easier to load an image than to try to recreate it with vector points. I learned that the error messages are cryptic but luckily it highlights the line that caused the issue. I learned that creating loops inside the draw function is tricky because it is a loop itself and it is easy to accidentally create an infinite loop. 

My sketch has a few hidden interactions. If you click the pokemon ball, pikachu appears. If you click it again then pikachu hides. If you click on the dancing pikachu then there is a little surprise. I also had a Eureka moment when I realized I could write any javascript in my sketch.js therefore allowing me to change html div tags on my page during canvas interactions. As you can tell, I had fun with this project =)