JSDM

HTML

 
1
<div id="console"/>
2
<img id="myImg" src="http://pic.58pic.com/58pic/13/82/74/92q58PICeSI_1024.jpg"/>
3
4
5
     
6
<canvas id="myCanvas" width="367" height="367"></canvas>
7
<div id='instruction'>Pass through</div>
8

CSS

xxxxxxxxxx
32
 
1
body{
2
  background-color:#111;
3
}
4
#myImg {
5
  display:none;
6
}
7
#instruction{
8
  position: absolute;
9
  margin: auto;
10
  width:100%;
11
  top:50%;
12
  margin-top:180px;
13
  text-align: center;
14
  
15
  color:#c49a6c;
16
  font-family: Helvetica, Arial, Sand-serif;
17
  font-size: 0.8em;
18
  
19
}
20
#myCanvas {
21
  position: absolute;
22
  margin: auto;
23
  width: 367px;
24
  height: 367px;
25
  top: 0;
26
  bottom: 0;
27
  left: 0;
28
  right: 0;
29
}
30
#console{
31
  color:#fff;
32
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
135
 
1
//*
2
var console = function() {
3
    return({
4
        log: function(msg) {
5
          consoleDiv = document.getElementById('console');
6
          para = document.createElement('p');
7
          text = document.createTextNode(msg);
8
          para.appendChild(text);
9
          consoleDiv.appendChild(para);
10
        }
11
    });
12
}();
13
//*/
14
var canvas = document.getElementById('myCanvas');
15
var context = canvas.getContext('2d');
16
var img = document.getElementById('myImg');
17
var myData;
18
var particles = [];
19
var pCount = 0;
20
var skip = 2;
21
var nParticles = 0;
22
var distRepulsion = 3000;
23
var cycleDist = 0;
24
var isDemo = true;
25
var rectCanvas;
26
var mouseX;
27
var mouseY;
28
var dirMouse = 1;
29
30
31
Particle = function(x,y,absPosition){ 
32
  this.initX = this.currentX = this.targetX = x;
33
  this.initY = this.currentY = this.targetY = y;
34
  this.vx = 0;
35
  this.vy = 0;
36
  this.inplace = true;
37
  
38
  this.repulse = function(cx,cy){
39
    var dx = (cx-this.currentX);
40
    var dy = (cy-this.currentY);
41
    var dist = Math.pow(dx,2) + Math.pow(dy,2);
42
    if (dist < distRepulsion){
43
      this.vx += -dx*.02;
44
      this.vy += -dy*.02;
45
    }else{
46
      this.vx += (this.initX - this.currentX)*.1;
47
      this.vy += (this.initY - this.currentY)*.1;
48
    }
49
    this.vx*=.85;
50
    this.vy*=.85;
51
    
52
    if (Math.abs(this.vx)<.1 && Math.abs(this.yv)<.1){
53
      this.vx = this.vy = 0;
54
      this.currentX = this.initX;
55
      this.currentY = this.initY;
56
      this.inplace = true;
57
    }else{
58
      this.currentX = Math.round(this.currentX+this.vx);
59
      this.currentY = Math.round(this.currentY+this.vy); 
60
      this.inplace = false;
61
    }
62
  }
63
}
64
65
window.onload = function() {
66
  document.onmousemove = handleMouseMove;
67
  context.drawImage(img, 0, 0 );
68
  myData = context.getImageData(0, 0, img.width, img.height);
69
  parseImage();
70
  rectCanvas = canvas.getBoundingClientRect();
71
  mouseX=0;
72
  mouseY=0;
73
  requestAnimationFrame(loop);
74
};
75
76
77
function handleMouseMove(event){
78
  
79
  if (!isDemo){
80
    mouseX = event.clientX - rectCanvas.left;
81
    mouseY = event.clientY - rectCanvas.top;  
82
  }
83
}
84
85
function parseImage(){
86
  var pix = myData.data;
87
  var n = pix.length;
88
  for (var i = 0 ; i < n; i += (4*skip)) {
89
    if (pix[i+3] > 100){
90
      var particle = new Particle(pCount%canvas.width,      Math.floor(pCount/canvas.width),pCount);
91
      particles.push(particle);
92
    }
93
    pCount+=skip;
94
  }
95
 nParticles = particles.length;
96
}
97
98
function loop() {
99
  cycleDist += .1;
100
  distRepulsion = 2500 + Math.sin(cycleDist)*1000; 
101
  var newData = context.createImageData(canvas.width, canvas.height);
102
  var needRender = false;
103
  
104
  if (isDemo){
105
    mouseX += dirMouse*2;
106
    mouseY += 2;
107
    if (mouseX > canvas.width){
108
      dirMouse = -1;
109
      mouseX = canvas.width;
110
    }
111
    if (mouseY > canvas.height){
112
      isDemo = false;
113
    }
114
  }
115
  
116
  for (var i=0; i<nParticles; i++ ){
117
   var p = particles[i];
118
    p.repulse(mouseX,mouseY);
119
    if (!p.inplace){
120
      var pos = ((p.currentY*canvas.width)+p.currentX)*4;
121
      newData.data[pos] += 196;
122
      newData.data[pos+1] += 154;
123
      newData.data[pos+2] += 108;
124
      newData.data[pos+3] += 255;
125
      needRender = true;  
126
    }   
127
  }  
128
  if (needRender) { 
129
    context.putImageData(newData,0,0);
130
  }
131
  requestAnimationFrame(loop);
132
};
133
134
135
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................