Reference: Qiita does not print well. For those who want to print or convert to PDF, please see http://gurakura.sakura.ne.jp/hellomondrian/makecanvas/ (http://gurakura.sakura.ne.jp/hellomondrian/makecanvas/) Same content).
Even if you draw a picture with a program, it will not start unless there is a place to draw it. Let's start by making a canvas.
In Processing, if you just press the execute button without writing any program, a small window will be displayed. This window is the canvas, where the animations are drawn programmatically.
The size of the canvas (window) is set with a function called size. What is it even if it is suddenly called a "function"? You may have a question, but I will explain it one by one, but first enter the following program (also called code) and execute it:
size(400,300);
I think you've seen a larger window than when you ran it without writing anything.
Immediately after size, "(400,300)" is written. This is the argument (also called the parameter) of the size function. The size function is used as size (width, height). Both width and height are specified in pixels.
A pixel is a pixel. In English it is written as picture element. If it is shortened, it becomes pic-el, and when it is written as one word, it is written as pixel.
If you're not familiar with pixels, you can use Photoshop's magnifying glass tool to zoom in on the image and it will look like a mosaic of rectangles. Each of the rectangles is a pixel.
Quiet talk break. To summarize the explanation so far, the program piece size (400,300) tells the computer (or Processing) that the area to be drawn should be 400 pixels wide and 300 pixels high. It will not be. Of course, size (700,700) etc. will give you a square canvas.
If you get an error, check the semicolon (;) input. You must add size (400,300); and a semicolon at the end, not size (400,300).
To put it very roughly why we need something like this, size (400,300) is a "statement" that calls the size function with arguments 400 and 300. A semicolon is added at the end of the sentence to tell Processing that the sentence breaks.
The language used in Processing is Java, so if you want to know more about this area, please see Java reference books.
Why do I have to call a function called size to specify the size of the drawing target? Why can't I use makeCanvas or setCanvasSize? Some people may have such a question.
That is, the software called Processing is made by humans. Because it was not made by God. The point is that the creator (= the creator of Processing) decided that way, no more, no less.
Why is it a function called size that specifies the size of the drawing target? The question is, why is the magic of health recovery in Dragon Quest named Hoimi? It is the same as the problem, that is, because the creators (s) decided that way.
In this way, in programming learning, it is important to distinguish between what is logically derived and what is not logical, such as the name of the size function, because it is such a thing. There is no logical answer to the illogical part, even if you are wondering "Why does that happen?"
In high school mathematics, you may have seen the description such as y = f (x). f was the name of the function, and f (x) meant using x as an argument to the function f (remember?). The function called size is a function that requires two arguments. The description size (400,300) means to execute (also call, etc.) the size function, giving the first argument 400 and the second argument 300.
Functions in the Java language used by Processing and mathematical functions are not necessarily the same concept. However, I think it is similar in that you give a value as an argument and evaluate it. Is it something like "something" to call a function?
By calling the size function, there is a limit for each computer, and it means "within that limit" (unlimited freedom is hard to come by ...)-the size is You can now set it.
However, even when you select the actual canvas (canvas as a physical drawing target), I think that you are concerned about the material as well as the size. In particular, the canvas color is also an important factor when the entire canvas is not filled and the background color is also used.
In this section, we will explain how to set the background color of the canvas.
With the size function, I was able to specify (set) the size, but not the background color (window background color). Use the background function to specify the background color. There are various ways to use the background function, but here we will explain how to specify it using RGB values. How to use the background function
background(Value of R,Value of G,Value of B)
It will be. Each value of R, G, B specifies a value from 0 to 255. It is a good idea to check in advance what kind of RGB value will be what kind of color, such as Photoshop. For example, the color of ancient purple (Kodaimurasaki) is said to have R of 137, G of 91, and B of 138.
It's not limited to computers, but when referring to multiple values, Notations such as (R, G, B) = (137,91,138) are often used. This notation method will be used in this series as well.
100% white on a computer has a value of 255 for each of RGB. This is nothing but (R, G, B) = (255,255,255).
For example, to create a canvas of size 400 x 300 with a 100 % white background color (Note: the drawing area of size (400,300) may be shown this way), the program would be: :
background(255,255,255);
size(400,300);
When you run this program, you will see a window with a size of 400x300, filled with white inside.
So far, we have two functions. When will each function be processed (executed)? The program is basically executed in order from the top line to the bottom line. That is, for the list above, the size function is executed after the background function.
In a program, the order of processing (in this case, the order of function execution) is very important. Therefore, the following program and the program listed immediately above are completely different programs.
size(400,300);
background(255,255,255);
Just in case, try both. I think they both gave the same result.
Perhaps some of you may think, "The programs have different meanings, but there is no difference. It's strange. It's strange. I don't understand." In fact, in the world of programs, there are some different programs that have the same execution result.
In this case, it doesn't matter which of the process of specifying the canvas size and the process of specifying the background color is executed first. In this case, there is no correct answer, so please write it as you like.
This section concludes with the program I showed earlier that sets up a square canvas with an ancient russet background.
background(137,91,138);
size(400,300);
Recommended Posts