表白爱心代码

news2025/7/6 22:38:15

文章目录

    • 一、演示（python版）
      • 代码
    • 二、演示（html版）
      • 代码

一、演示（python版）

请添加图片描述

代码

# 在等一句我愿意
import random
from math import sin, cos, pi, log
from tkinter import *

CANVAS_WIDTH = 640  # 画布的宽
CANVAS_HEIGHT = 480  # 画布的高
CANVAS_CENTER_X = CANVAS_WIDTH / 2  # 画布中心的X轴坐标
CANVAS_CENTER_Y = CANVAS_HEIGHT / 2  # 画布中心的Y轴坐标
IMAGE_ENLARGE = 11  # 放大比例
HEART_COLOR = "#ff9999"  # 心的颜色


def heart_function(t, shrink_ratio: float = IMAGE_ENLARGE):
    """
    “爱心函数生成器”
    :param shrink_ratio: 放大比例
    :param t: 参数
    :return: 坐标
    """
    # 基础函数
    x = 16 * (sin(t) ** 3)
    y = -(13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t))

    # 放大
    x *= shrink_ratio
    y *= shrink_ratio

    # 移到画布中央
    x += CANVAS_CENTER_X
    y += CANVAS_CENTER_Y

    return int(x), int(y)


def scatter_inside(x, y, beta=0.15):
    """
    随机内部扩散
    :param x: 原x
    :param y: 原y
    :param beta: 强度
    :return: 新坐标
    """
    ratio_x = - beta * log(random.random())
    ratio_y = - beta * log(random.random())

    dx = ratio_x * (x - CANVAS_CENTER_X)
    dy = ratio_y * (y - CANVAS_CENTER_Y)

    return x - dx, y - dy


def shrink(x, y, ratio):
    """
    抖动
    :param x: 原x
    :param y: 原y
    :param ratio: 比例
    :return: 新坐标
    """
    force = -1 / (((x - CANVAS_CENTER_X) ** 2 +
                  (y - CANVAS_CENTER_Y) ** 2) ** 0.6)
    dx = ratio * force * (x - CANVAS_CENTER_X)
    dy = ratio * force * (y - CANVAS_CENTER_Y)
    return x - dx, y - dy


def curve(p):
    """
    自定义曲线函数，调整跳动周期
    :param p: 参数
    :return: 正弦
    """
    # 可以尝试换其他的动态函数，达到更有力量的效果
    return 2 * (2 * sin(4 * p)) / (2 * pi)


class Heart:
    """
    爱心类
    """

    def __init__(self, generate_frame=20):
        self._points = set()  # 原始爱心坐标集合
        self._edge_diffusion_points = set()  # 边缘扩散效果点坐标集合
        self._center_diffusion_points = set()  # 中心扩散效果点坐标集合
        self.all_points = {}  # 每帧动态点坐标
        self.build(2000)

        self.random_halo = 1000

        self.generate_frame = generate_frame
        for frame in range(generate_frame):
            self.calc(frame)

    def build(self, number):
        # 爱心
        for _ in range(number):
            t = random.uniform(0, 2 * pi)  # 随机不到的地方造成爱心有缺口
            x, y = heart_function(t)
            self._points.add((x, y))

        # 爱心内扩散
        for _x, _y in list(self._points):
            for _ in range(3):
                x, y = scatter_inside(_x, _y, 0.1)
                self._edge_diffusion_points.add((x, y))

        # 爱心内再次扩散
        point_list = list(self._points)
        for _ in range(4000):
            x, y = random.choice(point_list)
            x, y = scatter_inside(x, y, 0.2)
            self._center_diffusion_points.add((x, y))

    @staticmethod
    def calc_position(x, y, ratio):
        # 调整缩放比例
        force = 1 / (((x - CANVAS_CENTER_X) ** 2 +
                     (y - CANVAS_CENTER_Y) ** 2) ** 0.520)  # 好玩点

        dx = ratio * force * (x - CANVAS_CENTER_X) + random.randint(-1, 1)
        dy = ratio * force * (y - CANVAS_CENTER_Y) + random.randint(-1, 1)

        return x - dx, y - dy

    def calc(self, generate_frame):
        ratio = 10 * curve(generate_frame / 10 * pi)  # 圆滑的周期的缩放比例

        halo_radius = int(4 + 6 * (1 + curve(generate_frame / 10 * pi)))
        halo_number = int(
            3000 + 4000 * abs(curve(generate_frame / 10 * pi) ** 2))

        all_points = []

        # 光环
        heart_halo_point = set()  # 光环的点坐标集合
        for _ in range(halo_number):
            t = random.uniform(0, 2 * pi)  # 随机不到的地方造成爱心有缺口
            x, y = heart_function(t, shrink_ratio=12)  # 好玩点
            x, y = shrink(x, y, halo_radius)
            if (x, y) not in heart_halo_point:
                # 处理新的点
                heart_halo_point.add((x, y))
                x += random.randint(-14, 14)
                y += random.randint(-14, 14)
                size = random.choice((1, 2, 2))
                all_points.append((x, y, size))

        # 轮廓
        for x, y in self._points:
            x, y = self.calc_position(x, y, ratio)
            size = random.randint(1, 3)
            all_points.append((x, y, size))

        # 内容
        for x, y in self._edge_diffusion_points:
            x, y = self.calc_position(x, y, ratio)
            size = random.randint(1, 2)
            all_points.append((x, y, size))

        for x, y in self._center_diffusion_points:
            x, y = self.calc_position(x, y, ratio)
            size = random.randint(1, 2)
            all_points.append((x, y, size))

        self.all_points[generate_frame] = all_points

    def render(self, render_canvas, render_frame):
        for x, y, size in self.all_points[render_frame % self.generate_frame]:
            render_canvas.create_rectangle(
                x, y, x + size, y + size, width=0, fill=HEART_COLOR)


def draw(main: Tk, render_canvas: Canvas, render_heart: Heart, render_frame=0):
    render_canvas.delete('all')
    render_heart.render(render_canvas, render_frame)
    main.after(160, draw, main, render_canvas, render_heart, render_frame + 1)


if __name__ == '__main__':
    root = Tk()  # Tk
    canvas = Canvas(root, bg='black', height=CANVAS_HEIGHT, width=CANVAS_WIDTH)
    canvas.pack()
    heart = Heart()  # 心
    draw(root, canvas, heart)  # 开始
    root.mainloop()

二、演示（html版）

请添加图片描述

代码

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  html,
  body {
    height: 100%;
    padding: 0;
    margin: 0;
    background: rgb(2, 2, 2);
  }

  canvas {
    position: absolute;
    width: 100%;

    height: 100%;
  }

  .aa {
    position: fixed;
    left: 50%;
    bottom: 10px;
    color: rgb(9, 194, 113)
  }
</style>

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

  <script>

    /*
     * Settings
     */
    var settings = {
      particles: {
        length: 1000, // 最大颗粒量
        duration: 3, // 粒子持续时间（秒）
        velocity: 100, // 粒子速度（像素/秒）
        effect: -0.75, // 玩这个效果很好
        size: 20, // 颗粒大小（像素）
      },
    };

    (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) {
        // 创建和填充粒子池
        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);

        //处理循环队列
        firstFree++;
        if (firstFree == particles.length) firstFree = 0;
        if (firstActive == firstFree) firstActive++;
        if (firstActive == particles.length) firstActive = 0;
      };
      ParticlePool.prototype.update = function (deltaTime) {
        var i;

        // 处理循环队列
        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);
        }

        //移除非活性粒子
        while (particles[firstActive].age >= duration && firstActive != firstFree) {
          firstActive++;
          if (firstActive == particles.length) firstActive = 0;
        }


      };
      ParticlePool.prototype.draw = function (context, image) {
        //绘制活性粒子
        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;
    })();

    /*
     * 把所有这些放在一起
     */
    (function (canvas) {
      var context = canvas.getContext('2d'),
        particles = new ParticlePool(settings.particles.length),
        particleRate = settings.particles.length / settings.particles.duration, //粒子/秒
        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
        );
      }

      //使用虚拟画布创建粒子图像
      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(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;
        }
        //创建路径
        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();
        //创建填充
        context.fillStyle = '#ff9999';
        context.fill();
        //创建图像
        var image = new Image();
        image.src = canvas.toDataURL();
        return image;
      })();

      //渲染那个东西！
      function render() {
        //下一动画帧
        requestAnimationFrame(render);

        //更新时间
        var newTime = new Date().getTime() / 1000,
          deltaTime = newTime - (time || newTime);
        time = newTime;

        //透明帆布
        context.clearRect(0, 0, canvas.width, canvas.height);

        //创建新粒子
        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);
        }

        //更新和绘制粒子
        particles.update(deltaTime);
        particles.draw(context, image);
      }

      //处理画布的大小
      function onResize() {
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
      }
      window.onresize = onResize;

      //延迟渲染引导
      setTimeout(function () {
        onResize();
        render();
      }, 10);
    })(document.getElementById('pinkboard'));
  </script>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/4734.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

hive最近的学习汇总-20221110

hive最近的学习汇总-20221110

下个项目可能要用hive比较多 之前对分区、分桶搞不明白 趁着最近又学习了一下 ps&#xff1a;之前说的prophet在年底前一定会放上来的 hive是基于Hadoop构建的一套数据仓库分析系统&#xff0c;它提供了丰富的SQL查询方式来分析存储在Hadoop分布式文件系统中的数据&#xff1…
阅读更多...
MySQL管理常用工具介绍

MySQL管理常用工具介绍

1.mysql 该mysql不是指mysql服务&#xff0c;而是指mysql的客户端工具。 -e选项可以在Mysql客户端执行SQL语句&#xff0c;而不用连接到MySQL数据库再执行&#xff0c;对于一些批处理脚本&#xff0c; 这种方式尤其方便。 示例&#xff1a; 2、 mysqladmin mysqladmin 是一个…
阅读更多...
大三Web课程设计——悬崖上的波妞(4页) HTML+CSS（可以很好的应付老师的作业）

大三Web课程设计——悬崖上的波妞(4页) HTML+CSS（可以很好的应付老师的作业）

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐&#x1…
阅读更多...
Java基础系列(八)——线程池详解

Java基础系列(八)——线程池详解

目录 线程池详解 什么是线程池&#xff1f;为什么要用线程池&#xff1f; 如何创建线程池 ThreadPoolExecutor类分析 ThreadPoolExecutor 饱和策略 简单的线程池Demo ThreadPoolExecutor线程池新增线程流程 线程池详解 什么是线程池&#xff1f;为什么要用线程池&#…
阅读更多...
Word2Vec原理以及实战详解

Word2Vec原理以及实战详解

文章目录前言0、序言(词嵌入介绍)一、Word2vec详解。二、CBOW 和 Skip-Gram详解。2-1、CBOW模型:&#xff08;已知周围词预测中心词&#xff09;2-2、Skip-Gram模型&#xff08;已知中心词预测周围词&#xff09;2-3、词嵌入的缺点三、Word2vec实战&#xff08;使用Gensim包&am…
阅读更多...
[SQL]视图和权限

[SQL]视图和权限

有时让用户看到整个基本表是不合适的&#xff0c;出于安全考虑&#xff0c;可能需要向用户隐藏特定的数据。如在instructor关系中隐藏工资值&#xff1a; select ID,name,dept_name from instructor;创建更符合特定用户直觉的个人化的关系集合&#xff0c;如学生成绩表由学生关…
阅读更多...
一文学会JavaScript计时事件

一文学会JavaScript计时事件

文章目录JavaScript 计时事件setInterval() 方法clearInterval() 方法setTimeout() 方法clearTimeout() 方法JavaScript 计时事件 通过使用 JavaScript&#xff0c;我们有能力做到在一个设定的时间间隔之后来执行代码&#xff0c;而不是在函数被调用后立即执行。我们称之为计时…
阅读更多...
Linux--基础命令

Linux--基础命令

一、Linux指令 mkdir&#xff08;Make Directory&#xff09;&#xff1a;在当前路径下新建一个目录 -p --parents 可以是一个路径名称。此时若路径中的某些目录尚不存在,加上此选项后,系统将自动建立好那些尚不存在的目录,即一次可以建立多个目录; ls&#xff08;List…
阅读更多...
Day796.什么是线程数据的强、弱一致性 -Java 性能调优实战

Day796.什么是线程数据的强、弱一致性 -Java 性能调优实战

什么是线程数据的强、弱一致性 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于什么是线程数据的强、弱一致性。 一致性&#xff0c;其实在系统的很多地方都存在数据一致性的相关问题。 除了在并发编程中保证共享变量数据的一致性之外&#xff0c;还有数据库的 ACI…
阅读更多...
Autosar基本概念详细介绍

Autosar基本概念详细介绍

Autosar的由来 在汽车创新应用不断涌现的推动下&#xff0c;当代汽车电子电气&#xff08;E/E—Electronic/Electrical&#xff09;架构已经非常复杂&#xff0c;需要有创新的技术突破才能有效地进行管理&#xff0c;满足日益增长的乘客需求和法律要求。这个需求对汽车制造商及…
阅读更多...
记一次简单的HTTP绕WAF

记一次简单的HTTP绕WAF

0X01 基础知识 关于WAF的问题&#xff1f; 它是我们日常攻防演练必会遇见的&#xff0c;在IOS七层模型中&#xff0c;WAF分为网络层、应用层的&#xff0c;当然还有云 WAF&#xff08;CDNWAF&#xff09;这新型类场景的。不同环境下我们绕过WAF的思路也是有所区别的&#xff…
阅读更多...
mybatis单框架通用mapper使用(二)

mybatis单框架通用mapper使用(二)

mybatis单框架通用mapper使用(二) 1 查询 1.1 简单查询 1.1.1 查多条 a 用法 接口引用.select(实体类对象引用); //里面实体类对象,里面不为null值的部分就会作为条件被查询,多个条件使用and进行拼接起来 //传入为null就是查询全部的值b 测试代码 Testpublic void t2(){Sq…
阅读更多...
直播带货系统源码，居家“神器”不出门就能购物

直播带货系统源码，居家“神器”不出门就能购物

如今&#xff0c;直播带货的火爆程度已经超出了人们的想象。线下销售行业的卖家也开启了直播带货模式&#xff0c;直播带货的的火爆归根到底还是消费者的购物方式发生的变化。从传统的线下购物到电商购物&#xff0c;再到今天的直接直播带货。从各大数据可以总结&#xff0c;消…
阅读更多...
应用密码学期末速通复习

应用密码学期末速通复习

文章目录模运算分数求模负数求模gcd最大公约数逆元分组密码DES加密AES加密操作模式ECB电子密码本CBC分组链接CFB密码反馈OFB输出反馈序列密码A5-1算法RC4算法Hash函数Md5算法SHA-1算法消息认证数字信封公钥密码背包公钥算法RSA公钥算法Rabin公钥算法ElGamal公钥算法ECC公钥算法…
阅读更多...
C/C++刷题DAY2

C/C++刷题DAY2

1.第一题 27. 移除元素 - 力扣&#xff08;LeetCode&#xff09; 分析&#xff1a;对于此题&#xff0c;我们使用双指针的方式去写它&#xff0c;需要注意空间复杂度是O&#xff08;1&#xff09;&#xff0c;时间复杂度也是尽量的越低越好&#xff0c;要去需要原地修改数组&a…
阅读更多...
Matplotlib设置刻度和刻度标签

Matplotlib设置刻度和刻度标签

Matplotlib在我们之前的所有例子中都自动接管了轴上间隔点的任务。Matplotlib的默认刻度定位器和格式化器在很多常见情况下通常都足够了。可以明确提及刻度线的位置和标签以满足特定要求。 xticks()和yticks()函数将列表对象作为参数。列表中的元素表示将显示刻度的相应操作的位…
阅读更多...
nginx学习：配置文件详解，负载均衡三种算法学习，上接nginx实操篇

nginx学习：配置文件详解，负载均衡三种算法学习，上接nginx实操篇

文章目录前言一、对上一篇博文的分析二、配置文件分析1. nginx 官方网址&#xff08;很详细&#xff09;2、配置文件&#xff08;全&#xff09;3、配置文件&#xff08;去掉注释&#xff09;4、讲解a、nginx 配置文件有三部分组成b、全局块c、events块d、http块5、http块中loc…
阅读更多...
无脚本自动化测试

无脚本自动化测试

在当今的企业环境中&#xff0c;软件测试不再被视为不必要的投资&#xff1b;相反&#xff0c;它已经上升到一种需要而不是奢侈品的水平。随着市场的不断变化和竞争的加剧&#xff0c;企业必须做一些让他们与竞争对手区分开来的事情。 为了使自己与众不同&#xff0c;公司必须…
阅读更多...
Dockerfile

Dockerfile

Dockerfile指令集 对于Dockerfiel而言&#xff0c;是在学习docker工具里面&#xff0c;最重点的内容&#xff0c;它可以帮助我们生成自己想要的基础镜像。部署一个容器最重要的就是镜像&#xff0c;指令都已经内置好了。 FROM 这个镜像的妈妈是谁&#xff1f;&a…
阅读更多...
数据结构每日亿题(四)

数据结构每日亿题(四)

复制带随机指针的链表 原题传送门&#xff1a;力扣 题目&#xff1a; 这题的大概意思就是&#xff1a; 有这样一个链表&#xff0c;他比普通的链表多一个成员变量&#xff1a;random指针&#xff0c;这个random指针指向的是这个链表中随机一个地方&#xff0c;这个地方是其它节…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023