月薪3万程序员多强?300行代码写超震撼3D旋转特效

问:程序员闲着没事干的时候会干什么?
答:写代码吖~
这是今天早上和部门一个男性程序员之间的真实对话,没有逛街,没有美食,没有煲剧,小声逼逼:怪不得还没女朋友~zzzzzzz

        不过确实有一些程序员确实以码代码为乐,闲着没事干的时候,会写一些好玩的,好看的代码锻炼自己能力的同时,让自己开心,今天分享的这个3D旋转特效就是一个国外的程序员小哥哥闲时之作,看起来确实让人非常震撼!下面就和大家来分享下这个特效和源码。

3D旋转特效

由于不能上传视频所以只上传了图片,有点不清晰,用浏览器打开的时候超级震撼,配上点背景音乐,简直不属于好莱坞特效,也特别像《数码宝贝》里面超进化的样子!

3D旋转特效源码

function spawnParticle(vars){
var p,ls;
pt={};
p=Math.PI2Math.random();
ls=Math.sqrt(Math.random()vars.distributionRadius);
pt.x=Math.sin(p)
ls;
pt.y=-vars.vortexHeight/2;
pt.vy=vars.initV/20+Math.random()vars.initV;
pt.z=Math.cos(p)
ls;
pt.radius=200+800*Math.random();
pt.color=pt.radius/1000+vars.frameNo/250;
vars.points.push(pt);
}
function frame(vars) {
if(vars === undefined){
var vars={};
vars.canvas = document.querySelector("canvas");
vars.ctx = vars.canvas.getContext("2d");
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
window.addEventListener("resize", function(){
vars.canvas.width = document.body.clientWidth;
vars.canvas.height = document.body.clientHeight;
vars.cx=vars.canvas.width/2;
vars.cy=vars.canvas.height/2;
}, true);
    vars.frameNo=0;
vars.camX = 0;
vars.camY = 0;
vars.camZ = -14;
vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
vars.yaw = 0;
vars.cx=vars.canvas.width/2;
vars.cy=vars.canvas.height/2;
vars.bounding=10;
vars.scale=500;
    vars.floor=26.5;
vars.points=[];
vars.initParticles=2000;
vars.initV=.01;
vars.distributionRadius=800;
vars.vortexHeight=25;
  }
vars.frameNo++;
requestAnimationFrame(function() {
frame(vars);
  });
process(vars);
draw(vars);
}
frame();

PS:由于代码太长,所以只展示部分JavaScript代码,需要的朋友可以关注下面福利区自助领取完整源码。

福利区:

关注公众号“蝌蚪前端”回复“源码”,自助领取3D旋转源码完整版。

分享下我总结的一些干货,我自己是一名从事了5年web前端开发工程师,辞职目前在做线上教育讲师,整理了一份最适合2019年web前端学习的干货,包括基础+资料+视频,都是免费的,在这里相信有许多想要学习web前端的同学,加QQ群:931661106

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复