@nicecode/funny
Version:
funny,一些有趣的代码,funny code
230 lines (228 loc) • 9.39 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
// @ts-nocheck
var Particale = /*#__PURE__*/function () {
function Particale(opt) {
_classCallCheck(this, Particale);
_defineProperty(this, "warp", void 0);
_defineProperty(this, "ctx", void 0);
_defineProperty(this, "imgsUrl", void 0);
_defineProperty(this, "imgsObj", void 0);
_defineProperty(this, "radius", void 0);
_defineProperty(this, "index", void 0);
_defineProperty(this, "initz", void 0);
_defineProperty(this, "dots", void 0);
this.warp = opt.warp; //画布
this.ctx = opt.warp && opt.warp.getContext('2d');
this.imgsUrl = opt.imgsUrl; //图片地址数组
this.imgsObj = []; //图片对象数组
this.radius = opt.radius || 10; //粒子半径
this.index = 0; //当前图片下标
this.initz = 300;
this.dots = [];
this.init();
}
_createClass(Particale, [{
key: "init",
value: function init() {
var _this = this;
//限制小球半径
if (this.warp.width > 500 || this.warp.height > 300) this.radius >= 4 ? this.radius = this.radius : this.radius = 4;else this.radius >= 2 ? this.radius = this.radius : this.radius = 2;
var promiseArr = this.imgsUrl.map(function (imgUrl) {
return new Promise(function (resolve, reject) {
var imgObj = new Image();
imgObj.onload = function () {
_this.imgsObj.push(imgObj);
resolve();
};
imgObj.src = imgUrl;
});
});
//图片全部加载完毕开始绘制
Promise.all(promiseArr).then(function () {
_this.picLoop();
});
}
}, {
key: "picLoop",
value: function picLoop() {
this.dots = [];
this.drawPic(); //绘制当前图片
this.toParticle(); //得到像素点
this.combineAnimate(); //合成图像
this.index === this.imgsUrl.length - 1 ? this.index = 0 : this.index++; //下标移动到下一张图片
}
}, {
key: "drawPic",
value: function drawPic() {
//清除画布
this.ctx.clearRect(0, 0, this.warp.width, this.warp.height);
var imgObj = this.imgsObj[this.index];
//限制图片大小
if (imgObj.width > imgObj.height) {
var ImgScale = imgObj.height / imgObj.width;
imgObj.width = this.warp.width * .5;
imgObj.height = imgObj.width * ImgScale;
} else {
var _ImgScale = imgObj.width / imgObj.height;
imgObj.height = this.warp.height * .7;
imgObj.width = imgObj.height * _ImgScale;
}
//绘制图片到canvas
this.ctx.drawImage(imgObj, this.warp.width / 2 - imgObj.width / 2, this.warp.height / 2 - imgObj.height / 2, imgObj.width, imgObj.height);
}
}, {
key: "toParticle",
value: function toParticle() {
//得到像素
var imageData = this.ctx.getImageData(0, 0, this.warp.width, this.warp.height);
var data = imageData.data;
for (var x = 0; x < imageData.width; x += this.radius * 2) {
for (var y = 0; y < imageData.height; y += this.radius * 2) {
var i = (x + y * this.warp.width) * 4;
if (data[i + 3] !== 0 && data[i] !== 255 && data[i + 1] !== 255 && data[i + 2] !== 255) {
var dot = {
x: x,
//图片x轴坐标
y: y,
// y轴坐标
z: 0,
// z轴坐标
r: data[i],
// rgba
g: data[i + 1],
// rgba
b: data[i + 2],
// rgba
a: 1,
// rgba
ix: Math.random() * this.warp.width,
//初始化x轴坐标
iy: Math.random() * this.warp.height,
// y轴坐标
iz: Math.random() * this.initz * 2 - this.initz,
// z轴坐标
ir: 255,
// rgba
ig: 255,
// rgba
ib: 255,
// rgba
ia: 0,
// rgba
tx: Math.random() * this.warp.width,
//目标x轴坐标
ty: Math.random() * this.warp.height,
// y轴坐标
tz: Math.random() * this.initz * 2 - this.initz,
// z轴坐标
tr: 255,
// rgba
tg: 255,
// rgba
tb: 255,
// rgba
ta: 0 // rgba
};
this.dots.push(dot);
}
}
}
}
}, {
key: "combineAnimate",
value: function combineAnimate() {
var _this2 = this;
var combined = false;
this.ctx.clearRect(0, 0, this.warp.width, this.warp.height);
this.dots.map(function (dot) {
if (Math.abs(dot.ix - dot.x) < 0.1 && Math.abs(dot.iy - dot.y) < 0.1 && Math.abs(dot.iz - dot.z) < 0.1) {
dot.ix = dot.x;
dot.iy = dot.y;
dot.iz = dot.z;
dot.ir = dot.r;
dot.ig = dot.g;
dot.ib = dot.b;
dot.ia = dot.a;
combined = true;
} else {
dot.ix += (dot.x - dot.ix) * 0.07;
dot.iy += (dot.y - dot.iy) * 0.07;
dot.iz += (dot.z - dot.iz) * 0.07;
dot.ir += (dot.r - dot.ir) * 0.3;
dot.ig += (dot.g - dot.ig) * 0.3;
dot.ib += (dot.b - dot.ib) * 0.3;
dot.ia += (dot.a - dot.ia) * 0.1;
combined = false;
}
return _this2.drowDot(dot);
});
if (!combined) {
requestAnimationFrame(function () {
return _this2.combineAnimate();
});
} else {
setTimeout(function () {
return _this2.separateAnimate();
}, 1500);
}
}
}, {
key: "separateAnimate",
value: function separateAnimate() {
var _this3 = this;
var separated = false;
this.ctx.clearRect(0, 0, this.warp.width, this.warp.height);
this.dots.map(function (dot) {
if (Math.abs(dot.ix - dot.tx) < 0.1 && Math.abs(dot.iy - dot.ty) < 0.1 && Math.abs(dot.iz - dot.tz) < 0.1) {
dot.ix = dot.tx;
dot.iy = dot.ty;
dot.iz = dot.tz;
dot.ir = dot.tr;
dot.ig = dot.tg;
dot.ib = dot.tb;
dot.ia = dot.ta;
separated = true;
} else {
dot.ix += (dot.tx - dot.ix) * 0.07;
dot.iy += (dot.ty - dot.iy) * 0.07;
dot.iz += (dot.tz - dot.iz) * 0.07;
dot.ir += (dot.tr - dot.ir) * 0.02;
dot.ig += (dot.tg - dot.ig) * 0.02;
dot.ib += (dot.tb - dot.ib) * 0.02;
dot.ia += (dot.ta - dot.ia) * 0.03;
separated = false;
}
return _this3.drowDot(dot);
});
if (!separated) {
requestAnimationFrame(function () {
return _this3.separateAnimate();
});
} else {
setTimeout(function () {
return _this3.picLoop(); //间接递归，使用尾递归优化
}, 100);
}
}
}, {
key: "drowDot",
value: function drowDot(dot) {
var scale = this.initz / (this.initz + dot.iz);
this.ctx.save();
this.ctx.beginPath();
this.ctx.fillStyle = "rgba(".concat(Math.floor(dot.ir), ", ").concat(Math.floor(dot.ig), ", ").concat(Math.floor(dot.ib), ", ").concat(dot.ia, ")");
this.ctx.arc(this.warp.width / 2 + (dot.ix - this.warp.width / 2) * scale, this.warp.height / 2 + (dot.iy - this.warp.height / 2) * scale, this.radius * scale, 0, Math.PI * 2);
this.ctx.fill();
this.ctx.closePath();
this.ctx.restore();
}
}]);
return Particale;
}();
export default Particale;