Week 16::Interface and Application Programming
Learning outcomes: Interpret and implement programming protocols. Source Files.
Interpret and implement programming protocols:
I used a board with ATMEGA328P. On this chip I used ADXL345 for input sensors and serial communication with processing. ADXL345 detects X and Y values. So I want to use it making Memory Exploring game.
Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Also Processing is open source, free software. So I used processing to create the interface of this game.
First, download the gifAnimation library form this website. Second, download the google map and streetview from google. And make some checkpoint where is your memory place.
Used ADXL345 to control google map direction. So when you turn ADXL345 left, you will see the map of left hand. Turn ADXL345 right, you will see the map of right hand. You can enter to streetview when you keep about five second on the ckeckpoint. Also, if you keep one point for five to seven second in the streetview you will go back to map view. I called it a memory exploring game.
Some explanation with code:
To set which com port with your board.
String portName = "COM14";
Read value from serial input.
myString = myPort.readStringUntil(lf);
Programming in processing:
// FlashBack Test v1.1
import processing.serial.*;
import gifAnimation.*;
//Serial myPort; // Create object from Serial class
int val; // = new float; // Value Array [z, x, y]
int lf = 10; // Linefeed in ASCII
String myString = null;
Serial myPort; // Serial port you are using
float num, valZ, valX, valY;
// averaging
float valZ1, valZ2, valZ3, valZ4, valZ5;
float startZ, startX, startY;
float differenceZ, oldFrameX, oldFrameY, tempX, tempY, differenceX, differenceY, enterPoint;
float frameZ, frameX, frameY;
float[] dimensions;
int sizeX, sizeY, maxSizeX, maxSizeY, minSizeX, minSizeY, bSizeX, bSizeY, minBSizeY, minBSizeX, maxBSizeX, maxBSizeY;
int sensativity;
int golbalCount, YvalueCount, timeout, timeforEnter;
PImage bgImage, svImage, svImage1, svImage2, svImage3, svImage4;
PImage imgMask;
PImage logoFlash;
PImage mapImage;
float zoom = 1;
int delay = 600;
int delay2 = 100;
int mapCheck;
int state = 0;
/*
public void init() {
frame.removeNotify();
frame.setUndecorated(true);
frame.addNotify();
super.init();
}
*/
void setup()
{
// Setup Screen
smooth();
noStroke();
background(255);
frameRate(60);
size(1280, 720);
//size(displayWidth, displayHeight, P3D); //1656, 1364);
frame.setLocation(0, 0);
timeout = 0;
timeforEnter = 0;
mapCheck = 1; // map
enterPoint = 0;
// Check Serial Port
//String portName = Serial.list()[0];
String portName = "COM14";
myPort = new Serial(this, portName, 9600); //9600
println(portName);
// Define images
mapImage = loadImage("map2.jpg");
bgImage = loadImage("map.jpg");
svImage = loadImage("streetview.jpg");
svImage1 = loadImage("streetview1.jpg");
svImage2 = loadImage("streetview2.jpg");
svImage3 = loadImage("streetview3.jpg");
imgMask = loadImage ("cutout.png");
imageMode(CENTER);
// image
sizeX = 4792;
sizeY = 786;
maxSizeX = sizeX + 300;
maxSizeY = sizeY + 300;
minSizeX = sizeX - 300;
minSizeY = sizeY - 300;
// mask
bSizeX = 2244;
bSizeY = 768;
maxBSizeX = bSizeX + 200;
maxBSizeY = bSizeY + 200;
minBSizeX = bSizeX - 200;
minBSizeY = bSizeY - 200;
oldFrameX = 0;
oldFrameY = 0;
// Define values
golbalCount = 0;
tempX = 0;
tempY = 0;
// Check & Read Serial Input
if (myPort.available() > 0) {
myString = myPort.readStringUntil(lf);
if (myString != null) {
//print(myString); // Prints String
num = float(myString); // Converts and prints float
// println(num);
golbalCount++;
if (golbalCount % 3 == 1) {
startZ = num;
//println("startZ = " + num);
} else if (golbalCount % 3 == 2) {
startX = num;
//println("startX = " + num);
} else if (golbalCount % 3 == 0) {
startY = num;
//println("startY = " + num);
}
}
}
// Images
//frameX = width / 2;
//frameY = height / 2;
//println("start position: " + startZ + ", " + startY);
// if (mapCheck == 1) {// Background Image ->map
// image(bgImage, width/2, height/2, 4792, 786); // frameX, frameY); //( width * startZ ) / 360
// } else {// StreetView Image
// image(svImage, width/2, height/2, 4792, 786);
// }
// Mask Image
//image(imgMask, width/2, height/2);
}
void draw()
{
if(frameCount < 300) {
background(0);
return;
}
scale(zoom);
sensativity = 2;
// Check & Read Serial Input
if (myPort.available() > 0) {
myString = myPort.readStringUntil(lf);
if (myString != null) {
//print(myString); // Prints String
num = float(myString); // Converts and prints float
// println(num);startY * 180
golbalCount++;
// Check Serial Input
if (golbalCount % 3 == 1) {
// Z Value
valZ5 = valZ4;
valZ4 = valZ3;
valZ3 = valZ2;
valZ2 = valZ1;
valZ1 = num;
valZ = (valZ1 + valZ2 + valZ3 + valZ4 + valZ5) / 5.0;
frameX = -1 * Math.abs((valZ /360) * sizeX);
differenceX = Math.abs(valZ - tempX);
println("frameX:" + valZ);
tempX = valZ;
//println(((valZ * sizeX) / 360));
//println("Z = " + num);
} else if (golbalCount%3 == 2) {
// X Value
valX = num;
//println("X = " + num);
} else if (golbalCount%3 == 0) {
// Y Value
valY = num;
if(valY > -5 ) {
valY = -5;
}
if(valY < -30 ) {
valY = -30;
}
// println("y: " + valY);
frameY = (-(valY * height/2) / 90) + height/2 - 100;
// Limit Y Frame Value between 35 ~ 50;
differenceY = Math.abs(valY - tempY);
//println("DIFFY:"+differenceY);
//println("Y = " + num);
tempY = valY;
}
}
}
//println(val);
noStroke();
background(255);
switch(state)
{
case 0: // Menu
// Loader
fill(176, 190, 197, 50); // grey
ellipse(width / 2, height / 2 + 80, 25, 25);
fill(64, 196, 255, 100); // blue
ellipse(width / 2, height / 2 + 80, timeout/10, timeout/10);
showStartScreen();
timeout++;
// println(timeout);
if(timeout > 250) {
state = 1;
timeout = 0;
}
break;
case 1: // Introduction
// Background Image
float xPosTest = frameX; // ((-1* valZ * sizeX) / 360) % 4792;
// Map
image(mapImage, xPosTest, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(mapImage, xPosTest - 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(mapImage, xPosTest + 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
showIntro();
// Loader
fill(176, 190, 197, 50);
ellipse(width / 2, height / 2 + 120, 25, 25);
fill(64, 196, 255, 100);
ellipse(width / 2, height / 2 + 120, timeout/16, timeout/16);
timeout++;
//println(timeout);
if(timeout > 400) {
state = 2;
timeout = 0;
}
break;
case 2: // Results
// Background Image
if (mapCheck == 1) {
// Background Image
if(enterPoint != 0){
timeforEnter++;
valZ = ((valZ - valZ) + enterPoint);
frameX = -1 * Math.abs((valZ /360) * sizeX);
float xPosMap = frameX; // ((-1* valZ * sizeX) / 360) % 4792;
// Map
image(bgImage, xPosMap, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(bgImage, xPosMap - 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(bgImage, xPosMap + 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
println("TIMEEEEEEEEE:"+timeforEnter);
if(timeforEnter>120){
enterPoint = 0;
timeforEnter = 0;
}
}
else{
float xPosMap = frameX; // ((-1* valZ * sizeX) / 360) % 4792;
// Map
image(bgImage, xPosMap, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(bgImage, xPosMap - 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(bgImage, xPosMap + 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
}
}
else if (mapCheck == 2) { // Street View
// StreetView Image
float xPosStreet = ((valZ * sizeX) / 360) % 4792;
// println(timeout);
// println("X street: " + xPosStreet);
// Street
image(svImage, xPosStreet, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(svImage, xPosStreet - 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(svImage, xPosStreet + 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
if (differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderReturn();
println("kekekekekekeke");
if(timeout > delay){
frameX = enterPoint;
mapCheck =1;
timeout = 0;
}
}
}
else if (mapCheck == 3) { // London
// StreetView Image
float xPosStreet = ((valZ * sizeX) / 360) % 4792;
// println(timeout);
// Street
image(svImage1, xPosStreet, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(svImage1, xPosStreet - 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(svImage1, xPosStreet + 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
if (differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderReturn();
if(timeout > delay){
frameX = enterPoint;
mapCheck =1;
timeout = 0;
}
}
}
else if (mapCheck == 4) { // Night
// StreetView Image
float xPosStreet = ((valZ * sizeX) / 360) % 4792;
// println("X street: " + xPosStreet);
// println(timeout);
// Street
image(svImage2, xPosStreet, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(svImage2, xPosStreet - 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(svImage2, xPosStreet + 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
if (differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderReturn();
if(timeout > delay){
frameX = enterPoint;
println("ENTER:"+enterPoint);
mapCheck = 1;
timeout = 0;
}
}
}
else if (mapCheck == 5) { // Shop
// StreetView Image
float xPosStreet = ((valZ * sizeX) / 360) % 4792;
// println("X street: " + xPosStreet);
// println(timeout);
// Street
image(svImage3, xPosStreet, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(svImage3, xPosStreet - 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
image(svImage3, xPosStreet + 4792, frameY, sizeX, sizeY ); //(valZ * width) / 360 //-(sizeX/2)+width
if (differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderReturn();
if(timeout > delay){
frameX = enterPoint;
mapCheck =1;
timeout = 0;
}
}
}
// Check Points & Change scene
if(mapCheck == 1) {
// Check values
if(valZ > 15 && valZ < 21 && differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderMap();
// println(timeout);
if(timeout > delay2) {
enterPoint = valZ;
mapCheck = 4;
timeout = 0;
}
}
else if(valZ > 49 && valZ < 53 && differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderMap();
// println(timeout);
if(timeout > delay2) {
enterPoint = valZ;
mapCheck = 3;
timeout = 0;
}
}
else if(valZ > 85 && valZ < 89 && differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderMap();
// println(timeout);
if(timeout > delay2) {
enterPoint = valZ;
mapCheck = 4;
timeout = 0;
}
}
else if(valZ > 99 && valZ < 100 && differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderMap();
// println(timeout);
if(timeout > delay2) {
enterPoint = valZ;
mapCheck = 5;
timeout = 0;
}
}
else if(valZ > 150 && valZ < 156 && differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderMap();
// println(timeout);
if(timeout > delay2) {
enterPoint = valZ;
mapCheck = 3;
timeout = 0;
}
}
else if(valZ > 205 && valZ < 209 && differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderMap();
// println(timeout);
if(timeout > delay2) {
enterPoint = valZ;
mapCheck = 3;
timeout = 0;
}
}
else if(valZ > 226 && valZ < 230 && differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderMap();
// println(timeout);
if(timeout > delay2) {
enterPoint = valZ;
mapCheck = 4;
timeout = 0;
}
}
else if(valZ > 257 && valZ < 263 && differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderMap();
// println(timeout);
if(timeout > delay2) {
enterPoint = valZ;
mapCheck = 5;
timeout = 0;
}
}
else if(valZ > 269 && valZ < 275 && differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderMap();
// println(timeout);
if(timeout > delay2) {
enterPoint = valZ;
mapCheck = 4;
timeout = 0;
}
}
else if(valZ > 301 && valZ < 305 && differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderMap();
// println(timeout);
if(timeout > delay2) {
enterPoint = valZ;
mapCheck = 3;
timeout = 0;
}
}
else if(valZ > 338 && valZ < 344 && differenceX < sensativity && differenceY < sensativity){
timeout++;
showLoaderMap();
// println(timeout);
if(timeout > delay2) {
enterPoint = valZ;
mapCheck = 5;
timeout = 0;
}
}
else {
timeout = 0;
}
}
// println("img: "+( ((valZ * sizeX) / 360)));
// Mask Image
image(imgMask, width/2, height/2); // (valZ * width) / 360, height/2); //(valY * height) / 180);
break;
// End of Case
}
}
// Loader
void showLoaderReturn() {
// Loader Street View
fill(176, 190, 197, 50);
ellipse(width / 2, height / 2 + 120, 25, 25);
fill(64, 196, 255, 100);
ellipse(width / 2, height / 2 + 120, timeout/12, timeout/12);
}
// Loader
void showLoaderMap() {
// Loader Map
fill(176, 190, 197, 50);
ellipse(width / 2, height / 2 + 120, 25, 25);
fill(64, 196, 255, 100);
ellipse(width / 2, height / 2 + 120, timeout/4, timeout/4);
}
// Start Screen
void showStartScreen() {
// Text
textAlign(LEFT);
fill(160);
textSize(16);
text("Exercising Memories", width / 2 - 70, height / 2 + 50);
textSize(10);
image(imgMask, width/2, height/2);
}
void showIntro() {
fill(255);
ellipse(width/2, height/2, 400, 400);
// Txt
fill(0);
textAlign(CENTER);
textSize(18);
text("Welcome to", width/2, height / 2 - 50);
textSize(38);
text("Memory Exploring", width/2, height / 2);
textSize(16);
fill(160);
textSize(16);
text("Try to find these memories on the map.", width/2, height / 2 + 70);
image(imgMask, width/2, height/2);
}
// Controls
void keyPressed() {
if (key == CODED) {
if (key == 'a' || keyCode == UP) {
if (sizeX < maxSizeX && sizeY < maxSizeY) {
// sizeX += 5;
// sizeY += 5;
// bSizeX += 5;
// bSizeY += 5;
zoom = 1.5;
}
} else if (key == 'a' || keyCode == DOWN) {
if (sizeX > minSizeX && sizeY > minSizeY) {
// sizeX -= 5;
// sizeY -= 5;
// bSizeX -= 5;
// bSizeY -= 5;
zoom = 0.5;
}
} else if (key == 'a' || keyCode == LEFT) {
mapCheck = 2;
} else if (key == 'a' || keyCode == RIGHT) {
mapCheck = 1;
}
}
}
ShowIntroduction word to welcome you.
There is a small blue circle to countdown enter streetview.
ADXL345 Sensor(input devices) with processing(interface).
Keep five second enter to streetview and keep seven second bake to map view.