Get best of the week

حب + قماش = قلب



يوم جيد يا اصدقاء!

14 فبراير هو عيد الحب أو عيد الحب في الفناء.

الجميع يعرف ذلك (ماذا لا يعرف أحد؟).

ومع ذلك ، لا يعلم الجميع (أعتقد أنه لا يوجد الكثير منهم في حبري) أنه في 14 فبراير 1946 ، تم عرض أول كمبيوتر إلكتروني يعمل حقًا ENIAC I (التكامل الرقمي العددي والآلة الحاسبة) للعالم العلمي وجميع المهتمين ، وبالتالي فإن 14 فبراير هو أيضًا يوم الكمبيوتر.

الحب شعور رائع كما قال همنجواي ، إذا كان اثنان يحبان بعضهما البعض ، فهذا لا يمكن أن ينتهي بشكل جيد. مجرد مزحة يا رفاق

برمجة JavaScript هي أيضًا شيء رائع.

ما الذي يتبادر إلى الذهن أولاً عندما تقول "الحب"؟ طبعا القلب. كيفية جعل القلب على شبيبة؟ بالطبع باستخدام قماش. بالمناسبة ، ذكر اللوحة كنموذج HTML5 Canvas يسعدني دائمًا ، لأنه من HTML لا يوجد سوى علامة (عنصر ، إذا أردت) ، والباقي هو JS ، وعندما يتعلق الأمر بمشاريع أكثر أو أقل خطورة (مثيرة للاهتمام) ، بعيدًا عن JS البسيط.



لدي قلب فضولي في الصناديق. واليوم قررت مشاركتها معك.

الكود ليس ملكي ، ها هو مؤلفه . وهنا مقال بالتفاصيل.

إذن هيا بنا نذهب.

الترميز والأنماط:

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

نعم ، هذا هو كل الترميز والأنماط. لول

شبيبة تبدو أكثر خطورة:

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

الغرض الوحيد من هذه المقالة هو الترفيه عنك قليلاً في عطلة (خاصة وأن اليوم هو يوم الجمعة).

يمكن رؤية نسختي هنا .

بالنسبة لي شخصيًا ، يعد هذا الرمز دليلاً آخر على الاحتمالات غير المحدودة تقريبًا لترادف قماش - جافا سكريبت.

شكرآ لك على أهتمامك. نهاية أسبوع جيدة.

More articles:


All Articles