Code trái tim

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<HTML>


<HEAD>


    <TITLE> New Document </TITLE>


    <META NAME="Generator" CONTENT="EditPlus">


    <META NAME="Author" CONTENT="">


    <META NAME="Keywords" CONTENT="">


    <META NAME="Description" CONTENT="">


    <style>

        html,

        body {


            height: 100%;


            padding: 0;


            margin: 0;


            background: #000;


        }


        canvas {


            position: absolute;


            width: 100%;


            height: 100%;


            animation: heart 1.5s infinite

        }

        @keyframes heart {

            0%{

                transform:  scale(1);

            }

            30%{

                transform: scale(0.7);

            }

            100%{

                transform: scale(1);

            }

        }

    </style>


</HEAD>



<BODY>


    <canvas id="pinkboard"></canvas>


    <script>


        /*

      

       * Settings

      

       */


        var settings = {


            particles: {


                length: 500, // maximum amount of particles


                duration: 2, // particle duration in sec


                velocity: 100, // particle velocity in pixels/sec


                effect: -0.65, // play with this for a nice effect


                size: 30, // particle size in pixels


            },


        };



        /*

        

         * RequestAnimationFrame polyfill by Erik Möller

        

         */


        (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } } }());



        /*

        

         * Point class

        

         */


        var Point = (function () {


            function Point(x, y) {


                this.x = (typeof x !== 'undefined') ? x : 0;


                this.y = (typeof y !== 'undefined') ? y : 0;


            }


            Point.prototype.clone = function () {


                return new Point(this.x, this.y);


            };


            Point.prototype.length = function (length) {


                if (typeof length == 'undefined')


                    return Math.sqrt(this.x * this.x + this.y * this.y);


                this.normalize();


                this.x *= length;


                this.y *= length;


                return this;


            };


            Point.prototype.normalize = function () {


                var length = this.length();


                this.x /= length;


                this.y /= length;


                return this;


            };


            return Point;


        })();



        /*

        

         * Particle class

        

         */


        var Particle = (function () {


            function Particle() {


                this.position = new Point();


                this.velocity = new Point();


                this.acceleration = new Point();


                this.age = 0;


            }


            Particle.prototype.initialize = function (x, y, dx, dy) {


                this.position.x = x;


                this.position.y = y;


                this.velocity.x = dx;


                this.velocity.y = dy;


                this.acceleration.x = dx * settings.particles.effect;


                this.acceleration.y = dy * settings.particles.effect;


                this.age = 0;


            };


            Particle.prototype.update = function (deltaTime) {


                this.position.x += this.velocity.x * deltaTime ;


                this.position.y += this.velocity.y * deltaTime ;


                this.velocity.x += this.acceleration.x * deltaTime;


                this.velocity.y += this.acceleration.y * deltaTime;


                this.age += deltaTime ;


            };


            Particle.prototype.draw = function (context, image) {


                function ease(t) {


                    return (--t) * t * t + 1;


                }


                var size = image.width * ease(this.age / settings.particles.duration);


                context.globalAlpha = 1 - this.age / settings.particles.duration;


                context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);


            };


            return Particle;


        })();



        /*

        

         * ParticlePool class

        

         */


        var ParticlePool = (function () {


            var particles,


                firstActive = 0,


                firstFree = 0,


                duration = settings.particles.duration;




            function ParticlePool(length) {


                // create and populate particle pool


                particles = new Array(length);


                for (var i = 0; i < particles.length; i++)


                    particles[i] = new Particle();


            }


            ParticlePool.prototype.add = function (x, y, dx, dy) {


                particles[firstFree].initialize(x, y, dx, dy);




                // handle circular queue


                firstFree++;


                if (firstFree == particles.length) firstFree = 0;


                if (firstActive == firstFree) firstActive++;


                if (firstActive == particles.length) firstActive = 0;


            };


            ParticlePool.prototype.update = function (deltaTime) {


                var i;




                // update active particles


                if (firstActive < firstFree) {


                    for (i = firstActive; i < firstFree; i++)


                        particles[i].update(deltaTime);


                }


                if (firstFree < firstActive) {


                    for (i = firstActive; i < particles.length; i++)


                        particles[i].update(deltaTime);


                    for (i = 0; i < firstFree; i++)


                        particles[i].update(deltaTime);


                }




                // remove inactive particles


                while (particles[firstActive].age >= duration && firstActive != firstFree) {


                    firstActive++;


                    if (firstActive == particles.length) firstActive = 0;


                }






            };


            ParticlePool.prototype.draw = function (context, image) {


                // draw active particles


                if (firstActive < firstFree) {


                    for (i = firstActive; i < firstFree; i++)


                        particles[i].draw(context, image);


                }


                if (firstFree < firstActive) {


                    for (i = firstActive; i < particles.length; i++)


                        particles[i].draw(context, image);


                    for (i = 0; i < firstFree; i++)


                        particles[i].draw(context, image);


                }


            };


            return ParticlePool;


        })();



        /*

        

         * Putting it all together

        

         */


        (function (canvas) {


            var context = canvas.getContext('2d'),


                particles = new ParticlePool(settings.particles.length),


                particleRate = settings.particles.length / settings.particles.duration, // particles/sec


                time;




            // get point on heart with -PI <= t <= PI


            function pointOnHeart(t) {


                return new Point(


                    160 * Math.pow(Math.sin(t), 3),


                    130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25


                );


            }




            // creating the particle image using a dummy canvas


            var image = (function () {


                var canvas = document.createElement('canvas'),


                    context = canvas.getContext('2d');


                canvas.width = settings.particles.size;


                canvas.height = settings.particles.size;


                // helper function to create the path


                function to(t) {


                    var point = pointOnHeart(t);


                    point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;


                    point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;


                    return point;


                }


                // create the path


                context.beginPath();


                var t = -Math.PI;


                var point = to(t);


                context.moveTo(point.x, point.y);


                while (t < Math.PI) {


                    t += 0.01; // baby steps!


                    point = to(t);


                    context.lineTo(point.x, point.y);


                }


                context.closePath();


                // create the fill


                context.fillStyle = '#ea80b0';


                context.fill();


                // create the image


                var image = new Image();


                image.src = canvas.toDataURL();


                return image;


            })();




            // render that thing!


            function render() {


                // next animation frame


                requestAnimationFrame(render);




                // update time


                var newTime = new Date().getTime() / 1000,


                    deltaTime = newTime - (time || newTime);


                time = newTime;




                // clear canvas


                context.clearRect(0, 0, canvas.width, canvas.height);




                // create new particles


                var amount = particleRate * deltaTime;


                for (var i = 0; i < amount; i++) {


                    var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());


                    var dir = pos.clone().length(settings.particles.velocity);


                    particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);


                }




                // update and draw particles


                particles.update(deltaTime);


                particles.draw(context, image);


            }




            // handle (re-)sizing of the canvas


            function onResize() {


                canvas.width = canvas.clientWidth;


                canvas.height = canvas.clientHeight;


            }


            window.onresize = onResize;




            // delay rendering bootstrap


            setTimeout(function () {


                onResize();


                render();


            }, 10);


        })(document.getElementById('pinkboard'));


    </script>


</BODY>


</HTML>

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Tài liệu Clickermann - by Mai Bao Long

Tìm keycode cho lệnh keypress: $i=0 waitms(3000) for ($i, $i<500)   print("Iteration ", $i)   keyPress($i)   waitms(1000) end_cyc Tìm keycode cho lệnh keydown-keyup: $i=0 waitms(5000) for ($i, $i<500)   print("Iteration ", $i)   keydown($i)   waitms(1000)   keyup($i)   waitms(1000) end_cyc Bảng mã : Phím Mã 1 (keypress) Mã 2 (keypress) Mã 3 (keydown-keyup) Mã 4 (keydown-keyup) A 65 118 B 66 119 C 67 120 D 68 121 E 69 144 F 70 3 145 G 71 36 103 H 72 38 104 I 73 33 105 J 74 109 K 75 37 100 L 76 12 101 M 77 39 102 N 78 107 O 79 35 97 P 80 40 98 Q 81 34 99 R 82 45 96 S 83 46 110 T 84 44 U 85 V 86 226 W 87 122 X 88 123 Y 89 Z 90 238 1 49 78 2 50 77 172 3 51 188 4 52 190 5 53 111 191 6 54 161 7 55 106 8 56 18 164 9 57 32 0 48 66 175 Tab 9 56 Shift 16 Ctrl 17 Alt 18 Space 32 68 173 Enter 13 187 Backspace 8 55 Caps Lock 20 84 Escape 27 221 F1 112 F2 113 233 F3 114 F4 115 193 F5 116 F6 117 F7 118 135 F8 119 ...
Đọc thêm

Code mẫu tự động phát hiện và lock window screen

Hình ảnh
*Giải thích flow: Khi chạy clickermann thì sẽ tự động tìm cửa sổ có tên "Windows PowerShell" mỗi 1s (0,5s cho lần đầu), khi tìm được thì sẽ lock lại và scale. Nếu screen đó bị tắt thì sẽ kích hoạt lắng nghe để lock và scale lại nếu phát hiện đồng thời sẽ kill 1 tiến trình khác tên là "Untitled - Paint"
Đọc thêm