Introduction & Exploration

Introduction of Processing

Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology.

One of Processing’s shortcomings is its lack of web compatibility, but this is well addressed by its twin brother, p5.js. All of the drawing functions you use in Processing can be executed in p5.js, which means that when you want to implement your ideas on the web, it’s an easy transition without a lot of learning curve.

With p5.js, you can use the entire browser as your “canvas”. With the plugin library, you can easily interact with other html5 elements such as text, input boxes, video, camera and audio, and you can even create games with P5.js. All in all, Processing offers a new option for all creative people to bring their interesting ideas to life.

1. The Origins of Processing

Processing was born out of the Aesthetics and Computing Research Group at the MIT Media Lab, where Casey Reas and Benjamin Fry initiated the program.

Processing itself is a blend of art and science: it is programmed in the context of digital art, through visualization, with a simplified syntax based on the java language, and with cross-platform features.

2. People who use Processing

Processing was initially created specifically for visual interaction and media art design, and it is a language developed for artists and designers. the emergence of processing makes everyone realize again: programming is not just a job for engineers; programming can provide an effective way for a wide range of artists and designers, as well as for all those who want to programmatically realize drawing, animation and interaction. programming for artists and designers, and anyone who wants to draw, animate, and interact programmatically.

But not only designers and artists, everyone can realize their design ideas with the help of processing.

3.Features of Processing

  • Open source and simple
  • Rich in resources
  • Wide range of applications

Exploration similar tool

After our study and exploration, we found that TouchDesigner is a similar software tool to Processing.

TD is more suitable for creative, interface for beginners is also more friendly, TD does not do complex work without writing code, the functions are packaged into components more convenient, the project readability is also very high. Mainly in support of the use of hardware than processing convenient. processing no complex functions, but IDE voice based on Java qua platform high, the functional requirements of third-party libraries or quite good, the design of the flexibility is very strong (not only can it be used to do creativity), but the need for some code skills, and when you debug the BUG time ……

A more intuitive statement is: TouchDeesigner itself is an interactive software intuitive synthesis output, processing is more like a development tool to support the development and compilation.

Screen Shot 2023-10-31 at 15.13.15.png

The following are some of the results of the application of touch designer shared on the Internet.

https://youtu.be/SbYtIiZdrew?si=lu0sGlyOIFuOUp2u

Kinect & Leapmotion & IOT platform

In order to better learn the function of processing, we have found an open source case on the Internet about Leapmotion, to analyze, learn, show.

Kinect side trembling sensitive heavy recognition of human cigar mill branch body whole body swim resistant skeleton, but can also recognize the face and hand (currently can only recognize two fingers), Leap Motion can only recognize the hand, but the accuracy is higher than the kinect recognition of the hand.

There is no leap motion.

There are related tutorials: https://blog.csdn.net/m0_67426211/article/details/131226332

Our Work

one demo to interact

Screen Shot 2023-10-31 at 21.01.26.png

We made one that can be interacted with using the mouse.

Basic Module: Download Processing, open it, and then in the sketch text editor, for the canvas size and background color to define, and then for the diameter of the circle, the color, fill, margins and position (using translate to determine the position of the circle) to define. Next, use the loop and the newly defined function to change the center of the circle and draw the basic module to complete the circle. The result will be as follows:

Screen Shot 2023-10-31 at 16.54.27.png

Screen Shot 2023-10-31 at 17.28.53.png

Increase interactivity: Allow visual elements to achieve different interactive effects when associated with different mouse values. Using mouseX and mouse Y to allow the mouse to move the actual movement value, and using the console to control the offset of the small circle in the ellipse module on the screen makes the whole more interactive. The subsequent grid-like distribution of the circles is controlled to make the whole more silky smooth.

Final result:

code：

Screen Shot 2023-10-31 at 19.59.55.png

Screen Shot 2023-10-31 at 20.00.01.png

second demo in processing and arduino

We did one demo in Processing and Arduino, which can communicate with each other.

Ultrasonic sensor controls the color of the small square in Processing. This case is based on ultrasonic sensor, through the arduino output signal to control the color change of the small square in Processing, so as to realize the interaction between the software.

First make out the circuit diagram in the simulation software: Thinkercard.

In arduino, the Gao Diping signal in ultrasonic sensor is transmitted through serial port.

Screen Shot 2023-11-06 at 22.59.04.png

Import the serial library in Processing to accept serial signals from the arduino. Set the screen size and serial port information in Settings. Then set the position of the square and draw the square according to the signal. Enter a distance to select, and in the actual picture, there will be an animation that the color will change depending on the distance.

Screen Shot 2023-11-05 at 22.36.46.png

Coding on Arduino

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#define TrigPin 2 //控制端口
#define EchoPin 3 //返回端口
float Value_cm; //设定距离变量

void setup() {
  Serial.begin(9600); //初始化串口
  pinMode(TrigPin, OUTPUT); //定义TrigPin为输出模式
  pinMode(EchoPin, INPUT); //定义EchoPin为输入模式
}

void loop() {
  digitalWrite(TrigPin, LOW); // 将TrigPin设置为低电平
  delayMicroseconds(2); // 维持2微秒
  digitalWrite(TrigPin, HIGH); // 将TrigPin设置为高电平
  delayMicroseconds(10); // 维持10微秒
  digitalWrite(TrigPin, LOW); // 将TrigPin重新设置为低电平

  Value_cm = float(pulseIn(EchoPin, 1)*17)/1000; //将高电平脉冲时长转化为距离
  // Serial.print(Value_cm); //在串口监视器显示距高
  // Serial.println("cm"); //在距离后写上单位并换行
  int Val = Value_cm;
  Serial.write(Val);
  delay(1000); //延迟1000毫秒
}

Code writing on Processing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import processing.serial.*;

Serial myPort;  // Create object from Serial class
int val;      // Data received from the serial port
int colorBG;

void setup()
{
size(1000, 1000);
String portName = Serial.list()[0];
myPort = new Serial(this, portName, 9600);
textSize(32);
textAlign(CENTER);
}

void draw()
{
 if ( myPort.available() > 0) {  // If data is available,
   val = myPort.read();         // read it and store it in val
 }
 colorBG = val % 255;
 background(colorBG);  
 background(colorBG);
 fill(255);
 text(val,height/2,width/2);
// if (val > 15) {              // If the serial value is 0,
//   fill(0);                   // set fill to black
// }
// else {                       // If the serial value is not 0,
//   fill(204);                 // set fill to light gray
// }
//   rect(50, 50, 100, 100);
}

Final result:

Reference

视觉设计师的必备工具|processing介绍