Tutorial #59: Implement Accelerometer using Processing for Android

Hey everyone!

Processing is slowly becoming a popular platform for creating Android applications. Although still in beta, it can be used to carry out tasks that we would normally do using an Android device.

In this tutorial, we will learn how to implement an accelerometer using Processing for Android.

Pre-requisites: Processing for Windows (64 bit), Android SDK

Launch the Processing application (.exe) and create a new Sketch named test_accelerometer_android.

Step 1: Installing Android mode

In case you don’t have the Android mode installed, you can do so by clicking on the Add mode option under Mode Manager.

installing_android_mode

Step 2: Write Processing Android

Switch to Android mode and include the following code in your Sketch!


import android.content.Context;                
import android.hardware.Sensor;
import android.hardware.SensorEvent;
import android.hardware.SensorEventListener;
import android.hardware.SensorManager;

SensorManager sensorManager;       
SensorListener sensorListener;    
Sensor accelerometer;              
float[] accelData;                 

// basic setup
void setup() 
{
  orientation(PORTRAIT);            
  smooth();
  noStroke();
};

void draw() 
{
  background(0);
  
  //get sensor data
  if (accelData != null) {

    fill(255);
    textSize(70);
    textAlign(CENTER, CENTER);
    text("x: " + nf(accelData[0], 1, 2) + "\n" + 
         "y: " + nf(accelData[1], 1, 2) + "\n" + 
         "z: " + nf(accelData[2], 1, 2), 0, 0, width, height);

  }
  else
  {
    text("[ no accelerometer data ]", width/2, height/2);
  }
};

void onResume() 
{
  super.onResume();
  sensorManager = (SensorManager)getSystemService(Context.SENSOR_SERVICE);
  sensorListener = new SensorListener();
  accelerometer = sensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);
  sensorManager.registerListener(sensorListener, accelerometer, SensorManager.SENSOR_DELAY_GAME);  
};

void onPause() 
{
  sensorManager.unregisterListener(sensorListener);
  super.onPause();
};


class SensorListener implements SensorEventListener 
{
  void onSensorChanged(SensorEvent event) 
  {
    if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) 
    {
      accelData = event.values;
    }
  }
  void onAccuracyChanged(Sensor sensor, int accuracy) 
  {
       //todo 
  }
}

output

Run the Sketch on an Android device by connecting the phone via USB cable to your machine. You should see the accelerometer data being displayed. Alternatively, developers can also use the Ketai library for implementing the same functionality.

Reference: Processing for Android

Source code for this tutorial can be found over here.

Processing on Android!

Hello everyone!

The Processing language has now become a popular development tool for Android applications. It’s latest version 2.0+ allows developers to create an Android application from scratch using the newly added Android mode.

Processing supports many libraries including video, network, PDF export etc. Just as Android, Processing is also open source and can be downloaded for free. Through this post, I will demonstrate how to create an Android application using Processing!

Pre-requisites: Windows 7 OS (64 bit), Processing (version 2.0 or greater), Java latest version, Android SDK

Note: You need to download and install the latest version of Java and Android SDK on your machine before proceeding.

Step 1: Installing Android mode

Launch the Processing application. At the right hand side, you should see the default Java mode selected in the drop down. Select Add mode option from the drop down and install the Android mode. Now, restart the Processing application and switch to Android mode.

Installing Android mode for Processing

Step 2: Create new Sketch

Create a new Sketch named Sketch1 and add the following code!

float x;

void setup() 
{
  size(480,800);
  noStroke();
  ellipseMode(CENTER);    
}

void draw()
{
  background(255,204,0);
  x= x+ 0.7;
  
  translate(x,50);
  fill(255);
  ellipse(width/2, height/2, 150, 150);
  
  translate(x,80);
  fill(255);
  ellipse(80,80,150,150);
}

Save the Sketch. Connect your Android device using a USB cable to your machine. Make sure you have the USB debugging turned on. You can do this from the Settings–>Applications–>Development menu on your device.

Finally, run the Sketch on the device by clicking the Run on device button in the tool bar. You should see the following screen on your Android device!

Output

Source: Processing Android Tutorial

Tutorial #8: Creating an animation using Processing

Hello everyone,

In one of my earlier posts I had talked about Processing and the features it offers to developers using two sample programs. At the end I had promised to bring out certain more features. This post of mine tells you how to create your own animation using Processing!

For creating an animation we would require a model. I will be using custom wavefront object (.obj) models. These models can be created using any of the popular 3D modelling software out there, say Blender or 3ds Max. For this tutorial I will be using a Superman model made by the developer of AndAR which happens to be a popular augmented reality project for Android.

The Superman model can be downloaded from here. The material file (.mtl) for the same can be downloaded from over here.

Let’s proceed with the tutorial now!

First start the Processing application. By default a Sketch will be created and you can begin writing your code in the Editor. Make sure you have Java mode selected (seen at the right hand side of the toolbar).

Step 1: Add the model, background image and a float variable

PShape superman;
PImage bg;
float ry;

Step 2: Setup your screen


public void setup() 
{
  size(800, 600, P3D);
  frameRate(30);
  bg = loadImage("background.jpg");
  superman = loadShape("superman3.obj");
 
}

Note: The files background.jpg ; .obj file and the .mtl file of your model should be present inside the data folder of your project.

Step 3: Once the screen is setup, add the draw method

public void draw() 
{
  
   background(bg);  //add the background image
   lights();        
   translate(width/2, height/2, -200);  //keep the model at the center of the screen or window
   rotateZ(PI);
   rotateY(ry);
   shape(superman);  //add the model
   ry+=0.2; 
  
   if(mousePressed) 
   {
    scale(2.0);    //increase size of model
    ry=0;
    translate(mouseX,mouseY, -200);
    shape(superman);
   } 
    
}

So that doest it! Here is the entire code:

PShape superman;
PImage bg;
float ry;
  
public void setup() 
{
  size(800, 600, P3D);
  frameRate(30);
  bg = loadImage("background.jpg");
  superman = loadShape("superman3.obj");
 
}

public void draw() 
{
  
   background(bg); 
   lights();  
   translate(width/2, height/2, -200);
   rotateZ(PI);
   rotateY(ry);
   shape(superman);
   ry+=0.2;
   
   if(mousePressed) 
   {
    scale(2.0);
    ry=0;
    translate(mouseX,mouseY, -200);
    shape(superman);
   } 
    
}

Run the application and you should see a rotating Superman model:

Screenshot

Now try pressing and moving your mouse. You should see an enlarged version of the superman model inside the screen. Hence, Processing is a tool that allows you create such animations and even more complex ones. Use your creativity and then there is no stopping you! πŸ™‚

Tutorial #4: The world of Processing

Hello everyone, today I would like to talk about a cool project called ‘Processing’.

Processing is an open source project mainly used for developing 2D/3D animations and interactions. It has built in OpenGL integration for accelerated 3D and provides a developing environment that makes programming a lot easier! πŸ™‚

I have been using Processing for quite some time now. Through this tutorial I will show some of the features that Processing has to offer to all the developers using two sample programs.

Requirements: First of all, you need to download the appropriate version of Processing for your computer fromΒ here.

Extract the .zip file and you are ready to start!

Program 1: Change Image on pressing a key on the keyboard

Open the Processing application and you should see a window as follows:

If you notice the right hand side of the toolbar, you will see the “Java” mode being selected. You can switch modes and even choose either JavaScript mode or Android mode. I have used the default Java mode.

Now start writing your code for program 1 in the editor area.

PImage img;
PImage img2;

void setup()
{
//size of the output window
size(200, 200);
// Images must be in the "data" directory to load correctly
img = loadImage("tree1.png");
img2= loadImage("plant1.jpg");
}

void draw()
{
 //if you press a key
if (keyPressed == true)
   {
image(img, 50, 50,100,100);
   }
  else
   {
image(img2, 50, 50,100,100);
   }
}

Now, by clicking on the Run button in the toolbar, start the application and you should see a window as follows:

Output

Note: By default the data directory is created inside the documents folder. You can find it at :

path to your documents folder\Processing\processing_java\data\

If you get an error saying unable to load tree1.png then try adding the file. Click on Sketch–> Add file and select your image file.

Program 2: Writing content into a file using PrintWriter


PrintWriter output;
int count=0;

void setup() 
{
  // Create a new file in the sketch directory
  output = createWriter("sample.txt"); 
}

void draw()
{
  
  output.println("count is:" +(count++)); //Write counter value to file
}

void keyPressed() 
{
  output.flush(); // Writes the remaining data to the file
  output.close(); // close the file
  exit(); // end program
}

On running the program, you will find that a new textfile is created inside your sketch folder. To view the file go to Sketch–>Show sketch folder.

So guys, these were just two sample programs for those of you who want to start using Processing. I will be posting a few more examples that involves 2D and 3D animations in my next tutorial on Processing! πŸ™‚