Image Collage Project





     This assignment was to take ten optimized transparent personal images and create an interactive collage using HTML5 Canvas code. We were given free rein for creativity, but the photos had to be our own, as well as include an interactive component for the user that changed the layout or the way the collage was perceived. 

     For this assignment, I took ten images that I had taken myself and made them into a collage. I took a beach aesthetic approach to it and used pictures of myself and my friends at the beach, pool, or lake, as well as photos of me surfing from home. I applied filters such as blur, hue-rotation, and drop shadow to the images once coded onto the canvas. I used X and Y coordinates on the filters to have them appear, disappear, or dilute as the user dragged their mouse across the screen to include the interactive component of the project. Some pictures changed colors as the mouse was dragged across the screen, and some even appeared and disappeared throughout this process. I enjoyed this project because I got to be creative and design a piece of some of my favorite things and make it interactive to have it constantly changing as you moved the mouse around the screen. 



Comments