top of page
Blog: Blog2
Search

Interactive with Stages - p5.js Sketch #3

  • Writer: anmonaco
    anmonaco
  • Nov 26, 2018
  • 1 min read

Updated: Dec 9, 2018

For my interactive visual with stages, I was inspired by skiing and the mountains. I decided to use a photo that I took in Vermont last year, and create my interactive visual based on edits to this photo. This first step to this was to take my image and edit it eight different ways. I used photoshop to edit, and I had to play around with many different effects and filters to get the cool graphics I wanted. I was challenged by what way to order the image so that it would go from least to most edited, but I soon figured that out. This order made it possible for me to show the progression of many different images. The image I have included here is the most edited visual I created.

I created the code by first uploading all the files and naming them in the order which I wanted them to appear. Next I used the basis of what we learned in class along with the code you gave us to figure out how to load the images. Then I changed the keys in order for the stages to match the order in which I wanted to appear. Lastly, I added a title to each stage, chagning the text, font, size, and placement to where I liked it.


Here is a link to my code: https://editor.p5js.org/anna10128/sketches/r1XI6td0X

The keys 1-8 change the image!


 
 
 

Comments


©2018 by Anna Monaco. Proudly created with Wix.com

  • facebook
  • twitter
  • linkedin
bottom of page