I wish i'd had the explanation I'll give about classes on Processing when I was learning for the first time...
I reunite the basic information you need to understand classes below:
A class is the basis of the object-oriented programming: "A class is a blueprint or prototype from which objects are created." And, for instance, an object is "a software bundle of related state and behavior. Software
objects are often used to model the real-world objects that you find in
everyday life". (http://docs.oracle.com/javase/tutorial/java/concepts/index.html).
"A class is a composite of fields (data) and methods (functions that are
a part of the class) which may be instantiated as objects. The first
letter of a class name is usually uppercase to separate it from other
kinds of variables". (http://processing.org/reference/class.html)
Now, I'll show how to create a Class, and an array of objects.
cuBEEc
A cubic bee
Fist of all, you need to create the class and the constructor:
class Bee { //The first letter must be UperCase
//declare the variables we'll need, or the properties
int angle; //angle that rotates the wings
int factor=30; //a crazy variable that I used to control the frequency of the wings
float posX, posY,posZ; //variables for the position of the bee
Bee () { //constructor
}
}
And then, create functions and methods
class Bee {
int angle;
int factor=30;
float posX, posY,posZ;
Bee () {
}
void update(){ //function that updates the rotation of the wings
angle+=factor;
if(angle>80){
factor=factor*-1;
}
if(angle<0){
factor=factor*-1;
}
}
void render(float x, float y,float z){ //function that draws the bee, receiving the parameters like position in x,y, and z axis;
posX=x;
posY=y;
posZ=z;
//rectangles and triangles that creates the bee
pushMatrix();
noStroke();
translate(posX,posY+30,posZ);
pushMatrix();
translate(15,0);
pushMatrix();
rotate(radians(angle));
fill(80,180);
rect(0,0,-30,8);
popMatrix();
pushMatrix();
rotate(radians((angle)*-1));
rect(0,0,30,8);
popMatrix();
popMatrix();
fill(220,220,0);
quad(30,0,35,5,35,25,30,30);
fill(255,255,0);
rect(0,0,30,30);
fill(0);
triangle(35,10,40,15,35,20);
triangle(8,30,13,30,13,35);
triangle(17,30,22,30,17,35);
fill(0);
rect(25,0,5,30);
rect(0,0,5,30);
popMatrix();
}
}
Now, you have to declare and initialize the class:
int numBees=1;//number of bees
Bee [] b = new Bee[numBees]; //an array of bees
void setup() {
size(1200,700,OPENGL);//size of the screen, using OpenGl rendering for Z axis translation
frameRate(60);//frame rate of 60 frames per second
//using a "for" function to initialize all the bees
for (int i=0;i<numBees;i++){
b[i]= new Bee ();
}
void draw(){
background(255);//white background
//a "for" function to call the functions of the class for all the bees
for (int i=0;i<numBees;i++){
b[i].update();//update wings rotation
b[i].render(width/2,height/2,300); //draw the bees at the given positions (x,y,z)
}
}
I used this class to create a flocking of animated bees. But if you want a simpler way to move the bees randomly like insects, you can use perlin noise...
//glitch camera still generator
//click to save image
import processing.video.*;
Capture cam;
int N=0;
void setup(){
size (851,315);
background(255);
colorMode(HSB);
// If no device is specified, will just use the default.
cam = new Capture(this, 851, 315);
// To use another device (i.e. if the default device causes an error),
// list all available capture devices to the console to find your camera.
//String[] devices = Capture.list();
//println(devices);
// Change devices[0] to the proper index for your camera.
//cam = new Capture(this, width, height, devices[0]);
// Opens the settings page for this capture device.
//camera.settings();
}
void draw(){
Set();
if (cam.available() == true) {
if(frameCount==2||frameCount%150==0){
cam.read();
image(cam, 0, 0);
// The following does the same, and is faster when just drawing the image
// without any additional resizing, transformations, or tint.
set(width, height, cam);
for (int i=0; i<100;i++){
noStroke();
fill(random(0,360),300,300,100);
rect ((random (0, width)),(random (0, height)),(random (0,50)),(random(0,50)));
}
}
}
}
int r(int a){
return int(random(a));
}
void mouseReleased (){
N++;
save("glitchCamera"+ (N)+".tif");
}
void Set() {
for (int i=0; i<10; i++) {
int x = r(width);
int y = r(height);
set(x+r(50)-1,y+r(3)-1,get(x,y,r(99),r(30)));
}
}
Here I'll show how to convert midi notes to frequency, and how to show that frequency with a sine wave
//click on the note numbers to get the respective frequency
float hertz;
int noteNumber;//variable for the midi note
int xspacing = 5; // How far apart should each horizontal location be spaced
int w; // Width of entire wave
int theta = 0; // Start angle at 0
float ampl; // Height of wave
float period = 100.0; // How many pixels before the wave repeats
float dx; // Value for incrementing X, a function of period and xspacing
float[] yvalues; // Using an array to store height values for the wave
void setup() {
size(640, 360);
w = width+16;
dx = (TWO_PI / period) * xspacing;
yvalues = new float[w/xspacing];
}
void draw() {
background(0,0,255);
float startPointX = width/2; //define the X position of the start point in the center of the screen;
float startPointY = height/2; //define the Y position of the start point in the center of the screen;
float endPointX=mouseX; //define the X position of the end point that will follow the mouse;
float endPointY=mouseY; //define the Y position of the end point that will follow the mouse;
float deltaX=mouseX-width/2; //create a variable with the delta of the x component of the ending - start point
float deltaY=mouseY-height/2; //create a variable with the delta of the y component of the ending - start point
float angleInRadians=atan2(deltaY,deltaX); //get the angle in radians between them with atan2()
PVector[]points=new PVector[100]; //create an array of vectors that will store the flat positions of points that will create the graph with the number of elements equal to the size of the of the arraylist
PVector[]amplitude = new PVector[100]; //create an array of vectors that will store the amplitude of the mapped mouse with the number of elements equal to the size of the of the arraylist
//initalize each vector with x=0 and y=0 values;
for(int a=0; a<100-1; a++){
points[a] = new PVector(0,0,0);
amplitude[a] = new PVector(0,0,0);
}
//here the magic begins
//we will create a line made of vertex, and each vertex will receive the values of the vectors
textSize(28);
fill(255);
text("60",30,40);
text("69",width-60,40);
text("100",30,height-40);
text("127",width-60,height-40);
text("hertz "+hertz,width-300,height/2+100);
if(mousePressed){
if((mouseX>10&&mouseX<50) && (mouseY>10&&mouseY<60)){
noteNumber=60;
}
if((mouseX>width-80&&mouseX<width) && (mouseY>10&&mouseY<60)){
noteNumber=69;
}
if((mouseX>10&&mouseX<50) && (mouseY>height-70&&mouseY<height)){
noteNumber=100;
}
if((mouseX>width-80&&mouseX<width) && (mouseY>height-70&&mouseY<height)){
noteNumber=127;
}
}
println("noteNumber "+ noteNumber);
//convert midi to frequency
hertz = ( 440*pow(2,((noteNumber-69)/12.0))) ;
println("hertz "+ hertz);
ampl=20;//aplitude of 20px
// For every x value, calculate a y value with sine function
for (int i = 0; i < 100-1; i++) {
theta += int(hertz);
theta+=int(dx);
if(theta%1000==0){//reset theta
theta=0;
}
yvalues[i] = sin(theta)*ampl;
println(theta);
}
beginShape();
noFill(); //no fill
stroke(255); // white stroke
strokeWeight(2); //2 px stroke
for(int i = 0; i<100-1;i++){
float X=lerp(startPointX,endPointX,i/float(99)); // create a linear interpolation between the start and the end point of the X component, and the amount of interpolation will cover the entire interval;
float Y=lerp(startPointY,endPointY,i/float(99)); // create a linear interpolation between the start and the end point of the Y component, and the amount of interpolation will cover the entire interval;
amplitude[i].set(0,(yvalues[i]),0); //set each vertex of the aray with the amplitude of the graph, acquiring the data of the buffer
rotate2D(amplitude[i],angleInRadians); //rotate the vector of amplitude acordingly to the angle between the start and end points
points[i].set(X,Y,0); //set each vertex of the array with the correspondent value of the interpolation, creating a flat line
points[i].add(amplitude[i]); //add the amplitude vector to the flat line of vectors, creating a 2D graph
vertex (points[i].x,points[i].y); //draw each vertex with the values (coordinates) of the vertex
}
endShape();
//draw the ellipses with the positions of the startpoint and endpoint
float diam=40;
fill(255);
ellipse(startPointX,startPointY,diam,diam);
ellipse(endPointX,endPointY,diam,diam);
}
//A function that rotates the vector
void rotate2D(PVector v, float angle) {
// What's the magnitude?
float m = v.mag();
// What's the angle?
float a = v.heading2D();
// Change the angle
a += angle;
// Polar to cartesian for the new xy components
v.x = m * cos(a);
v.y = m * sin(a);
}
I'll show how to use the method of the previous tutorial to draw dynamic waveforms, displaying the sound of the microphone input between two points: the center of the screen and the mouse.
Reactable look-alike =)
First, let's import the minim library
import ddf.minim.*; //import minim
Minim minim;//declare minim
AudioInput in; //declare an input
int bufferSize = 1280; //define the buffer size
int newBufferSize = bufferSize; //declare and initialize the buffer size
void setup(){
size(700,700); // size of the screen
minim = new Minim(this); //initialize minim
in = minim.getLineIn(Minim.MONO, bufferSize);// get a line in from Minim, default bit depth is 16
}
void draw(){
}
And... change variables
The amplitude of the graph will be the spectrum of the input audio wave. We just have to change the values of the amplitude vector for the values of the buffer, which we get with a "for" function that increment till the buffer size -1, and replace the Y component of the vector with (in.left.get()) .
import ddf.minim.*; //import minim
Minim minim;//declare minim
AudioInput in; //declare an input
int bufferSize = 1280; //define the buffer size
int newBufferSize = bufferSize; //declare and initialize the buffer size
void setup(){
size(700,700,P3D); // size of the screen
minim = new Minim(this); //initialize minim
in = minim.getLineIn(Minim.MONO, bufferSize);// get a line in from Minim, default bit depth is 16
// get a line out from Minim, default sample rate is 44100, default bit depth is 16
}
void draw(){
background(0,0,255);
float startPointX = width/2; //define the X position of the start point in the center of the screen;
float startPointY = height/2; //define the Y position of the start point in the center of the screen;
float endPointX=mouseX; //define the X position of the end point that will follow the mouse;
float endPointY=mouseY; //define the Y position of the end point that will follow the mouse;
float deltaX=mouseX-width/2; //create a variable with the delta of the x component of the ending - start point
float deltaY=mouseY-height/2; //create a variable with the delta of the y component of the ending - start point
float angleInRadians=atan2(deltaY,deltaX); //get the angle in radians between them with atan2()
PVector[]points=new PVector[1280]; //create an array of vectors that will store the flat positions of points that will create the graph with the number of elements equal to the size of the of the arraylist
PVector[]amplitude = new PVector[1280]; //create an array of vectors that will store the amplitude of the mapped mouse with the number of elements equal to the size of the of the arraylist
//initalize each vector with x=0 and y=0 values;
for(int a=0; a<1280-1; a++){
points[a] = new PVector(0,0,0);
amplitude[a] = new PVector(0,0,0);
}
//here the magic begins
//we will create a line made of vertex, and each vertex will receive the values of the vectors
beginShape();
noFill(); //no fill
stroke(255); // black stroke
strokeWeight(3); //5 px stroke
for(int i = 0; i<1280-1;i++){
float X=lerp(startPointX,endPointX,i/float(1280-1)); // create a linear interpolation between the start and the end point of the X component, and the amount of interpolation will cover the entire interval;
float Y=lerp(startPointY,endPointY,i/float(1280-1)); // create a linear interpolation between the start and the end point of the Y component, and the amount of interpolation will cover the entire interval;
amplitude[i].set(0,(in.left.get(i)*200),0); //set each vertex of the aray with the amplitude of the graph, acquiring the data of the buffer
rotate2D(amplitude[i],angleInRadians); //rotate the vector of amplitude acordingly to the angle between the start and end points
points[i].set(X,Y,0); //set each vertex of the array with the correspondent value of the interpolation, creating a flat line
points[i].add(amplitude[i]); //add the amplitude vector to the flat line of vectors, creating a 2D graph
vertex (points[i].x,points[i].y); //draw each vertex with the values (coordinates) of the vertex
}
endShape();
//draw the ellipses with the positions of the startpoint and endpoint
float diam=40;
fill(255);
ellipse(startPointX,startPointY,diam,diam);
ellipse(endPointX,endPointY,diam,diam);
}
//A function that rotates the vector
void rotate2D(PVector v, float angle) {
// What's the magnitude?
float m = v.mag();
// What's the angle?
float a = v.heading2D();
// Change the angle
a += angle;
// Polar to cartesian for the new xy components
v.x = m * cos(a);
v.y = m * sin(a);
}
I figured out a simple way to manage graphs in Processing using basically ArrayList, PVector, lerp(); and map(). This method is pretty handy and gives more control to generate graphs.
In this "tutorial" I will show how to create a real time graph that analyses the movement of the mouse, displaying the graph between two defined points (beginning in the center of the screen and following the mouse).
This method can be used to render waveforms following two defined points, or to draw mapped graphs wherever you want to put it in the space of the screen.
Look at the waveforms in the Reactable
I didn't have luck searching for tutorials in order to create and display "controlled" graphs, so, I created a very unique way to solve this problem.
ArrayList.
ArrayList is more flexible than simple arrays to manage data because it's resizable, and the limit of elements is defined by the available memory of the system. If you have to store and analyse an unknown number of elements (Objects, Integers, Floats, Strings, etc), its best to use arraylists. When an element is added, the size of the array increases automatically. It's good to analyse realtime data.
PVector
PVector is handy because it's possible to think each component of the vector independently. For graphs, you can think each axis of data at time. I used it to rotate real time graphs, like waveforms.
lerp();
Lerp stands for "linear interpolation", and lerp() is a function that make the interpolation between two points. That was the function I used to put de graph wherever I want ( vertical, diagonal, horizontal, backwards). You just specifies where is the beginning point and the end point, and the amount of interpolation in the range of 0 and 1 (0.1 is near to the first point, 0.5 is in the middle and 0.9 is near to the end point). With a "for" function, you achieve an interpolation between any coordinates.
map();
Map() is a function that remaps a number from one range to another. I used this to modify the range of the data in order to resize the graph.
Now, let's put everything together.
Let's start capturing the data.
ArrayList <Float> variation = new ArrayList<Float>(); //Create an ArrayList of floats
void setup(){
size(400,400); //set the size as 400x400 px
}
void draw (){
background(200); //set gray background
float mapMouseXFromCenter = map(mouseX,0,width,-200,200); //create a variable that remaps the X axis of mouse from the range from 0 to width to the range from -200 to 200: when the mouse is in the 0 position (the left border), the value of the variable is -200, and when the mouse is in the oposite border (width, or 400), the variable is equal to 200
variation.add (mapMouseXFromCenter); //store the data of the variable (mapped mouse) related to each frame in the arraylist
}
Now, let's display the data
ArrayList <Float> variation = new ArrayList<Float>();
void setup(){
size(400,400);
}
void draw (){
background(200);
float mapMouseXFromCenter=map(mouseX,0,width,-200,200);
variation.add (mapMouseXFromCenter);
float startPointX = width/2; //define the X position of the start point in the center of the screen;
float startPointY = height/2; //define the Y position of the start point in the center of the screen;
float endPointX=mouseX; //define the X position of the end point that will follow the mouse;
float endPointY=mouseY; //define the Y position of the end point that will follow the mouse;
PVector[]points=new PVector[variation.size()]; //create an array of vectors that will store the flat positions of points that will create the graph with the number of elements equal to the size of the of the arraylist
PVector[]amplitude = new PVector[variation.size()]; //create an array of vectors that will store the amplitude of the mapped mouse with the number of elements equal to the size of the of the arraylist
//initalize every vectors with x=0 and y=0 values;
for(int a=0; a<variation.size()-1; a++){
points[a] = new PVector(0,0);
amplitude[a] = new PVector(0,0);
}
//here the magic begins
//we will create a line made of vertex, and each vertex will receive the values of the vectors
beginShape();
noFill(); //no fill
stroke(0); // black stroke
strokeWeight(5); //5 px stroke
for(int i = 0; i<variation.size()-1;i++){
float X=lerp(startPointX,endPointX,i/float(variation.size()-1)); // create a linear interpolation between the start and the end point of the X component, and the amount of interpolation will cover the entire interval;
float Y=lerp(startPointY,endPointY,i/float(variation.size()-1)); // create a linear interpolation between the start and the end point of the Y component, and the amount of interpolation will cover the entire interval;
points[i].set(X,Y,0); //set each vertex of the array with the correspondent value of the interpolation, creating a flat line
amplitude[i].set(0,variation.get(i),0); //set each vertex of the aray with the amplitude of the graph, acquiring the data of each element of the arraylist
points[i].add(amplitude[i]); //add the amplitude vector to the flat line of vectors, creating a 2D graph
vertex (points[i].x,points[i].y); //draw each vertex with the values (coordinates) of the vertex
}
endShape();
}
Try to copy and run this code to see what happens.
Now we have the graph right where we intend to: starts in the middle of the screen and follow the mouse. But, the graph doesn't rotates accordingly to the mouse.
When the mouse is under the start point, the graph distorts to a straight line
Rotating Vectors
In order to achieve the rotation we need, we will need to rotate the amplitude vector accordingly to the angle between the start and the end points of the graph.
ArrayList <Float> variation = new ArrayList<Float>();
void setup(){
size(400,400,P3D);
}
void draw (){
background(200);
float mapMouseXFromCenter=map(mouseX,0,width,-200,200);
float mapMouseYFromCenter=map(mouseY,0,height,-200,200);
variation.add (mapMouseXFromCenter);
float startPointX = width/2; //define the X position of the start point in the center of the screen;
float startPointY = height/2; //define the Y position of the start point in the center of the screen;
float endPointX=mouseX; //define the X position of the end point that will follow the mouse;
float endPointY=mouseY; //define the Y position of the end point that will follow the mouse;
PVector[]points=new PVector[variation.size()]; //create an array of vectors that will store the flat positions of points that will create the graph with the number of elements equal to the size of the of the arraylist
PVector[]amplitude = new PVector[variation.size()]; //create an array of vectors that will store the amplitude of the mapped mouse with the number of elements equal to the size of the of the arraylist
//initalize every vectors with x=0 and y=0 values;
for(int a=0; a<variation.size()-1; a++){
points[a] = new PVector(0,0,0);
amplitude[a] = new PVector(0,0,0);
}
//rotating the vectors
float deltaX=mouseX-width/2; //create a variable with the delta of the x component of the ending - start point
float deltaY=mouseY-height/2; //create a variable with the delta of the y component of the ending - start point
float angleInRadians=atan2(deltaY,deltaX); //get the angle in radians between them with atan2()
//here the magic begins
//we will create a line made of vertex, and each vertex will receive the values of the vectors
beginShape();
noFill(); //no fill
stroke(0); // black stroke
strokeWeight(5); //5 px stroke
for(int i = 0; i<variation.size()-1;i++){
float X=lerp(startPointX,endPointX,i/float(variation.size()-1)); // create a linear interpolation between the start and the end point of the X component, and the amount of interpolation will cover the entire interval;
float Y=lerp(startPointY,endPointY,i/float(variation.size()-1)); // create a linear interpolation between the start and the end point of the Y component, and the amount of interpolation will cover the entire interval;
points[i].set(X,Y,0); //set each vertex of the array with the correspondent value of the interpolation, creating a flat line
amplitude[i].set(0,variation.get(i),0); //set each vertex of the aray with the amplitude of the graph, acquiring the data of each element of the arraylist
rotate2D(amplitude[i],angleInRadians); //rotate the vector of amplitude acordingly to the angle between the start and end points
points[i].add(amplitude[i]); //add the amplitude vector to the flat line of vectors, creating a 2D graph
vertex (points[i].x,points[i].y); //draw each vertex with the values (coordinates) of the vertex
}
endShape();
if(frameCount%1000==0){
for(int j=0; j<variation.size()-1;j++){
variation.remove(j);
}
}
}
//A function that rotates the vector
void rotate2D(PVector v, float angle) {
// What's the magnitude?
float m = v.mag();
// What's the angle?
float a = v.heading2D();
// Change the angle
a += angle;
// Polar to cartesian for the new xy components
v.x = m * cos(a);
v.y = m * sin(a);
}
The intended result:
The graph is dynamically drawn wherever we want
With this method, we have complete control to the graph, defining beginning and ending points, amplitude, rotation and where the graph is rendered. With the values of the resultant vector (points[i].x and points[i].y) we can make any graph we need.
Bonus: 3D graph
Adding the third dimention of the graph makes a very unusual representation of data (just by adding the Z component (the mapped mouseY). With this, we have 3 dimensions of data: time, mouseX and mouseY;
ArrayList <Float> variation = new ArrayList<Float>();
ArrayList <Float> Z=new ArrayList<Float>();
void setup(){
size(400,400,P3D);
}
void draw (){
background(200);
float mapMouseXFromCenter=map(mouseX,0,width,-200,200);
float mapMouseYFromCenter=map(mouseY,0,height,-200,200);
variation.add (mapMouseXFromCenter);
Z.add(mapMouseYFromCenter);
float startPointX = width/2; //define the X position of the start point in the center of the screen;
float startPointY = height/2; //define the Y position of the start point in the center of the screen;
float endPointX=mouseX; //define the X position of the end point that will follow the mouse;
float endPointY=mouseY; //define the Y position of the end point that will follow the mouse;
PVector[]points=new PVector[variation.size()]; //create an array of vectors that will store the flat positions of points that will create the graph with the number of elements equal to the size of the of the arraylist
PVector[]amplitude = new PVector[variation.size()]; //create an array of vectors that will store the amplitude of the mapped mouse with the number of elements equal to the size of the of the arraylist
//initalize every vectors with x=0 and y=0 values;
for(int a=0; a<variation.size()-1; a++){
points[a] = new PVector(0,0,0);
amplitude[a] = new PVector(0,0,0);
}
//rotating the vectors
float deltaX=mouseX-width/2; //create a variable with the delta of the x component of the ending - start point
float deltaY=mouseY-height/2; //create a variable with the delta of the y component of the ending - start point
float angleInRadians=atan2(deltaY,deltaX); //get the angle in radians between them with atan2()
//here the magic begins
//we will create a line made of vertex, and each vertex will receive the values of the vectors
beginShape();
noFill(); //no fill
stroke(0); // black stroke
strokeWeight(5); //5 px stroke
for(int i = 0; i<variation.size()-1;i++){
float X=lerp(startPointX,endPointX,i/float(variation.size()-1)); // create a linear interpolation between the start and the end point of the X component, and the amount of interpolation will cover the entire interval;
float Y=lerp(startPointY,endPointY,i/float(variation.size()-1)); // create a linear interpolation between the start and the end point of the Y component, and the amount of interpolation will cover the entire interval;
points[i].set(X,Y,0); //set each vertex of the array with the correspondent value of the interpolation, creating a flat line
amplitude[i].set(0,variation.get(i),Z.get(i)); //set each vertex of the aray with the amplitude of the graph, acquiring the data of each element of the arraylist
rotate2D(amplitude[i],angleInRadians); //rotate the vector of amplitude acordingly to the angle between the start and end points
points[i].add(amplitude[i]); //add the amplitude vector to the flat line of vectors, creating a 2D graph
vertex (points[i].x,points[i].y); //draw each vertex with the values (coordinates) of the vertex
}
endShape();
if(frameCount%1000==0){
for(int j=0; j<variation.size()-1;j++){
variation.remove(j);
Z.remove(j);
}
}
}
//A function that rotates the vector
void rotate2D(PVector v, float angle) {
// What's the magnitude?
float m = v.mag();
// What's the angle?
float a = v.heading2D();
// Change the angle
a += angle;
// Polar to cartesian for the new xy components
v.x = m * cos(a);
v.y = m * sin(a);
}
Next, I'll show how to render a waveform capturing the data from a microphone using minim.
According with the philosopher Levinas, the concept of face is applicable only to humans. But, if we could analyse the whole internet as a collective human face?
The internet is a acentric rhisomatic web that is expanding, but it's limited. It is a matted web in which the linked points are partially formed by proposed source codes and by rearrangement or addition of code. Internet is a medium, a language and a situation. Strictly speaking, internet is a huge set of data open to modification arising from any part of the web, and it's a place where the source code is modified and expanded accordingly with the users activity. It's a finite web that could be analysed. It's possible (with the correct method) to measure whole humanity as an single individual. It's possible to measure the macro-humor of the internet in a determined moment, evaluate if the internet is being creative or not. This way, i think the internet is like a collective face.
Building a comercial app for Android OS.
Processing is capable of run the sketch directly on device, however, it doesn't generate the file with a commercial format, that is a signed .apk. In order to get that file, there is a list of procedures to make.
Preparing the sketch Create icons
It's indicated that you create the icons that will appear when a customer install the application. To get that, you should create three versions of the same icon with different resolutions in png (36x36px, 48x48px and 72x72px), name them as "icon-36.png", "icon-48.pg" and "icon-72.png" and place them inside the sketch folder (not data folder or any other subfolder).
Exporting the sketch
With the sketch opened in Processing in Android Mode, go to File > Export Android Project. It wil create an "android" folder inside the sketch folder with the project.
I had problems exporting with the 2.0 beta version of Processing. I used the version 2.0a.6.
Signing Installing Tools
The programs needed are Apache Ant, Java Development for OSX, MacPorts, OpenSSL and Android SDK.
Install Apache Ant, that could be download there: http://ant.apache.org/bindownload.cgi
Extract the archive and rename to "ant". Open Terminal and browse to ant folder. Use the command below to move the folder to ".usr/local":
mv ant /usr/local
Next, type the following command:
cd /usr/local
ln -s ant ant
Open the archive "bashrc"inside "/etc" with the command
sudo port sync; sudo port selfupdate; sudo port install openssl
If you don't have the Android SDK installed, Install Android SDK: download this file and extract it into a safe place: http://developer.android.com/sdk/index.html. Go to the folder "tools" and open the file "android". Next, download the packages. I suggest you download everything you could.
Create the secret key
Open Terminal and browse to the folder in which the Android project were exported.
Create the secret key in order to sign the app.
Type the syntax below replacing the data inside brackets, including the brackets "{}"with the actual names and paths.
It will be made various questions like your name and last name, city, etc. Fill everithing and type return everytime. When it's done, the following message will be showed [Storing {sketchName}-release-key.keystore], and the file will be stored inside the android folder.
Build an unsigned .apk file
Open Terminal, browse to the android folder and type
ant release
When the build is complete, the message "Build Successful"will be showed and the folde /bin with the unsigned apk file will be created inside the folder "android".
Sign the apk file with the secret key replacing the data inside brackets, and the brackets, with actual data
jarsigner -verbose -keystore {sketchName}-release-key.keystore {complete/path/to/sketchFolder/android/bin/sketchName-unsigned.apk} {Your name (that you defined in the secret key step)}
Hit return
It wil ask you to insert the password that you defined in the secret key step
Next, verify if jarsigner did what it had to with the following command"
A long list of messages will appear and the message "Verification successful" will be showed
If everything worked, there will be a new file with the name {sketchName}.apk inside the "android" folder.
But, I had a problem. When I called the command "zipalign", the message "command not found" appeared.
What I did (and worked fine) is to open Terminal and browse inside the folder that you installed the Android SDK tools " /android-sdk-macosx/tools" and type the following command:
The best way to learn how to make things with Arduino is to study the electricity laws and the details of electronics first.
But I think you can take a shortcut and pass through all this boring stuff and make the exciting first contact with Arduino. Then, if you like the experience, you can study electricity and electronics more profoundly.
FIRST: Know the basic components and how it works.
The most basic thing you should know is the Arduino board. Arduino Arduino is nothing more than a simple programable computer, and it works like a microcontroller. To make it work, you have to code in the Arduino IDE with a syntax based in Java, and upload the compiled code to the board using the USB connection. And, of course, you need (in most cases) to create a circuit connected to the Arduino board.
This is the Arduino UNO R3
Arduino UNO R3 Parts. Click to enlarge!
1- USB jack
2- power jack,
3- processor
4- communication chip
5- 16 mhz crystal
6- reset button
7- On led
8- TX/NX leds
9- Led
10- Power pins
11- Analog Inputs
12- TX and RX pins
13- Digital Inputs/outputs. The "~" in front of the numbers are for PWM outputs.
14- Ground and AREF pins.
15-ICSP for Atmega328
16- ICSP for USB interface
The number of pins (Digital in/out and Analog in) vary with the model of the board.
Power and Connection The board can work connected to a computer with an USB cable. In that case, the board works with 5V tension and the max current of 50 mA. If the components of the circuit works with that tension and current, you can use only the power that comes from the USB cable. But, if you want the board running alone, you have to connect a external electrical source. Important: don't fry your Arduino and/or your USB port!! Never make a circuit that demands a current greater than 50mA in each port. It could fry your Arduino and/or the USB of your computer. Never change the wiring of the circuit while connected to USB and/or to an external source. In cases like that (picture below) is pretty easy to make a short circuit if you accidentally touch in something with exposed terminals, like resistors, transistors, diodes.
So, if you want to make any change in the circuit, is safer to disconnect the Arduino board of USB and turn off the external source.
Power pins
The power pins (number 10 in the picture above) consists of 3.3V: 3.3Volts out 5V: 5 Volts out GND: 2 Grounds VIN: The input voltage to the Arduino board when it's using an external power source (as opposed to 5 volts from the USB connection or other regulated power source). You can supply voltage through this pin, or, if supplying voltage via the power jack, access it through this pin. 3.3V pin apply the current of 3.3V. 5V pin apply the current of 5V. GND is the reference point in an electrical circuit from which other voltages are measured. VIN apply the voltage and resistance that comes from a external source. For example, if you connect a source of 9V and 300mA, this is the tension and current that you achieve from this pin.
Analog Pins
Analog pins (number 11 in the picture above) are inputs where you connect analogue components like potentiometers and other sensors. While the digital inputs/outputs work only with 0 and 1 values, the analog imputs works with a values from 0 to 1023.
Digital pins
Digital pins (number 13 in the picture above) can work as inputs or outputs and you define how it will operate with the function pinMode(). The pins that have the "~" in front of the numbers are PWM (Pulse Width Modulation) out, and they can emulate analog output with analogWrite() function. When you use this function, the board modulates the pulse width, varying the frequency of max and low pulses (0 or 1), emulating an analog pulse.
Thats how analog pulse is emulated with PWM out
The first pulse is a digital PWM and the second is a analog pulse.
Next, the protoboard:
Protoboard
This is a protoboard
"Aprotoboard, also known asbreadboard( is a construction base forprototypingofelectronics. The term is commonly used to refer tosolderless breadboard(plugboard).
Because the solderless breadboard does not require soldering, it is reusable. This makes it easy to use for creating temporary prototypes and experimenting with circuit design."(Wikipedia).
And this is how those pins are connected
The pins of the protoboard have a pattern of connection, as shown in the picture above.
The "a" lines are connected horizontally, but, generally, in the middle of them there are a disconnection. These lines are for power supply, where the power cables are inserted.
The "b" lines are connected vertically. There you insert the components and other cables.
"A potentiometer,informally, a pot, in electronics technology is a component, a three-terminalresistor with a sliding contact that forms an adjustable voltage divider.[1] If only two terminals are used, one end and the wiper, it acts as avariable resistor or rheostat."(Wikipedia).
The colors of the lines indicates the resistivity of the resistor. There is a color code, as you can see below.
The trick to find the resistance of the resistor is to identify the golden or the silver band, which are the most common index of tolerance. When you find it, this band would be the last of the sequence, and you need to start reading the other way.
So, for example, if you have this:
The first thing to find is the golden/silver band. In this case, it's golden. So, the sequence is 1-Red, 2-Red, 3-Orange, 4- Gold.
The first band is the first digit, the second band is the second digit. If the third one is the last before the golden band, it is the multiplier, and the last is the tolerance.
So, if you look again at that color code, the reading of the resistor above is 2-2-1kΩ-5%. So, this is a 22kΩ resistor with 5% of tolerance.
More bands = more precision. Generally there are only 4.
In order to know what is the current flow, you need to find the cathode the "negative pole". In the common diode, the cathode is the side with a (white/black) band painted.
LED
LEDs are diodes. LED stands for Light-Emitting Diode. So, there is a polarity too.
In order to know what is the anode e what is the cathode, you have 3 alternatives:
1- The shorter terminal is the cathode (-);
2- The straight side is the cathode (-);
3- Inside the "bulb" the larger leg is the cathode (-);
this is the LED symbol
The oposite of LED is Photodiode.
"A photodiode is a type of photodetector capable of converting light into either current or voltage, depending upon the mode of operation.[1] The common, traditional solar cell used to generate electric solar power is a large area photodiode." (wikipedia).
Photodiodes
Photodiodes can look exactly like LEDs. In order to identify them, the trick is to look for the bulb with larger area.
This is the Photodiode symbol
Transistor
transistors
"A transistor is a semiconductor device used to amplify and switchelectronic signals and electrical power. It is composed of semiconductormaterial with at least three terminals for connection to an external circuit. A voltage or current applied to one pair of the transistor's terminals changes the current flowing through another pair of terminals. Because the controlled (output) power can be higher than the controlling (input) power, a transistor can amplify a signal." (Wikipedia).
There are four types of polarity of transistors: NPN, PNP, P-Channel, N-Channel
Usually, transistors have 3 legs: base, emitter and colector. The way you discover which is which is to discover what are the model of the transistor you have.
For example, below there is a tip122 transitor. You can find the model in the body of the transistor (the letters and numbers highlighted below).
With that number, you use google to search for the data sheet. Use the keywords "tip122 data sheet".
With that, you discover what is the type of the transistor (NPN, in this case) and what is the base, the collector and the emitter.
Relay
Relays
"A relay is an electrically operated switch. Many relays use an electromagnet to operate a switching mechanism mechanically, but other operating principles are also used. Relays are used where it is necessary to control a circuit by a low-power signal (with complete electrical isolation between control and controlled circuits), or where several circuits must be controlled by one signal. "(Wikipedia).
Relay Symbol
The relay's switch connections are usually labelled COM, NC and NO:
COM = Common, always connect to this, it is the moving part of the switch.
NC = Normally Closed, COM is connected to this when the relay coil is off.
NO = Normally Open, COM is connected to this when the relay coil is on.
Connect to COM and NO if you want the switched circuit to be on when the relay coil is on.
Connect to COM and NC if you want the switched circuit to be on when the relay coil is off.
There are mainly two types of relays: a relay with moving parts, and a solid-state relay.
The number of pins vary with the model of relay. To know how your relay operates, google the model of it. For example, the relay below is a "JQC-3F(T73)", so, google the keywords "JQC-3F(T73) data sheet".
You will discover that this is a 5 pin relay that operates in 12V.
Search again how a 5 pin relay works.
You will find this schematic:
A 5-PIN relay has a single control circuit, but two separate current paths for the switch: One when the relay is de-energized (OFF - no current through the control coil) and the other the energized (ON - current is flowing through the control coil). When the 5-PIN relay is de-energized (OFF), pins 4 and 5 have continuity. When the relay is energized (ON), pins 3 and 5 have continuity.
Solenoid
"Solenoid is a specific type of relay that internally uses an electromechanical solenoid to operate an electrical switch; for example, anautomobile starter solenoid, or a linear solenoid, which is an electromechanical solenoid."(Wikipedia).
The symbol of a solenoid
To know what type of solenoid you need, you have to know the voltage and amperage needed, the current type (Direct Current or Alternating Current), the power (in Watts), the relative period of activity and the course of the rod.
The relative period of activity is measured by this formula: PA=(sum of the active time/sum of the active time + inactive time) X 100%.
For example, the solenoid I have (above) needs 12V, 130mA when it's active, Alternating Current, have 9W, a PA of 100% and a course of the rod of 8mm.
Drivers: H-Bridge
"An H bridge is an electronic circuit that enables a voltage to be applied across a load in either direction. These circuits are often used in robotics and other applications to allow DC motors to run forwards and backwards. H bridges are available as integrated circuits, or can be built from discrete components." (Wikipedia)
Below, the schematic of how the H-bridge works.
Discrete H-Bridge
Discrete H-Bridge
Sensors
Sensors
There are a bunch of sensors. Temperature sensors, light sensor, infrared sensors, distance sensors, gyroscopes, accelerometers...
"A sensor (also called detector) is a converter that measures a physical quantity and converts it into a signal which can be read by an observer or by an (today mostly electronic) instrument. For example, a mercury-in-glass thermometer converts the measured temperature into expansion and contraction of a liquid which can be read on a calibrated glass tube. A thermocouple converts temperature to an output voltage which can be read by a voltmeter. For accuracy, most sensors are calibrated against known standards."(Wikipedia).
All the sensors I've ever played with work with analog values (0 to 1023). I'm not sure if all the sensors are analog, but I think most of they are.
They are connected to the analog input pins of Arduino. They are read by the function analogRead().
the most common sensors are:
Temperature Sensor
Distance Sensor
Light sensors
Force Sensors
Accelerometer Sensor
Gyroscope Sensor
Tools
Multimeter
A pretty handy tool you should have is a multimeter.
"A multimeter or a multitester, also known as a VOM (Volt-Ohm meter), is an electronicmeasuring instrument that combines several measurement functions in one unit. A typical multimeter may include features such as the ability to measure voltage, current and resistance. Multimeters may use analog or digital circuits—analog multimeters (AMM) and digital multimeters (often abbreviated DMM or DVOM.) Analog instruments are usually based on a microammeter whose pointer moves over a scale calibrated for all the different measurements that can be made; digital instruments usually display digits, but may display a bar of a length proportional to the quantity being measured."(Wikipedia).
Instead of teach how to use it, I'll embed a video of a basic tutorial on how to use this thing.
Buying your kit
With all that in mind (you can back here every time you have questions), you can make the next step, that is to buy the Arduino Starter Kit. The basic things you should have is:
Arduino Uno
USB cable
Breadboard
Breadboard cables (8~22 cm). About 70 cables are very handy.
A bunch of LEDs, 5 of each is a good number (red / green / yellow/ white)
Speaker
Piezoelectric Buzzer plate
Push button switches
Light dependent resistor
Adjustable resistor
Sensors, (Flame sensor, temperature sensor,Infrared receiver)
Resistor kit (200ohm / 1K ohm / 10K ohm) 10 of each is a great beginning
9V battery
Battery slot
Storage case
Testing connection
The next step is to test if everything works. First of all, download the latest version of Arduino for your OS and install it. If you have an older Arduino like Duemilanove, Diecimila, or any board with this FTDI chip (image below) you have to install a FTDI driver.
If your board is newer, like Arduino Uno or Mega 2560, no problem, you don't need to install anything: it'll be detected automatically.
Open the IDE
Connect the Arduino board on your computer.
Go to "Tools"> "Board" and select the model of the board connected to the computer.
Next, go to ""Tools"> "Serial Port" and select the port in which your Arduino is connected.
If your Arduino is plugged, there must be two usb connections and they must be the below the others. For instance, mine is /dev/tty.usbmodem1421
Then, go to "File">"Examples">"01.Basics">"Blink"
Open it, then click on "Upload" (the rounded arrow button), and the program will be compiled and uploaded to the board.
If everything works, the built in led of your Arduino board should blink.
If you selected the wrong board or the wrong port, it will not upload. If it happened, try to select the correct model of your board and the correct port.
Now, you are ready to enter the world of Arduino.
The way I started was following the basic tutorials on Learning session of Arduino website:
This example shows the simplest thing you can do with an Arduino to see physical output: it blinks an LED.
What is needed (that is not complete, because the resistor is missing):
Hardware Required
Arduino Board
LED
And the instructions:
To build the circuit, attach a 220-ohm resistor to pin 13. Then attach the long leg of an LED (the positive leg, called the anode) to the resistor. Attach the short leg (the negative leg, called the cathode) to ground. Then plug your Arduino board into your computer, start the Arduino program, and enter the code below.
Most Arduino boards already have an LED attached to pin 13 on the board itself. If you run this example with no hardware attached, you should see that LED blink.
Notice that strange example picture:
It's strange because the resistor is directly connected to the LED
And the schematic (that is more precise)
Always follow the schematic in order to know what to do
And, finally, the code with a explanation of the functions.
Code
In the program below, the first thing you do is to initialize pin 13 as an output pin with the line
pinMode(13, OUTPUT);
In the main loop, you turn the LED on with the line:
digitalWrite(13, HIGH);
This supplies 5 volts to pin 13. That creates a voltage difference across the pins of the LED, and lights it up. Then you turn it off with the line:
digitalWrite(13, LOW);
That takes pin 13 back to 0 volts, and turns the LED off. In between the on and the off, you want enough time for a person to see the change, so the delay() commands tell the Arduino to do nothing for 1000 milliseconds, or one second. When you use the delay() command, nothing else happens for that amount of time. Once you've understood the basic examples, check out the BlinkWithoutDelay example to learn how to create a delay while doing other things.
Once you've understood this example, check out the DigitalReadSerial example to learn how read a switch connected to the Arduino.
/* Blink Turns on an LED on for one second, then off for one second, repeatedly.
This example code is in the public domain. */
// Pin 13 has an LED connected on most Arduino boards. // give it a name: int led =13;
// the setup routine runs once when you press reset: voidsetup(){ // initialize the digital pin as an output. pinMode(led,OUTPUT); }
// the loop routine runs over and over again forever: voidloop(){ digitalWrite(led,HIGH);// turn the LED on (HIGH is the voltage level) delay(1000);// wait for a second digitalWrite(led,LOW);// turn the LED off by making the voltage LOW delay(1000);// wait for a second }
Making the fucking LED blink on and off
In order to make this thing done, just look to the schematic and notice what is really needed:
Arduino
LED
Resistor 220 ohms
And, since that you don't need a soldered circuit of a blinking LED forever, use:
Protoboard
Protoboard cables
Again: take a peek to the schematic
First: Insert a LED on the protoboard wherever you like, since that you connect it horizontally (the legs of the LED couldn't be at the same column) and notice what is the anode and what is the cathode (the cathode have a short leg)
Next, connect the resistor to the anode of the LED, following the anode column.
Then, connect the cable to the cathode of the LED and to the GND pin of the Arduino
And, finally, connect the cable to the digital pin 13 and to the anode of the LED
Now your circuit is complete. Paste the code below inside the Arduino IDE, connect your Arduino to the computer, and upload it to the board.
/* Blink Turns on an LED on for one second, then off for one second, repeatedly.
This example code is in the public domain. */
// Pin 13 has an LED connected on most Arduino boards. // give it a name: int led =13;
// the setup routine runs once when you press reset: voidsetup(){ // initialize the digital pin as an output. pinMode(led,OUTPUT); }
// the loop routine runs over and over again forever: voidloop(){ digitalWrite(led,HIGH);// turn the LED on (HIGH is the voltage level) delay(1000);// wait for a second digitalWrite(led,LOW);// turn the LED off by making the voltage LOW delay(1000);// wait for a second }
Your led should blink like this, and your first step is accomplished.
Use the same methodology for all the tutorials of the learning session of Arduino site http://arduino.cc/en/Tutorial/HomePage and you could probably become a self taught master of Arduino. If you arrived at this point, you have a homework to do, that is to follow all tutorials of that link. This part of the tutorial is over. Wait for the next. Tank you for being here!
