preface
At present, the field of graphics is a very interesting and promising direction. When we understand its basic knowledge and get to know its interesting places, we can easily extend to the field of visualization. This article will try to introduce to you in a very popular and detailed way, and I hope readers have gained.
Let’s take a look at some interesting photos
Images like this one of parabola, Archimedes spiral and star lines, and this random tree were drawn using some simple math, and I’ll use detailed code to make these images.
directory
Since this is the basic introduction of this series, I will start with the two parts of basic graphics and basic mathematics:
Graphics based
On the Web, graphics are usually drawn in a browser. Modern browsers are complex systems in which the part responsible for drawing graphics is the rendering engine. Rendering engines draw graphics in roughly four ways.
1. Traditional HTML + CSS
Compared with traditional Web applications, visualization projects, especially the large screen display of VISUALIZATION on PC side, use RELATIVELY few HTML and CSS scenes. Therefore, some people may mistakenly think that visualization can only use SVG and Canvas instead of HTML and CSS. Of course, that’s not true.
In fact, the modern browser HTML, CSS performance is very powerful, in fact, some simple visualization chart, can be fully realized with CSS, such as, we common bar chart, pie chart and line chart. Can simplify the development, and do not need to introduce additional libraries, can save resources, improve the speed of web page opening.
But there are some drawbacks to using HTML + CSS:
1) Maintenance trouble, in the CSS code, we can hardly see the corresponding relationship between data and graphics, there are a lot of conversion also need to do their own developers. As a result, if the chart or data changes, we need to recalculate, so it can be difficult to maintain.
- The performance overhead is very high. HTML and CSS are part of the browser rendering engine, and there is a lot of extra work to do in addition to drawing graphics in order to complete the page rendering. For example, when a browser’s rendering engine works, it parses HTML, SVG, AND CSS, builds DOM trees, RenderObject trees, and RenderLayer trees, and then draws in HTML (or SVG). When the graph changes, we will most likely have to redo the entire work.
Is there a better way to do that, when we’re redrawing an image, we don’t have to reparse the document and build the structure, and of course we do, and we’ll talk about that later.
2. SVG
SVG is an image format supported by browsers based on XML syntax. Its XML language itself is very similar to HTML, which is composed of tags and attributes. CSS and JavaScript of browsers can work normally on SVG elements.
3. canvas2D
Next comes the focus on graphics basics, canvas2D, and most of the subsequent math basics sections are drawn on this basis.
Here is the difference between its declarative drawing system and instruction drawing system:
1) Declarative drawing system: We create various graphic elements (or CSS rules) from the data, then use the browser rendering engine to parse them and render them.
2) Command drawing system: it is more of an API provided by the browser that can draw graphics directly on a flat canvas with code. Using it to draw is more like traditional “writing code”. In simple terms, it is to call drawing instructions and then the engine directly draws graphics on the page.
To sum up, as shown in the figure below, Canvas can directly operate the drawing context without a series of operations such as HTML, CSS parsing, rendering tree construction and layout. Therefore, for simple drawing, Canvas is much faster than HTML/CSS and SVG, and there is no process of re-parsing documents and building structures when redrawing images, which costs much less.
4. WebGL
We are not going to focus on webGL here. Here we briefly describe its usage scenarios:
In the first case, if we have a very large number of graphics to draw, such as tens of thousands of geometric shapes to draw, and their positions and directions are constantly changing, if we use Canvas2D to draw, performance will reach a bottleneck. At this point, we need to use the GPU capability and draw directly with WebGL.
In the second case, if we want to pixelate the details of a larger image, for example, to achieve light and shadow effects on objects, fluid effects, and some complex pixel filters. Since these effects often accurately change all pixels in the global or local area of an image, the number of pixels to be calculated is very large (usually hundreds of thousands or even millions of orders of magnitude), so we also use WebGL to draw.
The third case is to draw 3D objects. Since WebGL has built-in features such as projection and depth detection of 3D objects, rendering 3D objects with it does not require us to do our own low-level coordinate processing. In this case, WebGL has a huge advantage both in terms of usage and performance.
In order to use WebGL drawing, we have to go into detail, in other words, we have to work with memory and GPU to really control every detail of the graphics output.
The data is processed by the CPU (central processing unit, responsible for logical calculations) into geometric information with a specific structure. The information is then sent to the GRAPHICS processing unit (GPU) for processing. Raster information (the matrix of pixels that make up the image) is generated in the GPU in two steps, and this raster information is output to the frame cache (a block of memory address), and finally rendered to the screen.
A GPU is made up of a large number of small processing units, which may not be nearly as powerful as a CPU, but are so numerous that each unit can handle a simple task. Even if we’re dealing with an 800 by 600 image, the GPU can make sure that each of those 480,000 pixels corresponds to a small cell, so we can evaluate each pixel at the same time.
Notice here that Default levels are highlighted in red. Verbose (Verbose),Info (Info), Warnings (warning), and Error (Error) are sorted by severity levels. We can Filter the information printed by the console by selecting the drop-down box with the function of Filter.
Mathematical basis
1.1 Coordinate System and Vector To canvas as an example to achieve coordinate system conversion
Here, first of all, I want to start with for coordinate system transform, then why do I need to speak of coordinates transformation problem: because conversion coordinates for graphics rendering, is so important, follow-up is necessary for all the drawings of this idea, why we start with a specific before with the graphics in the front see:
First of all, after a coordinate point conversion, we get the specific coordinates of each point (here I used a Rough. Js library to draw a hand-painted style image), and finally calculate the coordinates of the top of the mountain are (-80, 100) and (80, 100). The coordinates of the base of the mountain are (-180, 0), (20, 0), (-20, 0), (180, 0), and the coordinates of the center of the sun are (0, 150).
The coordinate system change scheme is as follows:
1: First, we use the Translate transform to move the coordinate origin of the Canvas Canvas from the top left point (0, 0) to position (256, 256), that is, the midpoint of the bottom edge of the Canvas. Then, with reference to the new coordinates after the origin has been moved, flip the part of the Y-axis downward, that is, y>0, 180 degrees along the X-axis by scale(1, -1), so that the coordinate system becomes a coordinate system starting at the center of the bottom of the canvas, X-axis to the right, Y-axis to the top.
2: The coordinates of the top of the mountain are (-80, 100) and (80, 100), the coordinates of the bottom of the mountain are (-180, 0), (20, 0), (-20, 0), (180, 0), and the coordinates of the central point of the sun are (0, 150).
3: Actually this idea is very important, because this example needs to draw very few graphs, so it is not very good to use coordinate system transformation. However, consider that in many application scenarios we are dealing with hundreds or thousands of graphics. If at this time, we in the original coordinates by calculating the vertex to draw the graph, the calculation will be very large, very troublesome. Using coordinate transformation is a good optimization idea, it can simplify the calculation, which not only makes the code easier to understand, but also saves CPU calculation time.
1.2 Coordinate system and Vector Description of points and line segments (Basic)
No matter what drawing system we use to draw a graph, the general geometry is made up of points, line segments and surfaces. Among them, point and line segment are basic meta information, so how to describe them is the key of drawing. Now that I’m done with transformation coordinates, I’m going to take you to the basics of vectors in mathematics
Here’s some code to show some vector basics:
Now let’s do the real thing, using vector knowledge to draw a random tree, where the branches are randomly oriented.
1: The first step is also a very important coordinate transformation. Here, the transformation we want to do is to move the origin of coordinates from the upper left to the lower left, and flip the Y-axis to up.
2: We define a function called drawBranch to draw branches.
3: Create a unit vector (1, 0), which is a vector of length 1 facing the X-axis. And then we rotate dir radians times the length of the branches. In this way, we can calculate the end coordinates of the branches. (Here I encapsulate a class Vector2D that defines a number of methods, including vector rotation)
4: We can recursively rotate the branch from an initial Angle, splitting the branch into two left and right branches at a time. So what we get is a regular tree.
5: We modified the code and added a random factor to make the new branch generated iteratively have a random deflection Angle. So, we get a random tree.
1.3 Vectors and parametric equations describe the curve
Then we move from vectors to parametric equations:
1: The method of vector polygon drawing polylines is used to draw a regular polygon. When the number of sides of the polygon is very large, the graph will be close to a circle. By setting the number of sides of the polygon to be large, we can draw a circle.
2. Since it is difficult to accurately determine the position and size of the graph, and the conversion process is complicated, it is easy to make mistakes. However, in order to draw more diverse and more curve styles, we need to choose a better model, which will naturally lead to parametric equations.
1.3.1 Basic graph of parametric equation
Next, I will introduce you to the basic concepts of parametric equations. First, I will take circle and ellipse for example. Their parametric equations are quite similar.
In the implementation of the parametric equation, HERE I set the number of points in TAU_SEGMENTS to 60, spread evenly over 2π (360 degrees), which can be interpreted as how many coordinate points the circle or ellipse is plotted out of, and then add each coordinate point to the array. I then return the coordinates of the 60-point array to the draw function that I’ll wrap next.
So again, the parametric equation of a parabola, when x0,y0 is 0, t is equal to x over y, which is what t means by x divided by y
I’m going to put our code together in a little demo, which I showed you at the beginning of this presentation, with parabolas, Archimedes spirals, and stars.
If we implemented a function for each curve, it would be very unwieldy and tedious. For convenience, here we use the idea of functional programming, packaging a simpler javascript parameter equation drawing module, in order to draw different curves.
Then the use process of the encapsulated drawing module is mainly divided into three steps:
In the first step, we implement a higher-order function called parametric, whose parameters are the parametric equation of x coordinate and the parametric equation of y coordinate respectively.
Parametric function takes several parameters, such as start, end, the key parameters in the parametric equation, seG, the number of sampling points, etc. In the following code, when seG defaults to 100, 101 (SEg +1) points are sampled in the start and end ranges, and subsequent parameters are passed to the parametric equation as constants.
Step 3, after we call parametric, it returns an object. This object has two properties: points, which is the vertex data it generates; The other is the draw method, which we can use to draw
Here, we do not need to realize a corresponding function for each graph line as before, we just need to call the encapsulated higher-order function, pass in our parameter equation, and finally call the draw function for drawing.
In this case, a lot of interesting graphics can be drawn through the wrapped javascript parameter equation drawing module.
1.4: Affine Transformation — Expanding understanding
Now, affine transformations are actually one of the mathematical basics of graphics, but for the sake of time, I’m going to give you a brief overview of the basic concepts.
Let’s focus on application scenarios, pain points, solutions and affine transformations.
Earlier we learned how to describe curves and polygons in terms of vertices represented by vectors. But in the actual drawing, we often need to draw many shapes with the same outline on the canvas. Does this require us to repeatedly calculate the vertices of each shape? Of course not. We just need to create a basic geometric outline and then change the position, shape, size and Angle of the geometry by affine transformation.
Affine transformation is a very important basic concept in topology and graphics. Using it, we can quickly draw many geometric shapes of different shapes, positions and sizes in visualization applications. So we’re going to talk about the mathematics and the basic operations of affine transformations, which are going to be very important in all the cases of visual representation in the next sequel.
The basic concept of affine transformation, you remember, is linear transformation plus translation and linear transformation is subdivided into rotation and scaling, which sums up to translation, rotation plus scaling.
In summary, the sum is the expression on the left, which is optimized by publicity to the matrix form on the right. In the rewritten formula, we actually add a dimension to the linear space. In other words, we represent a lower-dimensional affine transformation with a higher-dimensional linear transformation!
Taking particle animation application scenarios for example, this formula is very important. It can generate many small graphics with random movement within a certain period of time. This kind of animation usually achieves the effect of gaining users’ attention by giving people a visual shock.
conclusion
In the overall rapid development of the front-end environment, driven by product demand, the development of graphics technology is also very rapid, front-end graphics belongs to a relatively small field, and even extends to the visual direction still belongs to a relatively small field, so what is the real barrier to the technical threshold?
In fact, the mathematical foundation of users is relatively high, but when we really break through the technical threshold, and even break through the lower threshold of WebGL in the direction of visualization, we will be very competitive in the industry.
So this article will introduce you to the basics of graphics first, and then extend to animation, filters and other visual basics in the next series. Here I would like to share a word with you. The process of learning technology begins with the acceptance and memory of knowledge. However, it is not only the acceptance and memory of knowledge, but the need for in-depth thinking, and their own summary and precipitation.
The resources
www.cnblogs.com/miloyip/arc…
zhuanlan.zhihu.com/p/98007510
zhuanlan.zhihu.com/p/69069042
Developer.mozilla.org/zh-CN/docs/…
Time.geekbang.org/column/intr…