📜 ⬆️ ⬇️

Programming for beginners. My acquaintance with Processing

Good day, dear.

Digital electronic home-made products often interact with the computer. Transfer data, or controlled from it. In light of this, there has always been an interest in programming.
My past experience in this area is related to the BX ZX Spectrum interpreter, Qbasic in the framework of the hobby of youth and C-86 in the framework of studentship. There have been attempts to master ECMAScript in terms of interest in the VRML language. There was a question what to choose now?

I ask under the cat.

Reading articles about rapidly developing languages ​​caused sad thoughts. All these Go, Delphi, Pearls, PHP, Java. About pythons, so I generally until recently was sure that this is a kind of snake. In general, abundance and diversity. In which I, as a beginner, it is difficult to understand who is who, and for what tasks. How does Java, for example, differ from JavaScript?
')
My fruitless reflections would go on and on. But I read the post of resource Izokod about their series of articles "Binaria Peninsula". About language Processing. Interested. As part of his interest in Arduino, he met several times about him in tutorials. There were doubts. After all, it requires Java machine. Oracle encountered this creation by installing one of Minecraft’s favorite son games. And there were problems with him. Home computer old on Athlone 1,3. RAM memory half gig (now one and a half). And the extreme version of this game can not be run. For it requires an extreme version of Java, which no longer works on this hardware.

Doubts of the plan: Java will not work here, for various reasons. From iron to sanctions. And then what to do? Or, why my browser Firefox is scolding about the detection of danger, and transparently hints "Bro, in general, I warned you ..."

Began to read articles Izokoda. I really liked them. Simplicity and magic of presentation. Association of the young programmer with the island. Epilogues. He began to read to his son, and he also caught fire. I think the presentation style well compensates for the difficulty of perceiving new concepts for a beginner by the intrigue of comparing it with a growing island. Stimulates his interest, plays on vanity. And when the read is embodied on the screen in the code and the result, generally absorbs it. But, also, one of the epilogues made me think hard about the expediency of studying by my son: “Before, it does not mean on time.” Therefore, I have so far suspended this area of ​​our joint research. But he did not stop himself.

So. Set Wednesday. Java was already standing. Launched. Everything is familiar from the Arduino IDE. I typed one example from the article. Drawing a heap of yellow circles with random coordinates. Hmm ... the syntax is painfully familiar ... Yes, this is C! Launched. Hit the speed of the program. And this is on my Samsung Samsung NC-110, with a gigabyte of RAM and a miserable image of the graphics subsystem. The curiosity of the Russian peasant from a joke about a Japanese chainsaw was drawn to experiments. Increased by 10 times the number of points in the loop. Zipper, said my humble laborer. Hmm ... Increased 100 times ... Vvvik, he repeated. Increased 1000 times. There is already my netbook significantly subsided by the speed of execution of the code. Nevertheless, I was pleased. Began to load examples. Those with graphics, of course slowed down. I tried to compile one of the examples in EXEChnik. And it turned out that the sketch compiled into an EXE does not start. Two windows popped up.

In one “C: \ ProgramData \ Oracle \ Java \ javapatch \ javaw.exe Unknown error”.

The second is with the title “Processing error”, with the text “Error calling ShellExecuteEx ()”.

Next were the classic actions of a novice programmer. Headlights rubbed, wheels kicked. I searched the site processing.org, tried to find chat programmers. But there were not programmers, but young concerns. Desperate to find the answer, he began to ponder over the eternal Russian question. And so it happens! A properly formulated question contains half the answer. And I solved my problem. Well I was looking not there! In Program Files. And it does not require Program Files, but ProgramData! The folder was with the attribute hidden. Climbed. They found the required subfolders, but! In the javapath folder are not the files themselves, but shortcuts to them. I could not edit the properties, in particular, specify the working folder. Got into the java folder. C: \ Program Files \ Java \ jre1.8.0_25 \ bin \ There I found the required program, and created with it a new shortcut in C: \ ProgramData \ Oracle \ Java \ javapatch \ This did not help. Then I just copied it, and the others, which were shortcuts, in this folder. And it all worked!

Reading the first chapters with my son, we figured out how to draw a circle, fill it with the desired color, use the mouse, the coordinates of the cursor and the buttons. Son liked drawing with the mouse. He even dabbled in coloring programs, photoshop. And here. Drawing in the program written by us! Required from my mother to see. And I had an idea. Why not try to write a graphic editor a la paintbrush?

The first version fit in 30 lines of code. It already had a choice of color and diameter of the brush. Son liked even more. Of course, exactly 30 lines were not an accident, but the pursuit of trends :) Because the code was a mess.

At the moment there are almost 300 of them. But not because the program has become super heaped up. And because I try to get away from the trash-style writing. After, in this mess, even the most impossible to understand. What is done? Made the panel to select the color and size of the brush. And to them call buttons. The number of color samples is now 8. At 4 on the left and right mouse button. Each sample has its own brush. So far, only the spot diameter. The plans scaling spots on X and Y, the distance between strokes. The left button selects the color to be changed, the right button - active for the lion. right buttons when drawing. Not finished saving the image in BMP format. Honest 16+ million colors. Not enough numeric information. For example, the size of the brush, the coordinates of the cursor in the drawing field. This is also in the plans. In the plans there is also a pipette for determining the color, a stamp for copying, blurring - it is not enough for drawing. Various forms of brush stains, different paint algorithms. The main one is a uniform tone, without multiple imposition of a stroke at one point, even with color transparency. There are not enough vectors for drawing straight lines. And still not enough Undo. Made a clearer logic of work. Now the color does not go astray if you fly out of the drawing field to the color selection panel. As the size of the brush does not go astray. But there are mistakes. Not yet fixed. But not manifest explicitly. Functions in this language, as in C. Functions are subroutines. Very comfortably. Wrote a function that receives parameters when calling. She completed the prescribed, returned the result. Moreover, the prescribed prescribed not hard, but may be selected depending on the values ​​of the parameters during the call. Or did not return anything, but changed the values ​​of global variables. Or redraw something on the screen. Gurus say that global variables are evil. But I have nowhere without them. Initially, my program was monolithic. And the most difficult part was checking the conditions where the cursor is, what is pressed. When it was 30 lines of code - everything was clear and understandable. But with the increase in the number of "features", more and more repeating pieces of code began to appear. And I decided to use functions. And then it broke. A slender monolithic program exploded into a couple of dozen separate pieces - functions. I really wanted to keep the program running all the time. Scarecrow the opportunity to make a mistake, and no longer understand what, where, where, why? But gradually everything returned to normal. And even more. Optimized! Now the same function both changes the color and the parameters of the brush. And, for sure, it will also be applied to other panels if they appear. Another universal function redraws the position of the sliders on the scrollbars. The third displays 8 colors, the selected color to change, the active colors for the mouse buttons. In the process of testing began to identify limitations. The resolution of the created images is 72 pixels per inch. And at the slightest increase it is immediately visible. But the editor was positioned a la PaintBrash, and not a la Photoshop. It is worth noting that I read only 3 chapters of the book “Binaria”. And I think that having such limited knowledge, the result is still quite good. The program listing will be attached at the end of the article. The algorithm is clear from the comments. I usually write at night. When my beloved chief beta tester is sleeping. Do not distract attention to their interests. And there are a lot of them. I see the point to say this:

1) Everything, literally everything, needs to be commented! Not only what function does it, but literally every line! Otherwise, the next night you look at your own code, like a ram at a new gate. You understand what you want, but you do not understand where, what needs to be changed to realize. The code works. But you do not understand how! It is necessary to backup. Debugged something in the program. The program works. It is necessary to make a copy - backup. To, if everything goes really bad, be able to return. This is especially important when making large changes. Changing the logic of work, adding large functions.

2) Desires need to be consistent. Ideas come herds. You start to think about them - you lose the thought of what you are doing and why.

3) Need to plan. The program should not start with the kernel that works. And with the tasks that it will solve. After the interface sketch, after the flowchart of the algorithms. As the main program - in general terms, and subroutines - in detail. So it's easier to figure out what, where, where, why. Otherwise - the inevitable rewriting up to 60% of the code! When an already implemented cardinally changes under the new program structure, under the invented universal functions.

4) Fourth, but in fact the main thing. Need to write! We must try, make mistakes, understand, correct. You will never be able to read a hundred books on a topic, and then sit down and write a program "from and to". But this, of course, is my personal opinion. Opinion amateur. And this fourth does not contradict the third. Even with a clear plan for the future program, it’s impossible to write right away without errors.
What more to say? Very mixed feelings. On the one hand, growing self-confidence, on the other hand, the realization that the program is growing rapidly. On the one - the desire to continue to improve their "child". On the other - the realization that it is unlikely to ever surpass the capabilities of the monster Photoshop. So, it is not the result that is important, but only the process. Fixation in the head studied. In order to be able to explain to the son later. Help in learning the language. The realization that the following chapters of Binaria must be read. What is written at the moment is my limit. But far from the limit of this language.

In conclusion, my drawing, made in the program. Hastily. Now he is a permanent screen saver on his son's tablet. Here it is shown as a screen-dump; on the tablet, of course, the toolbar is cropped by photoshop.



A couple of drawings of the main beta tester, made in the process of working on the program.





And a screen dump of the work of his program. Painting nine Easter eggs. Every time new shades of color. Very simple program. Less than a dozen lines. But the purpose of each command and variable in it, he can explain himself!



Program listing
boolean ris = false; // .    boolean sel_col = false; // .      boolean sel_kist = false; // .      int num_color = 0; //  . 8 .   int color_active_left = 0; int color_active_right = 1; //      int num_panel; //        // 4   8 . RGB  8  int [] colr = new int [8]; int [] colg = new int [8]; int [] colb = new int [8]; int [] proz = new int [8]; // 4   8 .  ,   X  Y,    int [] r = new int [8]; int [] scale_x = new int [8]; int [] scale_y = new int [8]; int [] distanse = new int [8]; //  ,    ,         int zader = 1000000000; int nabor; void ris_main_menu () //   { fill ( 20, 20, 20); rect ( 0, 0, 65, 600); //    //     fill (20, 20, 20); stroke (200, 200, 200); rect (3, 5, 15, 15); noStroke (); fill (255, 0, 0); rect ( 5, 7, 3, 11); fill ( 0, 255, 0); rect ( 8, 7, 3, 11); fill ( 0, 0, 255); rect (11, 7, 3, 11); for (int a= 3; a < 14; a++) {//         int b = a * 17; stroke (b, b, b); line (15, 20 - a, 16, 20 - a); } //     fill (20, 20, 20); rect (22, 5, 15, 15); fill (200, 200, 200); ellipse (29, 12, 8, 8); fill (20, 20, 20); rect (41, 5, 15, 15); fill (200, 200, 200); rect (44, 8, 9, 9); //      fill (50, 50, 50); rect (47, 11, 3, 3); stroke (50, 50, 50); line (48, 9, 51, 9); } void disp_sel_col () //         2   4  { cls_sel_col (); //     noStroke (); fill (0, 0, 0); //  ,   for (int i = 65; i <= 119; i = i + 18) //    8     2   { rect (5, i, 21, 16); rect (35, i, 21, 16); } for (int i = 0; i < 8; i+=2) //    4      { if (num_color == i) //      -    {stroke (200, 200, 200); } else {noStroke ();} //  -    fill (colr [i], colg [i], colb [i], proz [i]); rect ( 5, 65 + i * 9, 21, 16); //         -     if (i == color_active_left) {noStroke (); fill (240, 0, 0); ellipse (30, 73 + i * 9, 5, 5);} } for (int i = 1; i < 8; i+=2) //    4      { if (num_color == i) {stroke (200, 200, 200); } else {noStroke ();} fill (colr [i], colg [i], colb [i], proz [i]); rect (35, 56 + i * 9, 21, 16); //         -     if (i == color_active_right) {noStroke (); fill (240, 0, 0); ellipse (60, 64 + i * 9, 5, 5);} } //     -        if (sel_col == true) {ris_polz (colr [num_color], colg [num_color], colb [num_color], proz [num_color]);} //     -        if (sel_kist == true) {ris_polz (r [num_color], scale_x [num_color], scale_y [num_color], distanse [num_color]);} } void ris_col_bar () //    { cls_pan_instr (); ris_polz (colr [num_color], colg [num_color], colb [num_color], proz [num_color]); for (int i=255; i>=0; i--) //    4      { stroke (i, 0, 0); line (5, 400-i, 10, 400-i); stroke (0, i, 0); line (20, 400-i, 25, 400-i); stroke (0, 0, i); line (35, 400-i, 40, 400-i); stroke (i, i, i); line (50, 400-i, 55, 400-i); } } void ris_sel_kist () //    { cls_pan_instr (); ris_polz (r [num_color], scale_x [num_color], scale_y [num_color], distanse [num_color]); for (int i=255; i>=0; i--) //    4     { stroke (200, 200, 200); line (5, 400-i, 10, 400-i); line (20, 400-i, 25, 400-i); line (35, 400-i, 40, 400-i); line (50, 400-i, 55, 400-i); } disp_sel_col (); } void cls_pan_instr () //    {noStroke (); fill (20, 20, 20); rect (0, 145, 65, 450);} void cls_polz () //    { noStroke (); fill (20, 20, 20); for (int i = 11; i < 57; i = i + 15) {rect (i, 140, 9, 265);} } void cls_sel_col () //    8  { noStroke (); fill (20, 20, 20); rect (2, 63, 63, 75); } void ris_polz (int r, int g, int b, int p) //   { cls_polz (); noStroke (); fill (200, 200, 200); triangle (12, 400 - r, 16, 396 - r, 16, 404 - r); triangle (27, 400 - g, 31, 396 - g, 31, 404 - g); triangle (42, 400 - b, 46, 396 - b, 46, 404 - b); triangle (57, 400 - p, 61, 396 - p, 61, 404 - p); } void sel_num_col (int x, int y) //     .  X  Y //  -    ,  -  . //   -  ,   -   { for (int i = 0; i < 7; i++) { if (x >= 5 && x <= 26 && y >= 65 + i * 9 && y <= 81 + i * 8) { if (mouseButton == LEFT) {num_color = i;} else { if (mouseButton == RIGHT) {color_active_left = i;} }} if (x >= 35 && x <= 56 && y >= 65 + i * 9 && y <= 81 + i * 8) { if (mouseButton == LEFT) {num_color = i + 1;} else { if (mouseButton == RIGHT) {color_active_right = i + 1;} }} } disp_sel_col (); } void select_value (int x, int y, int num_panel) //      { //    4 ,       //     -   ,    -  , //   X  Y,    if (sel_col == true | sel_kist == true) { int [] a = new int [4]; if (num_panel == 0) { a [0] = colr [num_color]; a [1] = colg [num_color]; a [2] = colb [num_color]; a [3] = proz [num_color]; } else { if (num_panel == 1) { a [0] = r [num_color]; a [1] = scale_x [num_color]; a [2] = scale_y [num_color]; a [3] = distanse [num_color]; } } //       ,       for (int i = 0; i < 4; i++) { if (x >= 5 + i * 15 && x <= 15 + i * 15 && y >= 145 && y <= 400) {a [i] = 400 - y;} } //         if (num_panel == 0) { colr [num_color] = a [0]; colg [num_color] = a [1]; colb [num_color] = a [2]; proz [num_color] = a [3]; } else { if (num_panel == 1) { r [num_color] = a[0]; scale_x [num_color] = a[1]; scale_y [num_color] = a[2]; distanse [num_color] = a[3]; } } ris_polz (a [0], a [1], a [2], a [3]); //   disp_sel_col (); //    } } void setup() {//   RGB  ,  for (int i = 0; i < 8; i++) { colr [i] = (i + 5) * 10; colg [i] = (i + 5) * 12; colb [i] = (i + 5) * 16; proz [i] = 255; } size(1000, 550); //   background (0,0,0); //   frameRate (20); ris_main_menu (); //    ( ) disp_sel_col (); //    } void draw() { if (mousePressed && ris == false) //       {//       if (mouseX >= 3 && mouseX <= 15 && mouseY >= 5 && mouseY <= 15) //   , .    ,     {ris_col_bar (); sel_col = true; sel_kist = false;} else { //       if (mouseX >= 22 && mouseX <= 37 && mouseY >= 5 && mouseY <= 15) //   , .    //    - .     {ris_sel_kist (); sel_kist = true; sel_col = false;} else { //       if (mouseX >= 5 && mouseX <= 56 && mouseY >= 65 && mouseY <= 135) {sel_num_col (mouseX, mouseY);} //     .     ,   //    ,     else { if (sel_col == true && mouseX >= 5 && mouseX <= 55 && mouseY >= 145 && mouseY <= 400) {num_panel = 0;} if (sel_kist == true && mouseX >= 5 && mouseX <= 55 && mouseY >= 145 && mouseY <= 400) {num_panel = 1;} select_value (mouseX, mouseY, num_panel); // else { //      // if (mouseX >= 70 && mouseX <= 120 && mouseY >= 25 && mouseY <= 75) // {save ("KARTINKA.bmp");} }}} //   "else" } //  "     " //           X    //  -   +    //  !!!     ,       / . //         if (mousePressed && mouseX >= 65 + r [nabor] / 2) { ris = true; // . .          //      if (mouseButton == LEFT) {nabor = color_active_left;} //    -    else { if (mouseButton == RIGHT) {nabor = color_active_right;} //    -    } //    ,           noStroke (); fill (colr [nabor], colg [nabor], colb [nabor], proz [nabor]); ellipse (mouseX, mouseY, r [nabor], r [nabor]); //   //      .      //    } else { //     -  .   "" if(!mousePressed){ ris = false;}} } 



I will mention the books I have found on this language in Russian:
“Learning to Program with Processing” - by: Casey Reas / Ben Fry / Ben Fry - 6.89 MB
"Processing 2: Creative Programming" - author: Jan Vantomm - 15.8 MB

Source: https://habr.com/ru/post/260763/


All Articles