Example of Canvas drawing floating ball effect

Recently, I have been paying attention to blockchain information, wandering around, and accidentally saw the effect of the homepage of this website. It is a bunch of floating balls. When the ball is close, there will be a sensing line connected to it. The mouse can also create a sensing line with the ball. Look The following is made using canvas.

Original effect

achieve effect

I have had a lot of contact with svg before, and I know that canvas can also achieve very powerful rendering effects, but there have never been any usage scenarios that gave me a chance to get started. So this time I plan to try it myself.

In addition, the reason why I am interested in this is that one is that I like visual effects, and the other is that I like the feeling of simulating the physical world like a game engine. Just imagine that these balls will collide with each other, or have gravitational repulsion between each other, or increase the Factor in gravity. This animation can also open up a lot of imagination.

See the github repo here.

The drawing instructions of Canvas are very similar to the instructions in SVG, very simple.

 ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

beginPath starts a path, arc draws a circle, and fills it with color.

 ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.stroke();

Similarly, beginPath starts a path, moveTo moves the brush to the starting point, lineTo draws the line to the end point, and stroke strokes.

To keep the canvas full screen, just reset the width and height of the canvas when window onload or onresize.

 var canvas = document.getElementById(canvas); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight;}window.onload = window.onresize = resizeCanvas;

Basic animations gets me started.

Four steps to create animation:

1. Clear the canvas content, usually using clearRect()
2. Save canvas state
3. Draw content
4. Reset canvas state

What I did is relatively simple, only using 1 and 3, which is to constantly clear the canvas and then redraw it.

 window.onload = function () { resizeCanvas(); window.requestAnimationFrame(draw);};function cleanCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height);}function draw() { cleanCanvas (); // draw stuffs. window.requestAnimationFrame(draw);}

Three are available:

1. window.setInterval() If there is no need for user interaction at all and just constant redrawing, this is enough.
2. window.setTimeout() If you want user operations, such as keyboard and mouse, to affect animation, you can use this. (I don’t understand, isn’t requestAnimationFrame better?)
3. window.requestAnimationFrame() tells the browser what to do before redrawing next time, that is, your own customized drawing operation.

This example in MDN is quite cool. CodePen. It can be moved, and the following is just a screenshot.

I have seen some Game Engine Development before, and I consciously made object-oriented encapsulation. What is used here is very simple.

The most basic thing is that Vector represents a point/vector in a two-dimensional space, and its members are only x and y.

On this basis, Circle represents a circle, member center: Vector represents the center of the circle, radius: number represents the radius, and speed: Vector represents the speed.

Then just encapsulate some member functions for your own use.

TypeScript + Webpack + Webpack-dev-server is not complicated, just refer to the following content:

1. Webpack/Getting Started
2. Webpack/Typescript
3. Webpack/devServer
4. webpack-dev-server

In addition, I also tried npx, which is used to run npm executable programs. In the past, webpack was installed globally, and you could just call webpack xx directly. If you install webpack locally, you need to go through ./node_modules/.bin/webpack To run local webpack, you can now npx webpack xxx.

In the config of devServer, I added hot: true to enable hot update. As a result, the web page prompted: [HMR] Hot Module Replacement is disabled.

I found it to be an old pitfall. When I need to call it, add the command line parameters: webpack-dev-server --hot --inline

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.