SchemestagramImageManipulation

Timothy Alexander and Bunlong Heng
May 2, 2014

Overview

Schemestagram is a web-based image manipulation application, akin to the popular iOS/Android app Instagram. A user can upload an image and customize it using premade picture filters, and image manipulators.

Screenshot

A screenshot of the result of running Tim's "back-end" racket program. What you see is a directory that has been populated by images, such as a waterfall that has been manipulated by a few filters, and a yin-yang who's color values have been edited using Tim's awesome racket program.

A screenshot of Long's web-based "front-end" of the application, which displays the images produced in the back-end, in a user-friendly way. Buttons are added for each of the possible manipulations that can be applied to the user's image. Here you can see a user uploaded a yin-yang, and can change the color of the yin-yang to any of 12 provided color swatches, and even rotate the image left and right, thanks to Long's awesome racket program.

Concepts Demonstrated

1/6 of the project grade is based on which concepts from OPL are demonstrated in your project. Please identify them here. Be brief; a simple list and one-sentence explanation for each concept should be adequate; e.g.:

Tim:

Message Passing Style is used to identify the 3 datatypes to be edited by 4 possible procedures (e.g. Red/Green/Blue values, edited by 4 different types of procedures that edit these vals)
I used multiple Layers of Abstraction to provide an easy user/developer experience.
Implemented the Functional Programming paradigm to the extreme, since .png images are represented in Racket as "color-lists" which are essentially giant lists of thousands of pixels and their RGB-ALPHA values i.e. (color 123 214 04 255).
Worked with tagged datatypes because that's how pixels are represented in the htdp2 package.
Though this concept was quickly glazed over in class, I made a macro if it counts for anything!

Long:

Utilized basic Define Syntax and function calling procedures, as well as require syntax and external file inclusion
Applied the basic concepts of functional programming
Worked with HTML page responses and X-expression representation
Because I used the specific web-server/insta Racket package, I was constrained to a specific syntax that I had to follow, which limited my ability to include concepts from class, and required that I learn new concepts related to web-based racket programming.

External Technology

Another grading category is the “extent to which project integrates with some external technology.” Briefly mention this here. If your external technology is a Racket library, describe it.

Tim: My project uses the htdp2/image package, which provides basic image manipulation functions which I extensively expanded on for my assignment.

Long: My end of the project uses the web-server/insta (documentation found here: http://docs.racket-lang.org/web-server/). I also used Adobe Photoshop CS6 to design the webpage.

Both: Our project allows for a user to upload their own image to our program.

Innovation

Schemestagram is the first image manipulation application written in Racket/Scheme. It provides a user-friendly front-end, that produces perfectly viable, professional looking results. The predefined filters in the back end came out great, adding some awesome effects to a user's images. Tim's end expands drastically on a pre-existing Racket package. Long used old-school static webpage style, and has done an exceedingly good job making it pretty and consistent given the circumstances.

Technology Used Block Diagram

Additional Remarks

Both of us found this project to be an excellent experience. We got to use the concepts we learned in class to build an application that has value, beyond producing the n'th value of the Fibonacci sequence (for once)! This was an awesome project, and even through all the bugs and trial and error, we had fun and learned a lot.