The Instaspam Week
Capabilities to develop
- Accessing the camera on mobile phones
- Access Facebook API from within Processing
- Use App GUI interface
- Understand PHP and Javascript integration challenges
Gist of the Instaspam design
- Take a picture: Provide a button to capture images from files or cameras
- Add a Button to the sketch
- Link the selectFile() function in insta.js to the button
- Manipulate the image: Provide more buttons to manipulate the image
- Push image to Facebook: Provide a button to push an image to Facebook in a 2-step process
- Upload image in Processing canvas to a file in the cloud (using PHP or something similar)
- Push uploaded file to Facebook
Create a Facebook App for Integration
- Signup as a facebook developer
- Go to https://developers.facebook.com/apps
- Create a new app
- You need own a web site (a place you can upload images)
- Get Facebook appId and store into insta.js
- Save the channel.php file on your webspace
Challenges
- Image manipulation on mobile phones can be slow for large images
Image Effects
- Applying tint filter. Tints are useful for:
- turning a black and white photograph into an old style sepia image
- making all of the images in your app have a consistent color scheme
- Apply an overlay. Overlays are useful for:
- adding a picture frame to your image
- creating a mist or fog effect
- Use Buttons:
- Button b = new Button("name",x,y,w,h);
- b.setImage(img_active);
- b.setImage(img_inactive);
- b.display(); // in draw()
- b.mouseReleased(); // in mouseReleased()
- Use RadioButtons
- Use showGUI variable to display buttons only if showGUI is true
Image Processing
- insta.js - allows Processing to access cameras on mobile phones
- edit index.html
- <body onload="setupFileListener()">
- <script src="insta.js"></script>
- <input type="file" name="file" id="file"/>
- assign the selectFile() function to a button
- the function will capture from the camera
Notes
- alpha = opacity (255: opaque, 0: transparent)
No comments:
Post a Comment