Project 1 / Hide in Frame

This is a simple game. Enjoy it.
It is a click-based app which is made in order to review and study on HTML, CSS, and JavaScript.

Project 2 / Fun with Type

My second project is combination of 3 small app related to kerning and design letterform. First Game is a puzzle, /// Snap.svg Second Game is play with kerning /// Raphael.js And the last game is making letter with block of shape on the grid /// Snap.svg Enjoy it!

Project 3 / Color Analysis

My third project is an application that analyzes screen pixels based on their color from the incoming video. The result of this project can be used to evaluate the environmental color as well as to understand the color of the picture. The fact is that when different color placed near each other, they affect on our perception.With the help of this app, we are able to understand of the environmental color better.
Hope you enjoy it.

The process starts by finding the position of each pixel.

for (int i = 0; i < cols; i++) {
// Begin loop for rows
for (int j = 0; j < rows; j++) {
// Where are we?
int x = i*cellSize;
int y = j*cellSize;
int loc = (cam.width - x - 1) + y*cam.width; // mirror the image

I used a special grid and each 10 x 10 pixel made one cell.

// grid cell size
int cellSize = 10;

Color information was saved for three variables: r, g, and b.

float r = red(cam.pixels[loc]);
float g = green(cam.pixels[loc]);
float b = blue(cam.pixels[loc]);

After separation of color values, as each pixel has three amount of data, I chose three dimensions for arranging each pixel: X for red, Y for green and Z for the amount of blue.

int Xr = round(r - (r%cellSize));
int Yg = round(g - (g%cellSize));
int Zb = round(b - (b%cellSize));

A cube with the same size of the cell presents each pixel.

pushMatrix();
translate(1.1*Zb+ 300, 1.1*Yg+100, 1.1*Xr);
box(cellSize);
popMatrix();

In order to see the result from different perspectives, I used the camera, which interacts with the position of the mouse on the screen.

void mouseDragged()
{
camera(mouseX, mouseY, (height/2) / tan(PI*30.0 / 180.0), width/2.0, height/2.0, 0, 0, 1, 0);
}

Final Project / The Missing Piece Meets The Big O

My fourth project is a scroll-based ebook based on Shel Silverstein children book “The Missing Piece Meets The Big O”. For my project I used the Jquery plugin “scrollmagic” and “TweenMax”.