Get best of the week

प्यार + कैनवास = दिल



शुभ दिन, दोस्तों!

14 फरवरी यार्ड में वेलेंटाइन डे या वेलेंटाइन डे है।

हर कोई इसके बारे में जानता है (क्या, किसी को नहीं पता?)।

हालांकि, हर कोई नहीं जानता (मुझे विश्वास है कि हेरेबे में उनमें से बहुत से नहीं हैं) कि 14 फरवरी, 1946 को वैज्ञानिक दुनिया में पहली बार काम कर रहे इलेक्ट्रॉनिक कंप्यूटर ENIAC I (इलेक्ट्रिकल न्यूमेरिकल इंटीग्रेटर एंड कैलकुलेटर) का प्रदर्शन किया गया था और सभी को दिलचस्पी थी, इसलिए 14 फरवरी को भी कंप्यूटर दिवस है।

प्यार एक अद्भुत एहसास है। जैसा कि हेमिंग्वे ने कहा, यदि दो एक-दूसरे से प्यार करते हैं, तो यह अच्छी तरह से समाप्त नहीं हो सकता है। बस एक चुटकुला, पलस।

जावास्क्रिप्ट प्रोग्रामिंग भी एक अच्छी बात है।

जब आप "प्रेम" कहते हैं तो सबसे पहले क्या ख्याल आता है? बेशक, दिल। जेएस पर दिल कैसे बनाएं? बेशक कैनवास का उपयोग कर। वैसे, एचटीएमएल 5 कैनवस के रूप में कैनवस का उल्लेख करना हमेशा मुझे भाता है, क्योंकि एचटीएमएल से केवल एक टैग (तत्व, यदि आपको पसंद है) है, तो बाकी जेएस है, और जब यह कम या ज्यादा गंभीर (दिलचस्प) परियोजनाओं की बात आती है, तो साधारण जेएस से दूर।



मेरा एक जिज्ञासु दिल है डिब्बे में। और आज मैंने इसे आपके साथ साझा करने का फैसला किया है।

कोड मेरा नहीं है, यहाँ इसका लेखक है । और यहां विवरण के साथ एक लेख है ।

तो चलते हैं।

मार्कअप और शैलियों:

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

हां, वह सब मार्कअप और स्टाइल है। जबरदस्त हंसी

JS अधिक गंभीर लगता है:

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