The thing is that the day before yesterday morning, the product manager said that he wanted to make a wish wall and asked me if I could do it

That’s easy, I thought, but in order to fish for another day, I said it would be a little challenging

In the afternoon, the product manager and designer sent me a design reference

They said that the design of the wish wall is roughly like this, each user’s wish is a bubble, and the customer’s brand is “dragon”, we want to use the bubble in the front page to present a dragon shaped design, each bubble will float, the mouse moved up to become larger, click to show the details of the wish.

That’s what I was thinking

Is my day of fishing ruined?

No one can stop me from feeling fish

But first, the core issues must be addressed

Where do dragons come from?

The designer said he could give me a design for a dragon made of bubbles, and I said I’d look into it when you got me the design. And he said, well, it’s already there, you can use it

Where’s my knife?

The interactive problem

Leave your weirdest requests in the comments section

Dismantling requirements

It’s hard for front-end engineers to have unreliable product managers and designers. We had a huge pot of final deliverable, and all the deadlines felt like they were just to squeeze the front end engineers.

We’re on our own because

No one can stop me from feeling fish

  • Requirement 1: Mouse interaction (too simple)
  • Requirement 2: Bubbles to float (CSS animation, Easy)
  • Requirement 3: Bubbles form a dragon

This song is playing in my head

Draw a dragon with me on the left and a rainbow on your right

Hey, draw a dragon

What kind of painting? Canvas

Canvas can get the pixel lattice of a given area

Oh, my god. I got a move

Code time

Start with an image search to find a silhouette of a dragon

Draw the image to the canvas

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var image = new Image();
image.src = "dragon.jpg";
image.onload = function(){
        canvas.width = image.width;
        canvas.height = image.height;

Copy the code

Gets and cuts the lattice information of the canvas

var imageData = ctx.getImageData(0.0,image.width,image.height).data;
ctx.fillStyle = "#ffffff";

var gap = 6;

for (var h = 0; h < image.height; h+=gap) {
    for(var w = 0; w < image.width; w+=gap){
            var position = (image.width * h + w) * 4;
            var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];

                    ctx.fillStyle = "# 000";
                    ctx.fillRect(w,h,4.4); }}}Copy the code

Now we have the lattice information of such a dragon

The bubble DOM is generated from the lattice information

var dragonContainer = document.getElementById("container");
var dragonScale = 2;

for (var h = 0; h < image.height; h+=gap) {
    for(var w = 0; w < image.width; w+=gap){
            var position = (image.width * h + w) * 4;
            var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];

            if(r+g+b==0) {var bubble = document.createElement("img");
                    bubble.src = "bubble.png";

                    var bubbleSize = Math.random()*10+20;
           = (w*dragonScale-bubbleSize/2) + "px";
           = (h*dragonScale-bubbleSize/2) + "px";
           = = bubbleSize+"px";
           = Math.random()*6+4 + "s"; dragonContainer.appendChild(bubble); }}}Copy the code

Enjoy the fish

In this example, div is used to draw a lot of DOM, just for illustration, not for performance. Using some JS game engines, such as PIxi, etc., can be very convenient to all canvas to draw and add interaction.

This story is purely fictitious, the reference case comes from the Spring Festival activity website which I developed for customers at the end of 2011.

The source code

Wechat search and concern “big handsome old ape”, reply to get the source bubble dragon