Processing 02

---

---

Array

1	1	1	1	1	1	1	1	1

An array is a list of data, or boxes of data.

int[] ar;//definition 
ar = new int[10];//creation 
ar[0]=0;//access data 
ar[1]=0;
...

… it takes time to initialize all array data!
So, use for with the array.

for (int i=0; i < 10; i++)
{
  ar[i]=0;
}//Note: Don't put number more than 9!


for (int i=0; i < ar.length; i++)
{
  println(ar[i]);
}//Note: "array.length" means the number of data.

Point: Use .length to avoid bugs and inconvenience.
If you put “10” instead, then it is difficult to find & change all the part. It would yield bugs.
If you use .length, just change the number of the creation part.
I recommend to use for instead of specifying the index number of array data for the same reason.

---

2D Array

2D array of 7x7.

---

Ex1: Use 1D array with drawing methods such as ellipse(), rect(), line, etc with color changing.

• Can you generate a gradient color?

Hint: stroke(), fill().

• Another way to make gradient.

There is another solution by using leapColor() with stroke() and line(). [leapColor()]

Ex2: Use a 2D array with drawing methods and color changing.

Ex3: Check sample programs related to array from File > Sample > Basics > Arrays > ....

---

Object

Object Oriented Programming (OOP) is the program designed by some parts/components (=objects) that have functions.

The explanation of OOP here is a very easy one.
Search if you want to know more about OOP.

Class, Instance, Method

You can create your own data type that includes variables and methods. This is class.

class is like a “cookie cutter/shape/design” and then we have to make the “cookie” itself with the cutter. This “cookie” is an instance.

---

method is a function (See Processing01).
class can have methods also.

Live coding for Ball class.

By using our ball program (Ball Game 2 etc.), let’s see implement Ball class.

Sample code of Person class.

Person hiroko = new Person("hiroko", "female");
void setup() {
  size(600, 700);
  background(255);
}
void draw() {
  hiroko.display(100, 50);
}
class Person {
  int headSize = 100;
  int bodyW = 100;
  int bodyH =200;     
  color col = color(128, 0, 128);  

  Person(String name0, String gender)   {    
    if (gender=="female")    col = color(255, 0, 0);
    else if (gender=="male") col = color(0, 0, 255);
  }

  void display(int posx, int posy)   {    
    translate(posx, posy);
    fill(col);    
    stroke(col);
    ellipse(0, 0, headSize, headSize);
    rect(-headSize/2, headSize/2, bodyW, bodyH);
  }
}

A result of the sample code.

---

Ex 4: Draw other people (male & …)

Ex 5: Improve person class to display their names.

Ex 6: Define persons by array and display them using for.

Font Maker in Tool menu:
You can use Tool > Font Maker to create a new font in a “data” folder.
Then, you can use the font such as the below.

PFont myFont = loadFont("data/BerlinSansFBDemi-Bold-48.vlw");//name of new font in data folder.
textFont(myFont);
textAlign(CENTER);
textSize(30);

fill(0);
text(name, 0, 0 );   

Setting for use of font seems to be in setting().
Then you can use text() in other places such as in display().

Color Picker in Tool menu:
You can use Tool > Color Picker to specify color such as the below.

color col = #E60FFF; 

This is the result of the improved Person class.
The bottom line is displayed by using for.

---

Let’s see Processing works on web sites

You can find many processing works and download the codes from the web sites such as the below.

OpenProcessing.org

You can upload and open your works here!
https://www.openprocessing.org/

Generative Design

• Processingで切り拓く、デザインの新たな地平
  This book was published in 2016.
  The some codes are on the web site.
  http://www.generative-gestaltung.de/

Flight Patterns

This is my favorite information art.
This work is generated from actual flight patterns with beautiful visualizations using the Processing.
See the URL.

---

Ex7: Find Processing works on other sites.

Ex8: Find your favorite Processing work on the internet.

Ex9: Download the Processing code of the most favorite work on the web and execute the program on your PC.

Ex10: Edit the downloaded code to change the program.

---

Processing.js for Web

Release your Processing program on the web.

1. See example on the top page of Processing.js.
   
   • http://processingjs.org/
2. Download processing.js and processing.min.js
   
   • http://processingjs.org/download/
3. Make a html file such as the “sample.html” below.
4. Copy your Processing program to the html file.
5. Make “JS” folder. Then, put Processing.js and Processing.min.js into it.
6. Open the html file to execute the program.
7. You can then upload these files and folders to display them on the internet.
   
   • sample.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=shift_jis">
<title>Sample of Processing.js</title>

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<script src="JS/processing.min.js"></script>

</head>

<body BGCOLOR="#ffffff">
<h3>Your Processing program</h3>

<script type="application/processing">

/*----------
Copy your Processing program here to display on the web.
----------*/

</script>
<canvas id="canvas"></canvas>

</body>
</html>

Ex11: Make html file with your processing code (such as the exercises before). Then, upload the html file on the internet.

Note: Do not copy a Processing code of others.

Note: p5.js is a newer JavaScript library for Processing. Check it out if you are interested in it .

Libraries in Processing

See here for many many libraries!

In computer science, a library is a collection of resources used by computer programs

• such as methods/functions, classes, values, and so on.

How to import a library

Sketch > Import library > “library’s name” (such as “Video”)

Or, if you cannot find the library in the list, select add a library to open "Contribution Manager"(below).
Then, select the library and push "Install" button.
You can type in the keyword in the search box to find it.
Then you can select the library from import library as well.

After you select the library from the list,

import processing."library's name".*;

will be inserted into the top line of the sketch.

Now the library was imported to the program.
Let’s see how to use libraries in the followings.

---

Lib > Video

Import Video library and select the below sample code.

• File > Sample > Video > Capture > GettingStartedCapture

Let’s execute the above sample program.
The below is a result of printArray() by my pc)
They are the same as String[] camera = Capture.list();

Available cameras: 
[0] “name=Rear Camera,size=640x480,fps=30” 
[1] “name=Rear Camera,size=640x360,fps=30” 
[2] “name=Rear Camera,size=3264x2448,fps=15” 
[3] “name=Rear Camera,size=2592x1944,fps=15” 
[4] “name=Rear Camera,size=1920x1080,fps=24” 
[5] “name=Rear Camera,size=1600x1200,fps=30” 
[6] “name=Rear Camera,size=1280x720,fps=60” 
[7] “name=Front Camera,size=640x480,fps=30” 
[8] “name=Front Camera,size=160x120,fps=30” 
[9] “name=Front Camera,size=176x144,fps=30” 
...

Ex12: Capture a video by your PC using the above code, and save frames using saveFrame(), then convert these frames to mov file.

• If your pc doesn’t have any camera, please tell me.

---

Lib > OpenCV for Processing

OpenCV is a library of programming functions mainly aimed at real-time computer vision.
OpenCV is used for C, C++, C#, Java, … very popular!
(There may be some disadvantages with OpenCV Processing)

What OpenCV Processing can do?

• There are samples of OpenCV in
  
  • Contributed Libraries > OpenCV for Processing.

• See here for methods: OpenCV Processing and Java Library

• See here for more detailed reference: OpenCV-processing reference

Words/methods that you should know at least:
[The official web site would be very helpful]
ROI() … Region of Interest 関心/対象領域
absDiff() … absolute difference：差分の絶対値
Background substraction … 背景差分
Dilation and erosion (morphology) … 膨張と収縮 web
Region detection … 領域分割/検出
blobs() … 領域（分割）の一種
labeling … region detection & put IDs 領域分割&ID割り当て
threshold() … 閾値
thresholding … region detection by threshold 閾値で領域分割すること
findContours() … find edges in an image 画像内のエッジを見つける処理
(Optical) Flow … vector data of motion 動きのベクトルデータ
Warp … 歪む
Perspective … 遠近法
Depth … distance in Z axis from the camera 深度、奥行き。Z軸上のカメラからの距離。
Color/bit depth … the number of bits used to indicate the color of a single pixel. 色深度。1pixの色を表すために使われているビット数。
and so on.

Ex13: Let’s see & execute some samples of OpenCV-Processing.

1. “FilterImages”
   
   • getSnapshot(), threshold(), loadImage(), blur(),
   • See reference for adaptiveThreshold().
     
     • change parameter values.
   • image() with push/popMatrix()
     
     • affine transform can be applied.
2. “FindEdges”
   - findCannyEdges(),
   - findScharrEdges(),
   - findSobelEdges()
3. “BackgroundSubtraction”
4. “FaceDetection”
5. “MultipleColorTracking”
6. “OpticalFlow” [Edited sample]
7. and so on.

Hint: Error occurs in some sample codes because of size(). After Processing version 2, size() can have only constant values but variables and equation such as width*2. To avoid this error, replace the values with adequate values such as size(1000, 1000).

Face detection with “Capture”.

Ex14: Use affine transform to image().

Ex15: Copy & edit one of the sample codes (excluding codes using Capture initially) of OpenCV to use your pc camera.

1. Refer the sample “GettingStartedCapture” of video library.
2. Set size of OpenCV, Video(, and Window) by checking your camera (such as cameras[0]).
   
   • You can check it by printArray() or a debug tool.
3. Use the instance of Capture if it is available (.available()==true) in draw().

How to use debug tool:

1. Debug > Activate debug
2. Go to a line where you want to confirm.
3. Debug > Add a breakpoint
4. Debug > Continue or push triangle button, then the program is executed and stops at the breakpoint.
5. You can see variables at this point.

Do not forget to push Debug > Disable debug to finish Debug mode.

See the “Debug” on the reference site or the video of Processing 3 Debugger.

During debugging, you can check the values of variables in “Variables” window.

Ex16: Convert a color image to a grayscale image by using filter() of Processing (not OpenCV).

• See the reference.

Note: By OpenCV-Processing, grayscale is default.
If you want to use color by OpenCV-Processing, apply .useColor() such as in the sample “WorkingWithColorImages”.

Image processing by yourself.

See the official tutorial of Images and Pixels.
We will skip the beginning part.
We will see threre from “Pixels, pixels, and more pixels”.

1. loadPixels() allows us to capture the window.
2. pixels[width * height] allows us to change pixel colors one by one.
3. updataPixels() allows us to reflect the change. Put this when finishing dealing with pixels.

Note 1: pixels stores color values (=intensity) of 2D image into 1D array.
When x, y are the index of line and column,
x + (y * width) = [Index of 1D array]

Note 2: In a similar way, PImage has methods and array of loadPixels(), pixels[], updatePixels().
If you access the original color of each pixel of PImage, the below is a sample.

int pixCol = video.pixels[y * video.width + x];

//take red, green, blue by bit shifting.
int r = red(pixCol);    //(pixCol >> 16) & 0xff;
int g = green(pixCol);  //(pixCol >> 8 ) & 0xff;
int b = blue(pixCol);   //(pixCol & 0xff);

//ウィンドウのピクセルに当てはめる
pixels[y * video.width + x] = color(r, g, b);

Ex17: Execute and understand the below code.

Random code.

Stripe code.

Ex18: Make the below images by using loadPixels() and so on.

Ex19: Change color of the above right image.

Ex20: The above right image is like a lighting circle. Then, make a lighting line.

Hint: For the last image like a light, use square.
You can square by [ *, sq(), pow()].

Homework :

Make your web page to show your best 3 results of exercises with descriptions of your original ideas for each exercise.

• Allowed in Japanese or English.
• Select 3 exercises from the classes Processing 1 and Processing 2.

Reference

http://p5aholic.hatenablog.com/entry/2015/12/10/000000