Get best of the week

Amor + tela = coração



Bom dia amigos

14 de fevereiro é o dia dos namorados ou o dia dos namorados no quintal.

Todo mundo sabe disso (o que, alguém não sabe?).

No entanto, nem todo mundo sabe (acredito que não haja muitos deles em Habré) que, em 14 de fevereiro de 1946, o primeiro computador eletrônico realmente funcional ENIAC I (Integrador Numérico Elétrico e Calculadora) foi demonstrado ao mundo científico e a todos os interessados, portanto, 14 de fevereiro também é o Dia do Computador.

O amor é um sentimento maravilhoso. Como Hemingway disse, se dois se amam, isso não pode terminar bem. Apenas uma piada, amigos.

A programação JavaScript também é uma coisa legal.

O que primeiro vem à mente quando você diz "amor"? Claro, o coração. Como fazer um coração em JS? Claro que usando tela. Aliás, mencionar a tela como HTML5 sempre me divertiu, porque do html existe apenas uma tag (elemento, se você preferir), o resto é JS e, quando se trata de projetos mais ou menos sérios (interessantes), longe de JS simples.



Eu tenho um coração curioso nos caixotes do lixo. E hoje eu decidi compartilhar com você.

O código não é meu, aqui está o autor . E aqui está um artigo com os detalhes.

Então vamos.

Marcação e estilos:

<body style="margin: 0; display: flex;">
    <canvas></canvas>
</body>

Sim, essa é toda a marcação e estilos. Ri muito

JS parece muito mais sério:

let c = document.querySelector('canvas'),
    $ = c.getContext('2d'),
    w = c.width = innerWidth,
    h = c.height = innerHeight,
    random = Math.random

$.fillStyle = 'black'
$.fillRect(0, 0, w, h)

let heartPos = function (rad) {
    return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))]
}

let scaleAndTranslate = function (pos, sx, sy, dx, dy) {
    return [dx + pos[0] * sx, dy + pos[1] * sy]
}

window.addEventListener('resize', function () {
    w = c.width = innerWidth
    h = c.height = innerHeight
    $.fillStyle = 'black'
    $.fillRect(0, 0, w, h)
})

let traceCount = 50,
    pointsOrigin = [],
    dr = .1,
    i

for (i = 0; i < Math.PI * 2; i += dr)
    pointsOrigin.push(scaleAndTranslate(heartPos(i), 210, 13, 0, 0))

for (i = 0; i < Math.PI * 2; i += dr)
    pointsOrigin.push(scaleAndTranslate(heartPos(i), 150, 9, 0, 0))

for (i = 0; i < Math.PI * 2; i += dr)
    pointsOrigin.push(scaleAndTranslate(heartPos(i), 90, 5, 0, 0))

let heartPointsCount = pointsOrigin.length,
    targetPoints = []

let pulse = function (kx, ky) {
    for (i = 0; i < pointsOrigin.length; i++) {
        targetPoints[i] = []
        targetPoints[i][0] = kx * pointsOrigin[i][0] + w / 2
        targetPoints[i][1] = ky * pointsOrigin[i][1] + h / 2
    }
}

let e = []
for (i = 0; i < heartPointsCount; i++) {
    let x = random() * w
    let y = random() * h
    
    e[i] = {
        vx: 0,
        vy: 0,
        R: 2,
        speed: random() + 5,
        q: ~~(random() * heartPointsCount),
        D: 2 * (i % 2) - 1,
        force: .2 * random() + .7,
        f: 'hsla(0,' + ~~(40 * random() + 60) + '%,' + ~~(60 * random() + 20) + '%,.3)',
        trace: []
    }
    
    for (let k = 0; k < traceCount; k++) e[i].trace[k] = {
        x: x,
        y: y
    }
}

let config = {
    traceK: .4,
    timeDelta: .01
}

let time = 0
let loop = function () {
    let n = -Math.cos(time)
    
    pulse((1 + n) * .5, (1 + n) * .5)
    
    time += ((Math.sin(time)) < 0 ? 9 : (n > .8) ? .2 : 1) * config.timeDelta
    
    $.fillStyle = 'rgba(0,0,0,.1)'
    $.fillRect(0, 0, w, h)
    
    for (i = e.length; i--;) {
        let u = e[i],
            q = targetPoints[u.q],
            dx = u.trace[0].x - q[0],
            dy = u.trace[1].y - q[1],
            length = Math.sqrt(dx * dx + dy * dy)
        
        if (10 > length) {
            if (.95 < random()) {
                u.q = ~~(random() * heartPointsCount)
            } else {
                if (.99 < random()) {
                    u.D *= -1
                }
                
                u.q += u.D
                u.q %= heartPointsCount
                
                if (0 > u.q) {
                    u.q += heartPointsCount
                }
            }
        }
        
        u.vx += -dx / length * u.speed
        u.vy += -dy / length * u.speed
        
        u.trace[0].x += u.vx
        u.trace[0].y += u.vy
        
        u.vx *= u.force
        u.vy *= u.force
        
        for (k = 0; k < u.trace.length - 1;) {
            let T = u.trace[k]
            let N = u.trace[++k]
            N.x -= config.traceK * (N.x - T.x)
            N.y -= config.traceK * (N.y - T.y)
        }

        $.fillStyle = u.f
        for (k = 0; k < u.trace.length; k++) {
            $.fillRect(u.trace[k].x, u.trace[k].y, 1, 1)
        }
    }
    
    requestAnimationFrame(loop, c)
}

loop()

O único objetivo deste artigo é entretê-lo um pouco nas férias (principalmente porque hoje é sexta-feira).

Minha versão pode ser vista aqui .

Para mim, pessoalmente, esse código é mais uma prova das possibilidades quase ilimitadas do tandem canvas-JavaScript.

Obrigado pela atenção. Bom fim de semana.

More articles:


All Articles