Shulou(Shulou.com)06/01 Report--

This article is about how to achieve a Net js library from line art to DIY. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article.

I came across a visual work today:

WHAT MADE ME?

INTERACTIVE PUBLIC INSTALLATION

Most Original Exhibit Award at the Birmingham Made Me Design Awards 2012.

The work revolves around the concept of information visualization and displays it in the form of large and complex data graphs generated by tourists themselves. it is an exhibition device that integrates information visualization and interactive experience.

Explore portraits of Birmingham people by asking visitors five simple questions:

What makes you think?

What makes you create?

What makes you angry?

What makes you happy?

What made you change?

Each question will correspond to a different color and can be answered by connecting relevant words and colored lines.

Hundreds of options are displayed alphabetically in the grid, giving participants a variety of optional answers.

This design form is the use of color straight lines to form density changes to achieve a good visual effect.

The design element of straight lines is loved by many designers, such as concatenating text and patterns with lines:

Also, line drawing illustration:

More creative icons:

And then there are the gif diagrams created by ACELAND artificial intelligence designer:

Designers are skillful, loving and creative in the use of lines.

This form is also used in web pages.

Here, let's implement one and expand it a little bit, for example, colored lines:

The idea of realization is:

Generate a certain number of particles in the canvas range

Connect particles with wires

Keep the particles moving within the canvas.

Start tapping the code:

1 simply set a css style and canvas tag:

In the body tag, write a canvas tag.

2 is encapsulated into a JS library

I want to encapsulate it into a Net constructor that, when called, generates a Net by passing in canvas and some parameter configuration.

Configurable parameters:

Number of particles

Particle moving speed

Range of particle motion

Line color

Particle color

Background color and so on.

Here is the design of some methods:

The whole logic is divided into two parts, init and move:

Init:

1 generate particle swarm through createPoints according to the option parameters passed in

2 initialize canvas through clear, such as setting background color and clearing other elements on the canvas

3 draw particle swarm through drawPoints

4 connectPoints connects particles to form a reticular structure

The results are as follows:

Move:

5 reset the canvas with clear first

6 move the particle swarm through movePoints

7 connect the particles again through connectPoints to form a reticular structure

After calling move successively, you can have the following effect:

Among them, movePoints has two points to pay attention to. We need to move each particle through moveArea and movePoint, and determine the direction in which the particles are moving. After updating the position of the particles, we call drawPoints to draw all the particles again.

MoveArea determines the direction in which particles move:

MovePoint updates the coordinates of the particles based on the direction of movement:

3 upgrade version:

+ gradient color

Modify the color in the connectPoints method as follows:

+ linewidth change

Similarly, modify the connectPoints method to add the coordinates of a midpoint:

Draw a straight line to draw a triangle:

Test the effect.

New Net (canvas, {num:2})

As follows, it is found that the midpoint deviates too far from the connection, and the parameters of mx and my can be adjusted to make them smaller.

After adjustment, try again:

The following effects can be achieved:

Thicken the thread and try a few colors.

+ interactive events of the mouse

This is equivalent to recreating a particle with a fixed or random value as the radius, and push into the swarm we created earlier.

Bind mouse listening events to canvas:

Canvas.addEventListener ('click', function (e) {

Let x=e.clientX

Y=e.clientY

Net.addPoint (XBI y)

})

In this way, you can add particles at will.

+ multiple line colors

In createPoints, set different line colors to different point, and then draw lines according to the line color of point in connectPoints.

The above is how to realize a js library of Net from line art to DIY. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.