ESP32显示动态网页：养一只小蜘蛛

于 2024-09-16 00:09:07 发布
阅读量129 收藏 3
点赞数 3
分类专栏： ESP32打发时间 文章标签： 嵌入式硬件 单片机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53529450/article/details/142290990
版权

一、连接热点

        电脑端和ESP32端连接同一热点，热点名和密码在代码中体现。

二、ESP32端代码

        完整代码如下：

#include <WiFi.h>
#include <WebServer.h>

// 替换为你的Wi-Fi SSID 和密码
const char* ssid = "LSTM32F1SCORE";
const char* password = "3276865536";

WebServer server(80);

// HTML 内容
const char* html = R"rawliteral(
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜘蛛</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
            position: fixed;
            background: rgb(0, 0, 0);
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        window.requestAnimFrame = function () {
            return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) { window.setTimeout(callback, 1000 / 60); }
            );
        }

        function init(elemid) {
            let canvas = document.getElementById(elemid);
            c = canvas.getContext('2d')
            w = (canvas.width = window.innerWidth)
            h = (canvas.height = window.innerHeight)
            c.fillStyle = "rgba(30,30,30,1)"
            c.fillRect(0, 0, w, h)
            return { c: c, canvas: canvas }
        }

        window.onload = function () {
            let c = init("canvas").c,
                canvas = init("canvas").canvas,
                w = (canvas.width = window.innerWidth),
                h = (canvas.height = window.innerHeight),
                mouse = { x: false, y: false },
                last_mouse = {}

            function dist(p1x, p1y, p2x, p2y) {
                return Math.sqrt(Math.pow(p2x - p1x, 2) + Math.pow(p2y - p1y, 2))
            }

            class segment {
                constructor(parent, l, a, first) {
                    this.first = first;
                    if (first) {
                        this.pos = { x: parent.x, y: parent.y }
                    } else {
                        this.pos = { x: parent.nextPos.x, y: parent.nextPos.y }
                    }
                    this.l = l;
                    this.ang = a;
                    this.nextPos = {
                        x: this.pos.x + this.l * Math.cos(this.ang),
                        y: this.pos.y + this.l * Math.sin(this.ang),
                    }
                }

                update(t) {
                    this.ang = Math.atan2(t.y - this.pos.y, t.x - this.pos.x)
                    this.pos.x = t.x + this.l * Math.cos(this.ang - Math.PI)
                    this.pos.y = t.y + this.l * Math.sin(this.ang - Math.PI)
                    this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang)
                    this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang)
                }

                fallback(t) {
                    this.pos.x = t.x
                    this.pos.y = t.y
                    this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang)
                    this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang)
                }

                show() {
                    c.lineTo(this.nextPos.x, this.nextPos.y)
                }
            }

            class tentacle {
                constructor(x, y, l, n, a) {
                    this.x = x;
                    this.y = y;
                    this.l = l;
                    this.n = n;
                    this.t = {};
                    this.rand = Math.random();
                    this.segments = [new segment(this, this.l / this.n, 0, true)];
                    for (let i = 1; i < this.n; i++) {
                        this.segments.push(
                            new segment(this.segments[i - 1], this.l / this.n, 0, false)
                        );
                    }
                }

                move(last_target, target) {
                    this.angle = Math.atan2(target.y - this.y, target.x - this.x);
                    this.dt = dist(last_target.x, last_target.y, target.x, target.y);
                    this.t = {
                        x: target.x - 0.8 * this.dt * Math.cos(this.angle),
                        y: target.y - 0.8 * this.dt * Math.sin(this.angle)
                    };
                    if (this.t.x) {
                        this.segments[this.n - 1].update(this.t)
                    } else {
                        this.segments[this.n - 1].update(target)
                    }
                    for (let i = this.n - 2; i >= 0; i--) {
                        this.segments[i].update(this.segments[i + 1].pos)
                    }
                    if (
                        dist(this.x, this.y, target.x, target.y) <=
                        this.l + dist(last_target.x, last_target.y, target.x, target.y)
                    ) {
                        this.segments[0].fallback({ x: this.x, y: this.y })
                        for (let i = 1; i < this.n; i++) {
                            this.segments[i].fallback(this.segments[i - 1].nextPos)
                        }
                    }
                }

                show(target) {
                    if (dist(this.x, this.y, target.x, target.y) <= this.l) {
                        c.globalCompositeOperation = "lighter"
                        c.beginPath()
                        c.moveTo(this.x, this.y)
                        for (let i = 0; i < this.n; i++) {
                            this.segments[i].show()
                        }
                        c.strokeStyle = "hsl(" + (this.rand * 60 + 180) +
                            ",100%," + (this.rand * 60 + 25) + "%)"
                        c.lineWidth = this.rand * 2
                        c.lineCap = "round"
                        c.lineJoin = "round"
                        c.stroke()
                        c.globalCompositeOperation = "source-over"
                    }
                }

                show2(target) {
                    c.beginPath()
                    if (dist(this.x, this.y, target.x, target.y) <= this.l) {
                        c.arc(this.x, this.y, 2 * this.rand + 1, 0, 2 * Math.PI)
                        c.fillStyle = "white"
                    } else {
                        c.arc(this.x, this.y, this.rand * 2, 0, 2 * Math.PI)
                        c.fillStyle = "darkcyan"
                    }
                    c.fill()
                }
            }

            let maxl = 400,
                minl = 50,
                n = 30,
                numt = 600,
                tent = [],
                clicked = false,
                target = { x: 0, y: 0 },
                last_target = {},
                t = 0,
                q = 10;

            for (let i = 0; i < numt; i++) {
                tent.push(
                    new tentacle(
                        Math.random() * w,
                        Math.random() * h,
                        Math.random() * (maxl - minl) + minl,
                        n,
                        Math.random() * 2 * Math.PI,
                    )
                )
            }

            function draw() {
                if (mouse.x) {
                    target.errx = mouse.x - target.x
                    target.erry = mouse.y - target.y
                } else {
                    target.errx =
                        w / 2 +
                        ((h / 2 - q) * Math.sqrt(2) * Math.cos(t)) /
                        (Math.pow(Math.sin(t), 2) + 1) -
                        target.x;
                    target.erry =
                        h / 2 +
                        ((h / 2 - q) * Math.sqrt(2) * Math.cos(t) * Math.sin(t)) /
                        (Math.pow(Math.sin(t), 2) + 1) -
                        target.y;
                }

                target.x += target.errx / 10
                target.y += target.erry / 10

                t += 0.01;

                c.beginPath();
                c.arc(
                    target.x,
                    target.y,
                    dist(last_target.x, last_target.y, target.x, target.y) + 5,
                    0,
                    2 * Math.PI
                );
                c.fillStyle = "hsl(210,100%,80%)"
                c.fill();

                for (let i = 0; i < numt; i++) {
                    tent[i].move(last_target, target)
                    tent[i].show2(target)
                }
                for (let i = 0; i < numt; i++) {
                    tent[i].show(target)
                }
                last_target.x = target.x
                last_target.y = target.y
            }

            function loop() {
                window.requestAnimFrame(loop)
                c.clearRect(0, 0, w, h)
                draw()
            }

            window.addEventListener("resize", function () {
                w = canvas.width = window.innerWidth
                h = canvas.height = window.innerHeight
                loop()
            })

            loop()
            setInterval(loop, 1000 / 60)

            canvas.addEventListener("mousemove", function (e) {
                last_mouse.x = mouse.x
                last_mouse.y = mouse.y
                mouse.x = e.pageX - this.offsetLeft
                mouse.y = e.pageY - this.offsetTop
            }, false)

            canvas.addEventListener("mouseleave", function (e) {
                mouse.x = false
                mouse.y = false
            })
        }
    </script>
</body>

</html>
)rawliteral";

// 设置路由
void handleRoot() {
    server.send(200, "text/html", html);
}

void setup() {
    // 启动串口
    Serial.begin(115200);
    delay(1000);

    // 连接到Wi-Fi
    WiFi.begin(ssid, password);
    Serial.print("Connecting to WiFi");
    while (WiFi.status() != WL_CONNECTED) {
        delay(1000);
        Serial.print(".");
    }
    Serial.println(" connected!");

    // 打印IP地址
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());

    // 处理根路由
    server.on("/", handleRoot);

    // 启动服务器
    server.begin();
}

void loop() {
    server.handleClient();
}

        将const char* ssid = "LSTM32F1SCORE";const char* password = "3276865536";替换为你的热点和密码。

        运行后打开串口监视器，串口中打印网址如下：

将网址复制到浏览器打开可得：

前端参考：前端练习小项目 —— 养一只电子蜘蛛-CSDN博客

nnerddboy
关注
专栏目录
ESP32-C3入门教程 问题篇⑦—— fatal error: esp_bt.h: No such file or directory 找不到esp_bt.h
小康师兄
06-22 2706
ESP32-C3入门教程 问题篇⑦—— fatal error: esp_bt.h: No such file or directory 找不到esp_bt.h
ESP32-C3入门教程——导读
热门推荐
小康师兄
09-13 5万+
一、环境篇 ESP32-C3入门教程 环境篇①——简单介绍与软硬件准备 ESP32-C3入门教程 环境篇②——Windows开发环境准备 ESP32-C3入门教程 环境篇③——VS Code IDE快速入门 二、基础篇 ESP32-C3入门教程 基础篇①——GPIO口控制 ESP32-C3入门教程 基础篇②——PWM控制 ESP32-C3入门教程 基础篇③——ADC输入 ESP32-C3入门教程 基础篇④——串口通信 ESP32-C3入门教程 基础篇⑤——SPI通信 ESP32-C3入门教程 基础篇⑥——I
ESP在百度百科的阐述
u010210478的专栏
08-26 1487
超能力（超心理学名词） ESP是英文Extra Sensory Perception 的略称，意指“超感觉”，通常用做心灵感应、透视力、触知力、预知力等的总称。ESP 能力等于是“右脑的五感”。正如左脑有五感一样，右脑也有五感。有人认为只是少数特异人士才拥有的神奇力量，其实这是每一个人都具备的能力，只不过人类因为压抑潜在意识的大脑新皮质过于发达，使得ESP的能力被封存起来，相反的动物的大脑组
蜘蛛纸牌分析
hacke2' Blog
02-06 2333
今晚一口气看完了M的BLOG，鸭梨山大啊，看来我还要好好努力。。先转一篇 一大早起来我家的小猫又出问题了。。哎这也用了好多年了。。现在觉得三天两头给我坏一次。。Link灯一直不亮。。打电话给电信局的。人家说他在休假不管这事。。这尼玛坑爹的。大过年的让我上不了网啊。。看会书。。但是上不了网查资料也查不了。。。老爸也很郁闷。。上不了网他就打不了斗地主了。。在卧室里一个人玩蜘蛛纸牌呢。但是技术不够。。
蜘蛛纸牌分析与简单DIY
weishan521520的专栏
10-14 4780
<br />蜘蛛纸牌分析与简单DIY<br /><br />偶尔玩蜘蛛纸牌（以下简称蜘蛛），Windows XP下的一个小游戏。感觉里面有两个地方不怎么好。第一个是显示可行的操作比较麻烦，要点击“游戏”菜单，然后点击“显示可行的操作”方可。第二个是发牌后不能撤销，有时候好不容易堆好了10多张同花顺，只差一两张牌即可销掉，可发牌时发了张K或者Q的大牌，就麻烦了。遇到不合意的程序当然要自己修改了。<br /><br />先搞定第一个，很简单。我们知道Windows是消息驱动的，对于点击菜单项，Windows给目
学习打卡7：scanf()函数和鲸鱼优化算法
一点涵的博客
09-15 1439
督促自己：2020-9-15 学习记录： 《逆向工程权威指南》上 scanf（）函数： 局部变量x： #include<stdio.h> int main(){ int x; printf("Enter X:\n"); scanf("%d",&x); printf("You entered %d...\n",x); return 0; } X86 MSVC 汇编： 序言中，PUSH ECX指令作用不是为了保存EXC的值，是为了在栈内分配4个字节的空间、用来储
VSCode初次编译ESP32报错【ninja: error: loading ‘build.ninja‘: 系统找不到指定的文件】问题已解决
u010614434的博客
08-29 2万+
VSCODE怎么安装ESP32的编译环境Espressif IDF 就不多说了，网上教程一大堆，具体可参照官方网站： https://docs.espressif.com/projects/esp-idf/zh_CN/latest/esp32/get-started/vscode-setup.html https://github.com/espressif/vscode-esp-idf-extension/blob/master/docs/tutorial/install.md 本文简单说下当Espres
Arduino ESP8266/32 自定义IO组网页状态显示与控制
perseverance51博客
09-12 1254
Arduino ESP8266/32 自定义IO组网页状态显示与控制（演示版）
ESP32-C3学习笔记（2）：ESP32 C3 开发环境搭建（Arduino）
wanglichao1989的专栏
12-19 8603
ESP32 C3 Arduino 开发环境搭建
嵌入式硬件基础知识
golove666的博客
09-12 1347
嵌入式硬件的基础知识涵盖了处理器、存储器、电源管理、外设接口、时钟系统等多个方面。掌握这些基础知识对于进行嵌入式系统设计、开发和调试是至关重要的，同时还需要了解PCB设计的原则和嵌入式硬件开发的流程。
面试高阶问题：单片机选型策略万字长文详解
大模型大数据攻城狮的专栏
09-13 1215
这意味着开发者可以通过编程对单片机进行定制化的功能修改和优化，同时，固件升级机制能够确保在不需要更换硬件的情况下，通过软件更新来提升产品的性能和功能。例如，一些单片机提供了丰富的外设接口和片内资源，如多个SPI、I²C、UART等通信接口，以及大容量的RAM和ROM，这为未来添加新的功能模块提供了便利。同时，选型时还应充分考虑单片机的成本因素，以实现项目性能和成本的优化平衡。例如，在工业控制环境中，由于存在大量的电磁干扰和机械振动，单片机必须具备出色的抗干扰能力和高稳定性，以确保控制系统的可靠运行。
19：I2C一：程序模拟I2C通信时序
qq_51284092的博客
09-12 788
I2C通信协议和串口通信USART不同，USART是异步，全双工的通信协议。而I2C通信协议是一种同步，半双工，带数据应答，支持总线挂载多设备的通信协议。USART传输数据的时候是先传输数据帧的低位，在传高位。而I2C传输数据的时候是高位先行。由上图所示：有2条总线，数据总线SDA和时钟总线SCL。其中时钟线SCL只能由主机控制，而SDA主机和从机都可以控制。当主机向从机发送。
STM32与ESP8266的使用
m0_51830537的博客
09-12 633
【代码】STM32与ESP8266的使用。
STM32点亮第一个LED
u012902518的博客
09-12 507
纯小白文，STM32第一步，从常量，RCC，GPIO，LED开始，点亮GPIOB上的LED。
物联网——USART协议
Vodka的博客
09-11 793
【代码】物联网——USART协议。
掌握单片机,其实并不难
weixin_42411288的博客
09-11 936
单片机的学习绝不仅仅是对一项知识的掌握。想要学好单片机，需要从硬件结构、内部资源、外设应用等几个方面多方位入手。而要想成为一名嵌入式工程师，就要对单片机的基础非常熟悉，并且掌握C语言当中各个功能的初始化、启动、停止各类函数的编写调试。那么想要掌握单片机需要从哪几个方面入手呢？
什么是上拉，下拉？
最新发布
ddidi111的博客
09-14 1018
4、对于非集电极（或漏极）开路输出型电路（如普通门电路）提升电流和电压的能力是有限的，上拉电阻的功能主要是为集电极开路输出型电路输出电流通道。，其作用主要是确保某端口常态时有确定电平：用法示例：当一个接有上拉电阻的端口设为输入状态时，他的常态就为高电平，用于检测低电平的输入。3、一般说的是I/O端口，有的可以设置，有的不可以设置，有的是内置，有的是需要外接，I/O端口的输出类似于。给负载提供的输出电流，灌电流时输出低电平是外部给数字电路的输入电流，它们实际就是输入、输出电流能力。电阻同时起限流作用！
linux网络编程——UDP编程
only_print的博客
09-12 895
UDP 是一个简单的面向数据报的运输层协议，在网络中用于处理数据包，是一种无连接的协议。UDP 不提供可靠性的传输，它只是把应用程序传给 IP 层的数据报发送出去，但是并不能保证它们能到达目的地。由于 UDP 在传输数据报前不用在客户和服务器之间建立一个连接，且没有超时重发等机制，故而传输速度很快。对于UDP网络编程步骤，这里借用韦山东老师的图：图 3UDP 用户数据包模式UDP相对于TCP编程来说简单了很多，因为UDP没有TCP那些可靠连接的东西，所以编程相对来说也简单了一些。
ESP32 自定义组件教程：从添加到配置
ESP32开发中，自定义组件是一个强大的功能，可以帮助开发者扩展硬件平台的功能。本文将详细介绍如何在ESP-IDF（Espressif IoT Development Framework）环境中为ESP32添加自己的component。以下是关键步骤和实现原理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值