7
Basics of Ard uino and Processing Topic No. 5 Name, Surname, Date: Aim of this work: get know Processing software and its usage for data reading from serial port. Processing Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.  Free to download and open source  Interactive programs using 2D, 3D or PDF output  OpenGL integration for accelerated 3D  For GNU/Linux, Mac OS X, and Windows  Projects run online or as double-clickable applications  Over 100 libraries extend the software into sound, video, computer vision, and more...  Well documented, with many books available The Processing Development Environment A Processing program is called a sketch. The idea is to make Java-style programming feel more like scripting, and adopt the process of scripting to quickly write code. Sketches are stored in the sketchbook, a fol der that's used as the default location for saving all of your projects. Sketches that are stored in the sketchbook can be accessed from File Sketchbook. Alternatively , File Open... can be used to open a sketch from elsewhere on the system.  A program written as a list of statements (like the previous examples) is called a static sketch. In a static sketch, a series of functions are used to perform tasks or create a single image without any animation or interaction. Interactive programs are drawn as a series of frames, which you can create by adding functions titled setup() and draw() as shown in the code below. These are built-in functions that are called automatically.

Arduino buy test

Embed Size (px)

Citation preview

Page 1: Arduino buy test

7/25/2019 Arduino buy test

http://slidepdf.com/reader/full/arduino-buy-test 1/7

Basics of Arduino and Processing

Topic No. 5

Name, Surname, Date:

Aim of this work: get know Processing software and its usage for data reading from serial port.

Processing

Processing is an open source programming language and environment for people who want to create images, animations, and

nteractions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming

within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens

of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and

production.

  Free to download and open source

  Interactive programs using 2D, 3D or PDF output

 

OpenGL integration for accelerated 3D

  For GNU/Linux, Mac OS X, and Windows

  Projects run online or as double-clickable applications

  Over 100 libraries extend the software into sound, video, computer vision, and more...

  Well documented, with many books available

The Processing Development Environment

A Processing program is called a sketch. The idea is to make Java-style programming feel more like scripting, and adopt the

process of scripting to quickly write code. Sketches are stored in the sketchbook, a folder that's used as the default location for

saving all of your projects. Sketches that are stored in the sketchbook can be accessed from File → Sketchbook. Alternatively,

File → Open... can be used to open a sketch from elsewhere on the system. 

A program written as a list of statements (like the previous examples) is called a static sketch. In a static sketch, a series of

unctions are used to perform tasks or create a single image without any animation or interaction. Interactive programs are

drawn as a series of frames, which you can create by adding functions titled setup() and draw() as shown in the code below.

These are built-in functions that are called automatically.

Page 2: Arduino buy test

7/25/2019 Arduino buy test

http://slidepdf.com/reader/full/arduino-buy-test 2/7

void setup() {

size(400, 400);

stroke(255);

background(192, 64, 0);

}

void draw() {

line(150, 25, mouseX, mouseY);

}

The setup() block runs once, and the draw() block runs repeatedly. As such, setup() can be used for any initialization; in this

case, setting the screen size, making the background orange, and setting the stroke color to white. The draw() block is used tohandle animation. The size() function must always be the first line inside setup().

Because the background() function is used only once, the screen will fill with lines as the mouse is moved. To draw just a single

ine that follows the mouse, move the background() function to the draw() function, which will clear the display window (filling

t with orange) each time draw() runs.

void setup() {

size(400, 400);

stroke(255);

}

void draw() {

background(192, 64, 0);

line(150, 25, mouseX, mouseY);}

Static programs are most commonly used for extremely simple examples, or for scripts that run in a linear fashion and then

exit. For instance, a static program might start, draw a page to a PDF file, and exit.

Most programs will use the setup() and draw() blocks. More advanced mouse handling can also be introduced; for instance,

he mousePressed() function will be called whenever the mouse is pressed. In the following example, when the mouse is

pressed, the screen is cleared via the background() function:

void setup() {

size(400, 400);

stroke(255);

}void draw() {

line(150, 25, mouseX, mouseY);

}

void mousePressed() {

background(192, 64, 0);

}

Shapes in Processing

The coordinate system for pixels in a computer window, however, is reversed along the y-axis. (0,0) can be found at the top

eft with the positive direction to the right horizontally and down vertically.

There are few basic shapes:

Page 3: Arduino buy test

7/25/2019 Arduino buy test

http://slidepdf.com/reader/full/arduino-buy-test 3/7

 

A point() is the easiest of the shapes and a good place to start. To draw a point, we only need an x and y coordinate.

A line() isn't terribly difficult either and simply requires two points: (x1,y1) and (x2,y2):

Once we arrive at drawing a rect(), things become a bit more complicated. In Processing, a rectangle is specified by the

coordinate for the top left corner of the rectangle, as well as its width and height.

A second way to draw a rectangle involves specifying the centerpoint, along with width and height. If we prefer this method,

we first indicate that we want to use the "CENTER" mode before the instruction for the rectangle itself. Note that Processing is

case-sensitive.

Finally, we can also draw a rectangle with two points (the top left corner and the bottom right corner). The mode here is

CORNERS".

Once we have become comfortable with the concept of drawing a rectangle, an ellipse() is a snap. In fact, it is identical to

ect() with the difference being that an ellipse is drawn where the bounding box of the rectangle would be. The default mode

or ellipse() is "CENTER", rather than "CORNER."

t is important to acknowledge that these ellipses do not look particularly circular. Processing has a built-in methodology for

selecting which pixels should be used to create a circular shape. Zoomed in like this, we get a bunch of squares in a circle-like

pattern, but zoomed out on a computer screen, we get a nice round ellipse. Processing also gives us the power to develop our

own algorithms for coloring in individual pixels (in fact, we can already imagine how we might do this using "point" over and

Page 4: Arduino buy test

7/25/2019 Arduino buy test

http://slidepdf.com/reader/full/arduino-buy-test 4/7

over again), but for now, we are content with allowing the "ellipse" statement to do the hard work. (For more about pixels,

start with: the pixels reference page, though be warned this is a great deal more advanced than this tutorial.)

Now let's look at what some code with shapes in more realistic setting, with window dimensions of 200 by 200. Note the use

of the size() function to specify the width and height of the window.

size(200,200);

rectMode(CENTER);

rect(100,100,20,100);

ellipse(100,70,60,60);

ellipse(81,70,16,32);

ellipse(119,70,16,32);

line(90,150,80,160);line(110,150,120,160);

Serial

The Processing serial library allows for easily reading and writing data to and from external machines. It allows two computers

o send and receive data and gives you the flexibility to communicate with custom microcontroller devices, using them as the

nput or output to Processing programs.

To use serialą communication a certain library have to be importe in the Processing code

import processing.serial.*;

To know awailable pors there are function list()

// List all the available serial ports:

println(Serial.list());

To get data from serialą port, a serialą connection have to be setuped 

// Open the port you are using at the rate you want:

Serial myPort = new Serial(this, Serial.list()[0], 9600);

To rite data in to the serialą port, function rite can be used 

// Send a capital A out the serial port:

myPort.write(65);

To read data from serialą port more difficult code structure have to be used. First of all there should be checked id there any

data to be received (function available()). Is there is any, it can be read by functions read(), readChar(), readBytes(),

eadString() and others.

However there can be generated the user events where function bufferUntil() can be used to dešine the division of transfere

data.

import processing.serial.*;

Serial myPort; // The serial port

String inString; // Input string from serial port

int lf = 10; // ASCII linefeed

void setup() {

size(400,200);// List all the available serial ports:

println(Serial.list());

// Open the port you are using at the rate you want:

myPort = new Serial(this, Serial.list()[0], 9600);

myPort.bufferUntil(lf);

}

void draw() {

background(0);

text("received: " + inString, 10,50);

}

void serialEvent(Serial p) {inString = (myPort.readString());

}

Page 5: Arduino buy test

7/25/2019 Arduino buy test

http://slidepdf.com/reader/full/arduino-buy-test 5/7

Tasks

1.  Write a Processing code, which would move a person picture (the one You had in previous examples or draw it by You

self) according to Your mouse moves. Write the code below:

2.  Connect a potentiometer and LED to the Arduino bloard and write a code to send potentiometers data to Serial post.

Code for Arduino:

void setup(){

Serial. begin(9600);}

void loop(){

int aV = analogRead(2);

Serial.println(aV);

delay(1000);

}

Code for Processing:

import processing.serial.*;

Serial myPort; // The serial port

int xPos = 1; // horizontal position of the graph

void setup () {

// set the window size:

size(400, 300);

// List all the available serial ports

println(Serial.list());

Page 6: Arduino buy test

7/25/2019 Arduino buy test

http://slidepdf.com/reader/full/arduino-buy-test 6/7

// I know that the first port in the serial list on my mac

// is always my Arduino, so I open Serial.list()[0].

// Open whatever port is the one you're using.

myPort = new Serial(this, Serial.list()[0], 9600);

// don't generate a serialEvent() unless you get a newline character:

myPort.bufferUntil('\n');

// set inital background:

background(0);

}

void draw () {

// everything happens in the serialEvent()

}

void serialEvent (Serial myPort) {

// get the ASCII string:

String inString = myPort.readStringUntil('\n');

if (inString != null) {

// trim off any whitespace:

inString = trim(inString);

// convert to an int and map to the screen height:

float inByte = float(inString);

inByte = map(inByte, 0, 1023, 0, height);

// draw the line:

stroke(127,34,255);line(xPos, height, xPos, height - inByte);

// at the edge of the screen, go back to the beginning:

if (xPos >= width) {

xPos = 0;

background(0);

}

else {

// increment the horizontal position:

xPos++;

}

}

}

You can copy it from http://arduino.cc/en/Tutorial/Graph 

Write down what this system should do, how it works.

3.  Change the Processing code to draw a chart with changing colour depending on the x axis (chart start with one colour

and ends with another step by step changing from one to another). Write down only those lines, which have been

changed

Page 7: Arduino buy test

7/25/2019 Arduino buy test

http://slidepdf.com/reader/full/arduino-buy-test 7/7

4. 

Change the schema by adding one LED to it. Now change the code to turn on the LED when a axis fills up (when x axis

is filled with values it starts from the beginning and LED should indicate is it the first time or no). Write down what

have to be changed in the code.

Mark: