Hello Everybody
first of all id' like to mention that I am not very into programming. I am studying social science and I am interested in Processing because i would like to do data visualizations.This is my first little project.
The idea is to create a data-game. This means it should be a game which lets the user interact with data in a funny way but also lets him/her get know the data. In a second step the user schould be free to upload his own data and play with it.
In the game the user has to manipulate a moving graph by choosing data. For example he plays with country data about Child Mortality; if he chooses Sweden his graph probably will move downwards whereas choosing the Kongo will make his graph heading to the top. Manipulating the graph the user is creating a path on which a little circle is moving. The aim of the game is not to hit the obstacles moving around (obstacles not yet included).
I suppose this is hard to understand :) but see it yourself…
The game was initially thought to be an android app or a web-browser game. But the first time i launched it on my cell phone i noticed that it is super slow. On my laptop it's consuming about 20-30% of my CPU (2.4Ghz Macbook) and up too 300MB of memory. As .js in Firefox it is about 40% of CPU and up to 400MB!
http://www.unet.univie.ac.at/~a0406222/prozent/game.html
As Javascript it is not slow (as on the cellphone) but its flickering and hardly reacts (RIGHT, LEFT to switch between options and DOWN to choose one option )
As I said before i don't know much about programming and have know clue what I could do/change to speed it up?
I suppose it is unusual to post a whole project-code and let people search for problems but I just ran out of ideas. So sorry for that!
The data has to be stored in a .txt archive in the following format.
first of all id' like to mention that I am not very into programming. I am studying social science and I am interested in Processing because i would like to do data visualizations.This is my first little project.
The idea is to create a data-game. This means it should be a game which lets the user interact with data in a funny way but also lets him/her get know the data. In a second step the user schould be free to upload his own data and play with it.
In the game the user has to manipulate a moving graph by choosing data. For example he plays with country data about Child Mortality; if he chooses Sweden his graph probably will move downwards whereas choosing the Kongo will make his graph heading to the top. Manipulating the graph the user is creating a path on which a little circle is moving. The aim of the game is not to hit the obstacles moving around (obstacles not yet included).
I suppose this is hard to understand :) but see it yourself…
The game was initially thought to be an android app or a web-browser game. But the first time i launched it on my cell phone i noticed that it is super slow. On my laptop it's consuming about 20-30% of my CPU (2.4Ghz Macbook) and up too 300MB of memory. As .js in Firefox it is about 40% of CPU and up to 400MB!
http://www.unet.univie.ac.at/~a0406222/prozent/game.html
As Javascript it is not slow (as on the cellphone) but its flickering and hardly reacts (RIGHT, LEFT to switch between options and DOWN to choose one option )
As I said before i don't know much about programming and have know clue what I could do/change to speed it up?
I suppose it is unusual to post a whole project-code and let people search for problems but I just ran out of ideas. So sorry for that!
The data has to be stored in a .txt archive in the following format.
- Algeria;50.0
- Austria;30.0
- ...
- float [] yPos;//array for yPositons of selected Data. twice as long as the screensize
boolean choice=false; //true if player has coosen an option
boolean newselection=true; //true if new data has to be presented
float value;//choosen value
int lastPointx;//calculates next data Point on the left side of the Ball xPosition
float lastPointy;//calculates next data Point on the left side of the Ball yPosition
int nextPointx; //calculates next data Point on the right side of the Ball xPosition
float nextPointy;//calculates next data Point on the right side of the Ball yPosition
int endPointx;//rightest Data Point
int zaehler; //counts the total number of data points = Number of yPosition array elements which are not -1
float ballVel=0.09; // stes the velocity the ball moves forward on the x-axis
float xBall=250;//xPosition of the ball
float yBall=height/2; //sets starting point for yBall position
PFont font;
int selecta=1; //number of currently selected option =1,2,3
int optionAsize=12; //fontsize for otpion
int optionBsize=12;
int optionCsize=12;
int optionAindex; //
int optionBindex;
int optionCindex;
String dateiName;
void setup()
{
size(500, 300); //
smooth();
frameRate(60);
// orientation(LANDSCAPE); // for ANDROID: fix Lndscape mode
yPos = new float[2*width]; //array for selected value.
//if nothing is selected its filled width -1. it is twice as long as the screensize
yPos[width]=height/2;//sets start value
yPos[2*width-1]=height/2;//sets a second start value
//dateiName = selectInput("Please choose your data (.txt)."); //option for selecting own data
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// INTERACTION
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Data is selectes with arrows. DOWN chooses a option (for android DPAD)
void keyPressed() {
if (key == CODED) {
if (keyCode == LEFT) {
selecta--;
}
if (keyCode == RIGHT) {
selecta++;
}
if (keyCode ==DOWN) { //for ANDROID: DPAD
choice=true; //boolean true if an option is choosen
newselection=true; //new data has to be presented
}
}
}
void draw()
{
background (255);
stroke(0);
strokeWeight(2);
int hohenabstand=height/30; //distance from top and bottom to percentage axis
int seitenabstand=width/60; //distance from right side to percentage axis
//////////////////////////////////////////////////////////////////////////////
//Load Data and save it as Array
/////////////////////////////////////////////////////////////////////////////
String []landerDaten; //country Data
landerDaten = loadStrings("daten.txt");//or dateiName
String []landerNamen= new String[landerDaten.length]; //array length
float []landerWerte= new float[landerDaten.length];
for (int i=0; i<landerDaten.length; i++) {
String [] list = split(landerDaten[i], ";"); //split data into country-Names (landerNamen) and country-values(landerWerte)
landerNamen[i]=list[0];//fill
float f = float(list[1]);//convert float data into integer
f=height-(f*(height-2*hohenabstand)/100)-hohenabstand; //make data fit into percentage axis
landerWerte[i]=f; //fill DatenArray
}
///////////////////////////////////////////////////////////////////////////////
//SELECTOR
//////////////////////////////////////////////////////////////////////////////
if (selecta>3) { //makes selestion go back to first option after last option
selecta =1;
}
if (selecta<1) {
selecta=3;
}
//////////Change fontsize for selection
if (selecta==1) {
optionAsize=25;
}
else {
optionAsize=12;
}
if (selecta==2) {
optionBsize=25;
}
else {
optionBsize=12;
}
if (selecta==3) {
optionCsize=25;
}
else {
optionCsize=12;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ARRAY
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Move Array to the left = move graph
for (int x=1;x<2*width;x++)
yPos[x-1] = yPos[x];
if (choice) {
if (selecta==1) {
value=landerWerte[optionAindex];//set last array position to country value for selection if Option A is choosen
}
if (selecta==2) {
value=landerWerte[optionBindex];//set last array position to country value for selection if Option B is choosen
}
if (selecta==3) {
value=landerWerte[optionCindex];//set last array position to country value for selection if Option C is choosen
}
}
choice=false;
yPos[2*width-1]=value;//set yPos array to -1 if no choice is made
value=0;//
if (newselection) {//if a selection is made > new random Options
optionAindex=int(random(landerDaten.length));
optionBindex=int(random(landerDaten.length));
optionCindex=int(random(landerDaten.length));
}
newselection=false;
//////////////////////////////////////////////////////////////////////////////
//SELECTOR
//////////////////////////////////////////////////////////////////////////////
float textY=height/10*9;
float textXa=width/6;
float textXb=width/2;
float textXc=width/6*5;
font = createFont("Courier New", 25, false);
zaehler=0;
//define Strings
String optionA = landerNamen[optionAindex];
String optionB = landerNamen[optionBindex];
String optionC = landerNamen[optionCindex];
////////////Font
fill(0);
font = createFont("Courier New", 25, false);
textAlign(CENTER);
/////////////-////////
textFont(font, optionAsize);
text(optionA, textXa, textY);
textFont(font, optionBsize);
text(optionB, textXb, textY);
textFont(font, optionCsize);
text(optionC, textXc, textY);
noFill();
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Create Percentage Axis
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
strokeWeight(1);
line(width-2, hohenabstand, width-2, height-hohenabstand);//
//seitenlinien
line(width-seitenabstand, hohenabstand, width-2, hohenabstand);
line(width-seitenabstand, height-hohenabstand, width-2, height-hohenabstand);
line(width-width/80, height/2, width-2, height/2);
textFont(font, 12);
textAlign(RIGHT,TOP);
text("100%", width-seitenabstand, hohenabstand);
textAlign(RIGHT,CENTER);
text("50%", width-width/80, height/2);
textAlign(RIGHT,BASELINE);
text("0%", width-seitenabstand, height-hohenabstand);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Create Graph
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
strokeWeight(2);
//show array
beginShape();
for (int x =0; x<2*width; x++)
if (yPos[x]>0) {
vertex(x-width, yPos[x]);
zaehler++;
}
endShape();
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Draw Ball
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////
//calculate Ball xPosition
////////////////////
for (int e =2*width-1; e>0; e--)
if (yPos[e]>0) {
endPointx=e-width;
break;
}
if (xBall>0 && xBall <endPointx) {
xBall=xBall+ballVel;
}
else
xBall=endPointx;
///////////////////////
//find Ball yPosition
//////////////////////
int intxBall= int(xBall); //convert xBall in integer
//Find Nextpoint
for (int i =intxBall+width; i<2*width; i++)
if (yPos[i]>0) {
nextPointx=i-width;
nextPointy=yPos[i];
break;
}
//Find LastPoint
for (int j =intxBall+width; j>0; j--)
if (yPos[j]>0) {
lastPointx=j-width;
lastPointy=yPos[j];
break;
}
///////////////////////////////////////////////////////////////////////////////////////
if (yPos[intxBall+width]>0) {//If ball passes corner
yBall=yPos[intxBall+width];
}
else {
//yBall (Intercept theorem)
yBall=lastPointy+(xBall-lastPointx)*(nextPointy-lastPointy)/(nextPointx-lastPointx);
}
////////////////////////////////////////////////////////////////////////////////////
fill(255);
ellipse(xBall, yBall, 10, 10);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//line(xBall, 0, xBall, height);
//Kringel auf Eckpunkten vor und nach xBall
//ellipse(nextPointx, nextPointy, 5, 5);
//ellipse(lastPointx, lastPointy, 5, 5);
//println("OptionAIndex: " + optionAindex);
//println(landerNamen[3]);
println("Eckpunkte: " + zaehler);
println("LastPoint: " + lastPointy + " NextPoint: " + nextPointy);
println("Ball: " + xBall + " " +yBall);
println("Endpunkt: "+ endPointx);
}
Could it be the array which consumes
so much memory? Is there an other way to do this without an array of this length
? i tried to store NULL if no choice is made but it seems this isnt posible?
if someone read all this thank you very much for your patience!! :)
Sorry for my english...
bye and thanks for helping out
steph
if someone read all this thank you very much for your patience!! :)
Sorry for my english...
bye and thanks for helping out
steph
1