mauropm/README.txt

## README.txt
README
(c) 2012 Mauro Parra-Miranda

This is an example of what you can do with processingjs+phonegap+windows phone. I hope you enjoy.

INSTALL INSTRUCTIONS

- Get the Windows Phone Development tools, no developer account needed to see this in the emulator: http://msdn.microsoft.com/en-us/library/ff402535(v=vs.92).aspx

- Get the latest phonegap (I'm using 1.7 now), from: http://phonegap.com/download

- Get the latest processingjs and the examples from: http://processingjs.org/download/

- Once you install the WP Dev Tools, please unzip the Phonegap install zip and find the phonegap/lib/windows/CordovaStarter.zip and copy it to your Visual Studio Template directory (check Microsoft documentation about where is your Template dir, your mileage may vary) -or read this - http://msdn.microsoft.com/en-us/library/ms185306.aspx

- After you get the template in, create a new project, based on Cordova template.

- Once you get into your new project, you will see that there is a www directory. Open the processingjs zip, copy processing.js and style.css from the processingjs directory.

- Copy the index.html file from here to your project.

- The Solution Explorer should show you a www directory with the following files:

cordoba-1.7.0.js
index.html
master.css
processing.js
style.css

- After this, you just go and select "Debug" in the main menu, and click on "Start debugging". You should see your processing app running on top of phonegap, on top of windows phone :D

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    <title>Cordova WP7</title>

    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>


    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>

    <script type="text/javascript">


      document.addEventListener("deviceready",onDeviceReady,false);

      // once the device ready event fires, you can safely do your thing! -jm
      function onDeviceReady()
      {
      document.getElementById("welcomeMsg").innerHTML += "Cordova is ready! version=" + window.device.cordova;
      console.log("onDeviceReady. You should see this message in Visual Studio's output window.");

      }

    </script>


    <script src="processing.js"></script>
<link rel="stylesheet" href="style.css"/></head>
<body>

<script type="application/processing">
int xspacing = 8;   // How far apart should each horizontal location be spaced
int w;              // Width of entire wave
int maxwaves = 4;   // total # of waves to add together

float theta = 0.0f;
float[] amplitude = new float[maxwaves];   // Height of wave
float[] dx = new float[maxwaves];          // Value for incrementing X, to be calculated as a function of period and xspacing
float[] yvalues;                           // Using an array to store height values for the wave (not entirely necessary)

void setup() {
  size(200,200);
  frameRate(30);
  colorMode(RGB,255,255,255,100);
  smooth();
  w = width+16;

  for (int i = 0; i < maxwaves; i++) {
    amplitude[i] = random(10,30);
    float period = random(100,300); // How many pixels before the wave repeats
    dx[i] = (TWO_PI / period) * xspacing;
  }

  yvalues = new float[w/xspacing];
}

void draw() {
  background(0);
  calcWave();
  renderWave();
}

void calcWave() {
  // Increment theta (try different values for 'angular velocity' here
  theta += 0.02;

  // Set all height values to zero
  for (int i = 0; i < yvalues.length; i++) {
    yvalues[i] = 0.0f;
  }

  // Accumulate wave height values
  for (int j = 0; j < maxwaves; j++) {
    float x = theta;
    for (int i = 0; i < yvalues.length; i++) {
      // Every other wave is cosine instead of sine
      if (j % 2 == 0)  yvalues[i] += sin(x)*amplitude[j];
      else yvalues[i] += cos(x)*amplitude[j];
      x+=dx[j];
    }
  }
}

void renderWave() {
  // A simple way to draw the wave with an ellipse at each location
  noStroke();
  fill(255,50);
  ellipseMode(CENTER);
  for (int x = 0; x < yvalues.length; x++) {
    ellipse(x*xspacing,width/2+yvalues[x],16,16);
  }
}
</script><canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"></div>

</body>
</html>
	README
	(c) 2012 Mauro Parra-Miranda

	This is an example of what you can do with processingjs+phonegap+windows phone. I hope you enjoy.

	INSTALL INSTRUCTIONS

	- Get the Windows Phone Development tools, no developer account needed to see this in the emulator: http://msdn.microsoft.com/en-us/library/ff402535(v=vs.92).aspx

	- Get the latest phonegap (I'm using 1.7 now), from: http://phonegap.com/download

	- Get the latest processingjs and the examples from: http://processingjs.org/download/

	- Once you install the WP Dev Tools, please unzip the Phonegap install zip and find the phonegap/lib/windows/CordovaStarter.zip and copy it to your Visual Studio Template directory (check Microsoft documentation about where is your Template dir, your mileage may vary) -or read this - http://msdn.microsoft.com/en-us/library/ms185306.aspx

	- After you get the template in, create a new project, based on Cordova template.

	- Once you get into your new project, you will see that there is a www directory. Open the processingjs zip, copy processing.js and style.css from the processingjs directory.

	- Copy the index.html file from here to your project.

	- The Solution Explorer should show you a www directory with the following files:

	cordoba-1.7.0.js
	index.html
	master.css
	processing.js
	style.css

	- After this, you just go and select "Debug" in the main menu, and click on "Start debugging". You should see your processing app running on top of phonegap, on top of windows phone :D
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

	<title>Cordova WP7</title>

	<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>


	<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>

	<script type="text/javascript">


	document.addEventListener("deviceready",onDeviceReady,false);

	// once the device ready event fires, you can safely do your thing! -jm
	function onDeviceReady()
	{
	document.getElementById("welcomeMsg").innerHTML += "Cordova is ready! version=" + window.device.cordova;
	console.log("onDeviceReady. You should see this message in Visual Studio's output window.");

	}

	</script>



	<script src="processing.js"></script>
	<link rel="stylesheet" href="style.css"/></head>
	<body>

	<script type="application/processing">
	int xspacing = 8; // How far apart should each horizontal location be spaced
	int w; // Width of entire wave
	int maxwaves = 4; // total # of waves to add together

	float theta = 0.0f;
	float[] amplitude = new float[maxwaves]; // Height of wave
	float[] dx = new float[maxwaves]; // Value for incrementing X, to be calculated as a function of period and xspacing
	float[] yvalues; // Using an array to store height values for the wave (not entirely necessary)

	void setup() {
	size(200,200);
	frameRate(30);
	colorMode(RGB,255,255,255,100);
	smooth();
	w = width+16;

	for (int i = 0; i < maxwaves; i++) {
	amplitude[i] = random(10,30);
	float period = random(100,300); // How many pixels before the wave repeats
	dx[i] = (TWO_PI / period) * xspacing;
	}

	yvalues = new float[w/xspacing];
	}

	void draw() {
	background(0);
	calcWave();
	renderWave();
	}

	void calcWave() {
	// Increment theta (try different values for 'angular velocity' here
	theta += 0.02;

	// Set all height values to zero
	for (int i = 0; i < yvalues.length; i++) {
	yvalues[i] = 0.0f;
	}

	// Accumulate wave height values
	for (int j = 0; j < maxwaves; j++) {
	float x = theta;
	for (int i = 0; i < yvalues.length; i++) {
	// Every other wave is cosine instead of sine
	if (j % 2 == 0) yvalues[i] += sin(x)*amplitude[j];
	else yvalues[i] += cos(x)*amplitude[j];
	x+=dx[j];
	}
	}
	}

	void renderWave() {
	// A simple way to draw the wave with an ellipse at each location
	noStroke();
	fill(255,50);
	ellipseMode(CENTER);
	for (int x = 0; x < yvalues.length; x++) {
	ellipse(x*xspacing,width/2+yvalues[x],16,16);
	}
	}
	</script><canvas width="200" height="200"></canvas></p>
	<div style="height:0px;width:0px;overflow:hidden;"></div>

	</body>
	</html>