p5模仿虫洞穿越波纹效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> window.requestAnimFrame = (function() { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback); } ); }); function init(elemid) { let canvas = document.getElementById(elemid), c = canvas.getContext("2d"), w = (canvas.width = window.innerWidth), h = (canvas.height = window.innerHeight); c.fillStyle = "rgba(30,30,30,1)"; c.fillRect(0, 0, w, h); return {c:c,canvas:canvas}; } </script> <style> body, html { margin: 0px; padding: 0px; position: fixed; background: rgb(30,30,30); </style> </head> <body translate="no"> <canvas id="canvas"></canvas> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script> <script > new p5(); window.onload = function () { //setting up canvas let c = init("canvas").c, canvas = init("canvas").canvas, w = canvas.width = window.innerWidth, h = canvas.height = window.innerHeight; class circle { constructor(res, seed, r) { this.num = Math.floor(360 / res); this.da = res * Math.PI / 180; this.s = seed; this.x = w / 2; this.y = h / 2; this.ox = 1000; this.oy = 1000; this.r = r; this.b = Math.random() * 0.9 + 0.1; this.offs = new Array(this.num); for (let i = 0; i < this.num; i++) { this.offs[.........完整代码请登录后点击上方下载按钮下载查看
网友评论0