Get best of the week

Amour + toile = coeur



Bonjour mes amis!

Le 14 février est la Saint Valentin ou la Saint Valentin dans la cour.

Tout le monde le sait (quoi, quelqu'un ne sait pas?).

Cependant, tout le monde ne sait pas (je pense qu'il y en a peu) que le 14 février 1946, le premier ordinateur électronique vraiment fonctionnel ENIAC I (Electrical Numerical Integrator And Calculator) a été présenté au monde scientifique et à toutes les personnes intéressées, le 14 février est donc également la Journée de l'ordinateur.

L'amour est un sentiment merveilleux. Comme l'a dit Hemingway, si deux s'aiment, cela ne peut pas bien se terminer. Juste une blague, les copains.

La programmation JavaScript est également une bonne chose.

Qu'est-ce qui vous vient à l'esprit lorsque vous dites «amour»? Bien sûr, le cœur. Comment faire un coeur sur JS? Bien sûr, en utilisant la toile. Soit dit en passant, mentionner le canevas comme HTML5 Canvas m'a toujours amusé, car en html il n'y a qu'une balise (élément, si vous voulez), le reste est JS, et quand il s'agit de projets plus ou moins sérieux (intéressants), loin du simple JS.



J'ai un cœur curieux dans les poubelles. Et aujourd'hui, j'ai décidé de le partager avec vous.

Le code n'est pas le mien, voici son auteur . Et voici un article avec les détails.

Alors allons-y.

Balisage et styles:

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

Oui, c'est tout le balisage et les styles. Lol

JS a l'air beaucoup plus sérieux:

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()

Le seul but de cet article est de vous divertir un peu en vacances (d'autant plus qu'aujourd'hui est vendredi).

Ma version peut être vue ici .

Pour moi personnellement, ce code est une autre preuve des possibilités presque illimitées du tandem canvas-JavaScript.

Merci de votre attention. Bon weekend.

More articles:


All Articles