查看原文
其他

2018-05-25

生活中我们常常发现很多程序员拿着高薪,却常常沦为单身狗,每当情人节来临,却只能形单影只的一个人,过得十分凄惨。


自从程序员毕业出来工作进入 IT 行业之后,常常接触不到女性,一不小心就到了被催恋催婚的年纪。


前有阿里的高级工程师,穿着一双特步的运动鞋去相亲,结果被对方婉拒。后有某程序员自爆去相亲,却带着相亲对象吃 79 块的肯德基,结果回去后就被妹子拉黑了。

程序员们常常是大家调侃的对象,是因为他们每天与机器为伍,和电脑打交道,给人们留下的印象是宅,木讷,不善交流......

据说世界上有 2 种程序猿,一种是有女朋友的程序猿,另一种是不知道别的程序猿是怎么找到女朋友的程序猿。

那些有女朋友的程序员都是怎么找到女朋友的呢?让我们一起来看下网友们怎么说。

程序员如何在工作后找到女朋友?


@知乎 小酱油


程序猿女朋友内心 OS:你特么才是瞎呢!


@知乎 杨锘


这可以说很惨了


@知乎 程序员大叔


屏幕前面作为程序猿的你还喜欢女孩子吗?


@知乎 禹程


长得帅是不分国界边界业界的好吗?


@知乎 卡拉迦迪斯


说出了这么人神共愤的话

有很多妹子表示,都想找程序猿当男朋友,奈何...


其实,除了宅,近乎完美的高薪程序员为什么会至今单身呢?这个问题一直没找到一个合理的解释。那么,就先让我们一起来看下面这个故事!


程序员们为什么不追女生了?


程序员们为什么不追女生了?当然是因为,女朋友哪有代码好看,女朋友哪有基友懂我,女朋友老管我,为什么要有女朋友。


对不起我撒谎了,为什么撒谎,容我先讲个故事。


3 个月前,我发送了一个请求给一见钟情的姑娘,没想到她很快地响应了数据。


在交互了一个月,传递了一些参数后,最终我鼓起勇气,发送一个新请求。


没有响应,再次请求,再三请求,她还是响应了个 404,我觉得我的路径有问题。


能 ping 得通,就是访问不了,怪事!于是我决定使用闺蜜这个代理服务器,闺蜜建议我换参数,比如某款香水。


这次立即给我响应了,登上主页面提示我提交数据,她则返回了空结果作为响应,于是我传了更多的参数,并再一次发出了请求。


这次她显示权限不足,依然 404。我找了基友,帮忙一起找 Bug,但在找我的 Bug 过程中,发现有好几个人同时在给她发请求,但都得到响应了。


有的甚至已经开通白名单,原来 Server 端并不是不能处理并发,而是直接忽略了我的请求。


最后我恍然大悟,原来是 CPU、显卡性能不够,只能当备用,怪不得频频响应数据,接受参数,却一个功能都用不了。


最终我花了差不多 10K,但我意识到该及时止损了,最后当我狠心卸载的时候,她还百般挽留,让我对服务进行评价...


过几天,别人建议我试试访问闺蜜这个代理地址,传递同样的参数,说不定就通了,性能更优。但我没有这么做,因为即使在这炮火连天的社会,我也不想变成,女生口诛笔伐的渣男。


幸运的是,我没有等到“我一直把你当朋友啊”这个触发事件才终止请求,但最终因才疏学浅,无法处理这种高并发问题,更不能保证线程安全,在考虑到时间、空间,及个人精力问题后,只能选择放弃。


前几天,突然看到了一条朋友圈,一位拥有着萌萌头像的姑娘说:“为什么男生总是追到一半就不追了?”


What?一半?你特么给个进度条啊?怎么会有女生觉得自己就应该一直被追到底啊?!对不起,这种事情对被追求者来说是一半,对追求者来说是已经结束了。


你不喜欢我,我心里不承认,你嘴上不承认后来我想明白了,我并不欠你的。


我并不想因为挫折就学套路,因为很多事情告诉我,世界上最可爱最打动人心的都是那些傻逼,而不是那些牛逼(pi)。


身边的程序员,都是老实孩子,我们是有点积蓄,但不想当提款机,我付出了真心,也希望收获真心。


如果你不喜欢我,请直接告诉我,我没有比特币,更没有 208 万,和你来一次壮志凌云地告别,但我依然相信爱情,只希望,遇见你,就是你!


看完上述这个故事,你有何感想?程序员可能是这个世界上“直男癌” 患者最多的群体之一吧。


但是……你真当他们木讷、死板、死宅、不懂浪漫?开什么玩笑!在 520 之际,小编特地收集了这个程序员专属的告白方式与大家分享,一起看看程序员用代码敲出的浪漫吧~


程序员的小浪漫----烟火


完整项目预览地址:http://lingyouhuiquanla.com/lover/


属性设计


烟花应有的三个状态状态:

  • 升空

  • 等待炸裂

  • 炸裂后


花:发射点(x,y),爆炸点(xEnd,yEnd),升空后等待炸裂时间(wait),炸裂后微粒个数(count),烟花半径(radius)


烟花炸裂后微粒:自身位置(x,y),自身大小(size),自身速度(rate),最大烟花半径(radius)。


config:为全局变量,以及控制参数,包括画布宽高,设定烟花属性等。


设定全局变量


  1. const config = {

  2.    width: 360,

  3.    height: 600,

  4.    canvases: ['bg', 'firework'],

  5.    skyColor: '210, 60%, 5%, 0.2)',

  6.    fireworkTime:{min:30,max:60},

  7.    //烟花参数本身有默认值 传入undefined则使用默认参数

  8.    fireworkOpt:{

  9.        x: undefined,

  10.        y: undefined,

  11.        xEnd: undefined,

  12.        yEnd: undefined,

  13.        count: 300,   //炸裂后粒子数

  14.        wait: undefined,  //消失后 => 炸裂  等待时间

  15.    }

  16. }


构建微粒类


  1. class Particle{

  2.    //默认值写法

  3.    constructor({x, y, size = 1, radius = 1.2} = {}){

  4.        this.x = x;

  5.        this.y = y;

  6.        this.size = size;

  7.        this.rate = Math.random(); //每个微粒移动的速度都是随机不同的

  8.        this.angle = Math.PI * 2 * Math.random(); //每个微粒的偏移角度

  9.        //每次微粒移动速度分解为横纵坐标的移动。

  10.        this.vx = radius * Math.cos(this.angle) * this.rate;

  11.        this.vy = radius * Math.sin(this.angle) * this.rate;

  12.    }

  13.    go(){

  14.        this.x += this.vx;

  15.        this.y += this.vy;

  16.        this.vy += 0.02; //重力影响 y越大实际越偏下

  17.        //空气阻力

  18.        this.vx *= 0.98;

  19.        this.vy *= 0.98;

  20.    }

  21.    //画出微粒的位置

  22.    render(ctx){

  23.        this.go();

  24.        ctx.beginPath();

  25.        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);

  26.        ctx.fill();

  27.    }

  28. }


构建烟花类


  1. class Firework{

  2.    constructor({x, y = config.height, xEnd, yEnd, count = 300, wait} = {}){

  3.        //烟花自身属性

  4.        this.x = x || config.width / 8 + Math.random() * config.width * 3 / 4;

  5.        this.y = y;

  6.        this.xEnd = xEnd || this.x;

  7.        this.yEnd = yEnd || config.width / 8 + Math.random() * config.width * 3 / 8;

  8.        this.size = 2;

  9.        this.velocity = -3;

  10.        this.opacity = 0.8;

  11.        this.color = `hsla(${360 * Math.random() | 0},80%,60%,1)`;

  12.        this.wait = wait || 30 + Math.random() * 30;

  13.        //微粒个数等

  14.        this.count = count;

  15.        this.particles = [];

  16.        this.createParticles();

  17.        this.status = 1;

  18.    }

  19.    //创建微粒

  20.    createParticles(){

  21.        for(let i = 0;i < this.count; ++i){

  22.            this.particles.push(new Particle({x:this.xEnd, y:this.yEnd}));

  23.        }

  24.    }

  25.    //升空

  26.    rise(){

  27.        this.y += this.velocity * 1;

  28.        this.velocity += 0.005; //升空时产生的阻力

  29.        //烟花升空到目标位置开始渐隐

  30.        if(this.y - this.yEnd <= 50){

  31.            this.opacity = (this.y - this.yEnd) / 50;

  32.        }

  33.        //如果到了目标位置 就开始第二个状态

  34.        if(this.y <= this.yEnd){

  35.            this.status = 2;

  36.        }

  37.    }

  38.    //渲染烟花  烟花所有动作完成之后返回false

  39.    render(ctx){

  40.        switch(this.status){

  41.            case 1: //升空

  42.            ctx.save();

  43.            ctx.beginPath();

  44.            ctx.globalCompositeOperation = 'lighter';

  45.            ctx.globalAlpha = this.opacity;

  46.            ctx.translate(this.x, this.y);

  47.            ctx.scale(0.8, 2.3);

  48.            ctx.translate(-this.x, -this.y);

  49.            ctx.fillStyle = this.color;

  50.            ctx.arc(this.x + Math.sin(Math.PI * 2 * Math.random()) / 1.2, this.y, this.size, 0, Math.PI * 2, false);

  51.            ctx.fill();

  52.            ctx.restore();

  53.            this.rise();

  54.            return true;

  55.            break;

  56.            case 2: //烟花消失阶段,等待炸裂

  57.            if(--this.wait <= 0){

  58.                this.opacity = 1;

  59.                this.status = 3;

  60.            }

  61.            return true;

  62.            break;

  63.            case 3: //炸裂之后 渲染烟花微粒

  64.            ctx.save();

  65.            ctx.globalCompositeOperation = 'lighter';

  66.            ctx.globalAlpha = this.opacity;

  67.            ctx.fillStyle = this.color;

  68.            for(let i = 0;i < this.particles.length;++i){

  69.            this.particles[i].render(ctx);

  70.            }

  71.            ctx.restore();

  72.            this.opacity -= 0.01;

  73.            return this.opacity > 0;

  74.            break;

  75.            default:

  76.            return false;

  77.        }

  78.    }

  79. }


放烟花


  1. const canvas = {

  2.    init: function(){

  3.        //一些属性的设定 可以不用管

  4.        this.setProperty();

  5.        this.renderBg();

  6.        //循环体 **主要

  7.        this.loop();

  8.    },

  9.    setProperty: function(){

  10.        this.fireworks = [];

  11.        this.width = config.width;

  12.        this.height = config.height;

  13.        this.fireworkTime = (config.fireworkTime.min + (config.fireworkTime.max - config.fireworkTime.min) * Math.random()) | 0;

  14.        this.bgCtx = document.querySelector('#bg').getContext('2d');

  15.        this.fireworkCtx = document.querySelector('#firework').getContext('2d');

  16.    },

  17.    renderBg(){

  18.        this.bgCtx.fillStyle = 'hsla(210, 60%, 5%, 0.9)'

  19.        this.bgCtx.fillRect(0, 0, this.width, this.height);

  20.    },

  21.    loop(){

  22.        requestAnimationFrame(this.loop.bind(this));

  23.        this.fireworkCtx.clearRect(0, 0, this.width, this.height);

  24.        //随机创建烟花

  25.        if(--this.fireworkTime <= 0){

  26.            this.fireworks.push(new Firework(config.fireworkOpt));

  27.            //每次到点之后重新设置烟花产生时间 (|0转化为整数)

  28.            this.fireworkTime = (config.fireworkTime.min + (config.fireworkTime.max - config.fireworkTime.min) * Math.random()) | 0;

  29.        }

  30.        for(let i = this.fireworks.length - 1; i >= 0; --i){

  31.            //渲染烟花 (若返回值为false则移除烟花)

  32.            !this.fireworks[i].render(this.fireworkCtx) && this.fireworks.splice(i,1);    

  33.        }

  34.    }

  35. }

  36. canvas.init();


完善


此时烟花是这样的,感觉少了点小尾巴。


现在我们每一帧都是清除了画布,如果要加上小尾巴其实也很简单,每一帧都不要清除画布,而是覆盖一层新的有透明度的天空上去。


  1. //canvas.loop方法

  2. // this.fireworkCtx.clearRect(0, 0, this.width, this.height);

  3. this.fireworkCtx.fillStyle = config.skyColor;

  4. this.fireworkCtx.fillRect(0,0,this.width,this.height);    

这时就变成这样了。但是,还是缺少了在爆炸瞬间天空变亮的场景。那么在画烟花的时候,先会获取一下烟花的颜色以及透明度。


  1. // *****Firework constructor

  2. // this.color = `hsla(${360 * Math.random() | 0},80%,60%,1)`;

  3. this.hue = 360 * Math.random() | 0;

  4. this.color = `hsla(${this.hue},80%,60%,1)`;

  1. // *****Firework 新增实例方法

  2. getSkyColor(){

  3.    const skyColor = {

  4.        //只有炸裂阶段才返回亮度

  5.        lightness: this.status == 3 ? this.opacity : 0 ,

  6.        hue: this.hue

  7.    };

  8.    return skyColor;

  9. }

  1. // *****config 修改config的skyColor

  2. // skyColor: 'hsla(210, 60%, 5%, 0.2)',

  3. skyColor: 'hsla({hue}, 60%, {lightness}%, 0.2)',

  1. // canvas.loop方法

  2. //this.fireworkCtx.fillStyle = config.skyColor;

  3. //每次替换色调与亮度值。

  4. this.fireworkCtx.fillStyle = config.skyColor.replace('{lightness}', 5 + this.skyColor.lightness * 15).replace('{hue}' , this.skyColor.hue);

  5. this.skyColor = { //新增

  6.    lightness: 0,

  7.    hue: 210

  8. };

  9. for(let i = this.fireworks.length - 1; i >= 0; --i){

  10.    //新增 天空颜色为最亮的烟花的颜色

  11.    this.skyColor = this.skyColor.lightness >= this.fireworks[i].getSkyColor().lightness ? this.skyColor : this.fireworks[i].getSkyColor();

  12.    !this.fireworks[i].render(this.fireworkCtx) && this.fireworks.splice(i,1);    

  13. }

到现在就算是大功告成了。


完整项目


Github 项目地址:https://github.com/NewNewKing/SmallRomance


作者:虎不唬、王兴欣

来源:BitTiger、segmentfault 等互联网素材综合整理。

留 言 有 礼 活 动

程序员的你会如何浪漫表白呢?欢迎底部留言分享。小编将精选出最有价值的三条评论,分别获得 50、30、20 元 的 红 包 奖 励,活动截止时间 5 月 25 号 12 时整。

精彩文章推荐:

踩坑实战:如何走出“万劫不复”的代码重构深渊?

如何用深度学习检测女性的第一杀手“乳腺癌”?

百亿级日志系统架构设计及优化

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存