Dynamic text scrambling function of Processing interactive programming development practice (don’t be too long, too much code, too many pictures)

What is the value of this article?

1. A brief introduction to Processing programming
2. Provide a Processing code based on mouse response animation
3. Highlight: Describe the important details of the implementation of the dynamic text scramble function, and make the source code public

1. What is Processing programming?

Here is ~~unofficial~~ Introduction: Processing is a simple and easy-to-use programming language and programming environment for the development of visually oriented applications. The creators of Processing see it as a code sketchbook. It is especially good at algorithm animation and instant interactive feedback, so in recent years, it has become more popular in interactive animation, complex data visualization, visual design, prototyping and production. Everyone likes this cute, intimate, simple and easy-to-use programming tool. Processing is based on Java, and its grammar rules are consistent with Java.

2. Getting started demo code

This blog post provides a link to learning Processing programming for free: The path to learn from the West here
is the promised mouse response animation code first:

void setup(){

size(400, 400);

}

 

void draw(){

background(#FFEE31);

pushMatrix();

translate(200, 200 - 60);

//eyes

PVector mouse = new PVector(mouseX, mouseY);

mouse.sub(200, 200 - 60, 0);

mouse.limit(7);

fill(0);

noStroke();

rectMode(CENTER);

rect(-1*40+mouse.x, -15+mouse.y, 15, 25, 8);

if(mousePressed)

rect(40+mouse.x, -15+mouse.y, 28, 10, 5);

else

rect(40+mouse.x, -15+mouse.y, 15, 25, 8);

//mouth

noFill();

strokeWeight(12);

stroke(0);

arc(0, 0, 150, 120, PI/4, PI-PI/4);

popMatrix();

//text

textSize(25);

textAlign(CENTER);

text("Enjoy your hacking with\nProcessing!\n I am LSS.", width/2, height/2+100);
println("We are the super star .Love is enough for me");

}

Paste and copy, save and run. If you haven't made any changes, the display should look like this:

Highlight: Realization of text scramble function

Since it is the highlight, it is better to recall the whole process of what happened at that time. The thing is like this. . . . . . . One day, I suddenly saw a task in a certain order group (a pie in the sky) and said that I would use java to imitate a certain web page to do a function (web page address is here: https://www.qqxiuzi.cn/zh /daluan/). It's not easy. You can choose JSP, HTML, JavaScript, and realize it in minutes. However, when I was pulled into a discussion group by the customer service, I found out that the customer actually wanted to use Processing, an interactive programming tool, to assist with Arduino control to make a small class work. So, why does the client say that this is a Java programming task? As mentioned in the blog post, the bottom layer of processing is written in java, so,,, right. I immediately went to Baidu to learn what the processing programming is in the mouth of the customer, emmm, it turned out to be a tool used by foreigners to teach their children intro to programming, but it is mainly used for interactive animation, dynamic data charts and other functions. , The thief is powerful. After simple learning, I ran my first "hello world" code in the local processing environment, and found that the development environment is very friendly (in fact, the rewards given by the customer are very tempting), and I am confident that the customer’s work Get it out. Finally, the negotiation is settled, the customer places an order, and I start work. The following is the body part.
In the first step, I first go to this website https://www.qqxiuzi.cn/zh/daluan/ to experience a so-called "text scramble" function, and then the customer said that the size of your interface is limited. It must be 585*828. Secondly, your Processing code needs to be able to receive the control data sent from the Arduino port (the control data is sent by a sensor, I don’t care about this). Every time it receives a control signal, it will scramble the text. Moreover, the paragraph style of the text cannot be changed, such as the line break position. Haha, there are quite a lot of requirements, but the customers are really good at talking. In this order task, the ability to communicate with people has also improved a lot. The needs of customers are not fixed, our technicians can clearly express, If a certain function point is "unscientific", we can use another way to achieve a similar function and so on.
The second step is to start solving customer problems. In fact, at that time, the whole process was not completely divided into finalizing task requirements details and various functional details, but adopted the "best practice model" of programming development (forgot what the term was): go online quickly, do it while you are Side change. At that time, the first job was to realize that the Processing environment could receive control data from the Arduino side. Fortunately, I have done 89C52 series MCU development (that is, light up a few running lights, control serial data transmission and reception), the arduino end data transmission and port part of the code is written by the customer, my side is mainly responsible for writing reception and display control The code of the signal is perfectly divided. The client's computer is a Mac Air, so the arduino serial port sending codes found on the Internet are all for the Windows operating system. It took two days to get the data reception.
The next task is to draw a frame. The text content in this interface cannot be displayed casually, and it has to deal with the pixel size. My goodness, this is the task of front-end or art, ,,, emm, it's okay, rich, whatever he does. Calculate the pixels, and finally draw the text box. Then start to enter the next step, dynamic refresh.
There is a draw() function in Processing. After the setup() function ends, this function runs infinitely in an endless loop by default, and it keeps refreshing the page automatically. This leads to a problem, that is, the text you displayed on the interface last time will be overwritten by the text after the next scrambled,,, about 3 seconds, the interface will be blurred, the original ideal, even if The interface is automatically refreshed. The text in the previous interface should disappear automatically. In reality, overlap does occur. This ghosting problem took another two days to solve, how to do it? On the one hand, the customer moved the background(0) background setting function from the setup() function to the draw() function, so that after each refresh, the interface background color must be reset once, and then the last text is magical It has disappeared in general. It is unbelievable and unscientific. This phenomenon cannot be explained by the Processing knowledge I have learned in three days. (Actually, for three days, I was only doing tasks in the morning, learning Processing, mainly to check the English version of the API, but also to check other people’s blog posts, to find ideas, what else should I do, I’m not doing this full-time After thinking about it, I am not going to go into this in depth. What's more, I have also found a solution myself, and it is recommended by the official API: the content to be displayed is saved using the text() method of a PGraphic object. This object has a clear() method to clear the text information of the object. The problem is solved by displaying this object on the interface.
Now that the ghosting problem is solved and the control signal from the arduino can be received, let's start writing a function to realize the text scramble function. My design is roughly like this: randomly swap the character positions in the text N times, and then send the text object out and display it on the interface. The difficulty is that the paragraph controls this style. If you don't consider this, you may specify the place where it was originally a space, and the characters will be displayed next time. This problem bothered me all morning. In the morning of the next day, I chose to display in segments, passing the pixel coordinates of the characters whose styles changed as parameters to the function I wrote. The phrase "isolate change and decouple" keeps ringing in your brain, so don't save your brain power if you can abstract.
Finally, the whole task was done, the code was sent to the customer, and Processing fell out of favor. In my programming language world, C# is used the most in the .NET environment, and the status of the Java development environment is gradually improving. It is only time to catch up with .NET Question, I occasionally molested the Python boa constrictor in my free time recently.

This is the part of the Processing code that I promised to mess with the text, welcome to copy and run

Function description: After running, every time you click the mouse, the text will be randomly shuffled and redisplayed.

  
String datas="第,一,编, ,艺,术,品,的,本,质,及,其,产,生, 41,由,此,我,们,可,以,定,下,一,条,规,则,：,要,了,解,一,件,艺,术,品,，,一,个,艺,术,家,，,一,群,艺,术,家,，,必,须,正,确,的,设,想,他,们,所,属,的,时,代,的,精,神,和,风,俗,概,况,。,这,是,艺,术,品,最,后,的,解,释,，,也,是,决,定,一,切,的,基,本,原,因,。,这,一,点,已,经,经,由,经,验,证,实,；,只,要,翻,一,下,艺,术,史,上,各,个,重,要,的,时,代,，,就,可,以,看,到,某,种,艺,术,是,和,某,些,时,代,精,神,与,风,俗,情,况,同,时,出,现,，,同,时,消,失,的,。,—,—,例,如,希,腊,悲,剧,：,埃,斯,库,罗,斯,，,索,福,克,勒,斯,，,欧,里,庇,得,斯,的,作,品,诞,生,的,时,代,，,正,是,希,腊,人,战,胜,波,斯,人,的,时,代,，,小,小,的,共,和,城,邦,从,事,与,壮,烈,斗,争,的,时,代,，,以,极,大,的,努,力,争,取,独,立,，,在,文,明,世,界,中,取,得,领,先,地,位,的,时,代,。,等,到,民,气,的,消,沉,与,马,其,顿,的,入,侵,使,希,腊,受,到,异,族,统,治，,民,族,的,独,立,与,元,气,一,齐,丧,失,的,时,候,，,悲,剧,也,就,跟,着,消,灭,。,—,—,同,样,，,哥,德,式,建,筑,在,封,建,制,度,正,式,建,立,的,时,期,发,展,起,来,，,正,当,十,一,世,纪,的,黎,明,时,期,，,社,会,摆,脱,了,诺,曼,人,与,盗,匪,的,骚,扰,，,开,始,稳,定,的,时,候,。,到,十,五,世,纪,末,叶,，,近,代,君,主,政,体,诞,生,，,促,使,独,立,的,小,诸,侯,割,据,的,制,度,，,以,及,与,之,有,关,的,全,部,风,俗,趋,于,瓦,解,的,时,候,，,哥,德,式,建,筑,也,跟,着,消,灭,。,—,—,同,样,，,荷,兰,绘,画,的,勃,兴,，,正,是,荷,兰,凭,着,顽,强,与,勇,敢,推,翻,西,班,牙,的,统,治,，,与,英,国,势,均,力,敌,的,作,战,，,在,欧,洲,成,为,最,富,庶,，,最,自,由,，,最,繁,盛,，,最,发,达,的,国,家,的,时,候,。,十,八,世,纪,初,期,荷,兰,绘,画,衰,落,的,时,候,，,正,是,荷,兰,的,国,势,趋,于,颓,唐,，,让,英,国,占,了,第,一,位,，,国,家,缩,成,一,个,组,织,严,密,，,管,理,完,善,的,商,号,与,银,行,，,人,民,过,着,安,分,守,己,的,小,康,生,活,，,不,再,有,什,么,壮,志,雄,心,，,也,不,再,有,激,动,的,情,绪,的,时,代,。,—,—,同,样,，,法,国,悲,剧,的,出,现,，,恰,好,是,正,规,的,君,主,政,体,在,路,易,十,四,统,治,下,确,立,了,规,矩,立,法,，,提,倡,宫,廷,生,活,，,讲,究,优,美,的,仪,表,和,文,雅,的,起,居,习,惯,的,时,候,。,而,法,国,悲,剧,的,消,灭,，,又,正,好,是,贵,族,社,会,和,宫,廷,风,气,被,大,革,命,一,扫,而,空,的,时,候,。,"+
",我,想,做,一,个,比,较,，,使,风,俗,和,时,代,精,神,对,美,术,的,作,用,更,明,显,。,假,如,你,们,从,南,方,向,北,方,出,发,，,可,以,发,觉,进,到,某,一,地,带,就,有,某,种,特,";

String[] Str = split(datas,',');

void firstly(int n){
  int ColNum = 0;
  int beginPixel= 276;
  for(int i=0;i<n+1 ;i++)
  { 
     if(i == 14){
        text(Str[i],284+ColNum*13+10,59);
        continue;
    }
    text(Str[i],beginPixel+ColNum*13,59);
    ColNum++;
  }
}

void secondly(int start,int end  ){
  int ColNum = 0;
  int beginPixel= 94;
  for(int i = start; i<end+1 ;i++)
  { 
    text(Str[i],beginPixel+ColNum*16,111);
    ColNum++;
  }
  
}

void thirdly(int start,int end){
  
    int ColNum=0,RowNum=0;
    int count=0;
    int beginPixel= 62;
    for(int i=start;i<end+1;i++)
    {
      if(count == 28)
        {
          ColNum=0;
          RowNum++;
          count =0;
        }
     text(Str[i],beginPixel+ColNum*16,131+RowNum*20);
     ColNum++;
     count++;
    }
}

void lastly(int start,int end1,int end2){
    int ColNum=0;
    int beginPixel= 94;
    for(int i=start;i<end1+1;i++)
    {
      text(Str[i],beginPixel+ColNum*16,610);
      ColNum++;
    }
    
     ColNum=0;
     for(int i=end1+1;i<end2+1;i++)
    {
      text(Str[i],beginPixel-28+ColNum*16,630);
      ColNum++;
    }
}

 
void disorder(int start,int end)
{
  String temp = null;
  for(int i=start;i<= end;i++){
     int randomNum1 =(int) random(start,end);
     int randomNum2 =(int) random(start,end);
     temp=Str[randomNum1];
     Str[randomNum1]=Str[randomNum2];
     Str[randomNum2]=temp;
   }
  
}


void setup(){
  size(585,828);
 // background(10);
  textAlign(LEFT);
 // myPort = new Serial(this, "/dev/cu.wchusbserial1450", 9600); 
  
  //this for() function is to display the indexes of different chars. It could be erased.
  for(int i=0;i<743 ;i++)
  { 
    print(Str[i]+i);
  }
  println(Str.length);
 
}

void draw(){
  background(10);
 
      firstly(14);
      secondly(15,40);
      thirdly(41,687);
      lastly(689,714,741);
 
 delay(2000); 
}

//the mousePressed() event used to test the functions above ,It could be erased too.
void mousePressed(){
  disorder(0,741);
}
  
  

Effect picture:

"siege"