H5 火柴人科目三和GitHub获取仓库点星星的用户列表发生了艺术的碰撞

先看效果,代码写的比较乱,有待优化

效果

https://linyisonger.github.io/H5.Examples/?name=./089.%E7%9C%8B%E6%98%9F%E6%98%9F%E7%9A%84%E8%88%9E%E8%80%85.html
在这里插入图片描述

思路

看起来很简单,实则也不是很难,就是需要思路要打开。
一开始的流程思路是

思路一

  1. 通过视频获取骨骼节点动画 ✔
  2. 使用AI文生图+骨骼节点生成人物信息 ❌ 效果不达预期
  3. 确定人物头部位置+序列帧动画

思路二

  1. 通过视频获取骨骼节点动画 ✔
  2. 通过骨骼动画进行canvas渲染,节点连接从而打到火柴人的效果。✔
  3. 确定人物头部位置+序列帧动画 ❌ 画布太大无法渲染一张图
  4. 确定人物头部位置+序列帧动画 + JSON存储 ✔

实现

  1. 通过视频播放+requestAnimationFrame获取每帧图片
  2. 通过@tensorflow/tfjs+@tensorflow-models/posenet来获取图片骨骼节点
  3. 通过canvas进行骨骼连接

这又是一篇新的内容,AI方面不是很了解,只是看着教程做的。
https://linyisonger.github.io/H5.Examples/?name=./090.%E7%81%AB%E6%9F%B4%E4%BA%BA%E7%94%9F%E6%88%90%E5%99%A8.html
在这里插入图片描述
上传视频后输出的JSON文件是这个示例所需要的。

里面包含每一帧的火柴人Base64图片,头像应该放置的位置。

代码

获取GitHub仓库点星星的用户列表

⚠ 当然这不是很好的写法,一旦出现报错就是死循环

/*** 获取star的用户 默认30一页* @author 	 linyisonger* @date 	 2025-02-18*/
async function getStargazers(page = 1) {const result = await fetch(`https://api.github.com/repos/linyisonger/H5.Examples/stargazers?page=${page}`)return await result.json()
}/*** 获取所有star的用户* @author 	 linyisonger* @date 	 2025-02-18*/
async function getAllStargazers(page = 1, users = []) {let stargazers = await getStargazers(page)users = users.concat(stargazers)if (stargazers.length < 30) return usersreturn await getAllStargazers(page + 1, users)
}

其他的感觉没什么重点

完整代码

<!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"><link rel="stylesheet" href="./assets/global.css"><style>#container {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;height: 100vh;align-content: center;position: relative;}#container canvas {margin-top: -140px}.welcome-statement {position: absolute;top: 100px;font-size: 40px;color: #999;}.join-us {position: absolute;bottom: 200px;z-index: 100;display: inline-flex;padding: 0 20px 3px;line-height: 40px;background: linear-gradient(to bottom, rgb(87, 196, 245), rgb(26, 147, 206));color: rgb(254, 252, 255);cursor: pointer;border-radius: 4px;font-weight: bold;box-shadow: inset 0px -3px 0 rgb(19, 98, 139);}.join-us:active {opacity: .7;box-shadow: inset 0px 0px 0 transparent;}.bgm-controller {position: absolute;right: 20px;top: 20px;width: 40px;}.bgm-controller:active {opacity: .7;}</style>
</head><body><div id="container"><!-- <audio class="bgm" muted="true"><source src="./assets/dance/swing-dance.mp3" /></audio> --><video class="bgm" muted style="display: none;"><source src="./assets/dance/kemusan.mp4" /></video><div class="welcome-statement">感谢各位给 H5.Examples 点⭐⭐~</div><a class="join-us" href="https://github.com/linyisonger/H5.Examples">加入我们</a><img class="bgm-controller" src="./assets/dance/bgm-c.png"></div><script type="module">/*** 加载图* @param {string} src* @returns {Promise<HTMLImageElement>}*/function loadImage(src) {return new Promise((resolve) => {let image = new Image()image.src = src;image.onload = (ev) => {resolve(image)}})}/*** 加载音乐* @param {string} src* @returns {Promise<HTMLImageElement>}*/function loadAudio(src) {return new Promise((resolve) => {let audio = new Audio(src)audio.addEventListener("loadeddata", resolve)})}/*** 获取star的用户 默认30一页* @author 	 linyisonger* @date 	 2025-02-18*/async function getStargazers(page = 1) {const result = await fetch(`https://api.github.com/repos/linyisonger/H5.Examples/stargazers?page=${page}`)return await result.json()}/*** 获取所有star的用户* @author 	 linyisonger* @date 	 2025-02-18*/async function getAllStargazers(page = 1, users = []) {let stargazers = await getStargazers(page)users = users.concat(stargazers)if (stargazers.length < 30) return usersreturn await getAllStargazers(page + 1, users)}// getAllStargazers().then((res) => {//     console.log("获取star的用户", res);// })let dancers = [{"login": "AnChangSu","id": 5037050,"node_id": "MDQ6VXNlcjUwMzcwNTA=","avatar_url": "https://avatars.githubusercontent.com/u/5037050?v=4","gravatar_id": "","url": "https://api.github.com/users/AnChangSu","html_url": "https://github.com/AnChangSu","followers_url": "https://api.github.com/users/AnChangSu/followers","following_url": "https://api.github.com/users/AnChangSu/following{/other_user}","gists_url": "https://api.github.com/users/AnChangSu/gists{/gist_id}","starred_url": "https://api.github.com/users/AnChangSu/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/AnChangSu/subscriptions","organizations_url": "https://api.github.com/users/AnChangSu/orgs","repos_url": "https://api.github.com/users/AnChangSu/repos","events_url": "https://api.github.com/users/AnChangSu/events{/privacy}","received_events_url": "https://api.github.com/users/AnChangSu/received_events","type": "User","user_view_type": "public","site_admin": false},{"login": "HGinGitHub","id": 103415496,"node_id": "U_kgDOBin-yA","avatar_url": "https://avatars.githubusercontent.com/u/103415496?v=4","gravatar_id": "","url": "https://api.github.com/users/HGinGitHub","html_url": "https://github.com/HGinGitHub","followers_url": "https://api.github.com/users/HGinGitHub/followers","following_url": "https://api.github.com/users/HGinGitHub/following{/other_user}","gists_url": "https://api.github.com/users/HGinGitHub/gists{/gist_id}","starred_url": "https://api.github.com/users/HGinGitHub/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/HGinGitHub/subscriptions","organizations_url": "https://api.github.com/users/HGinGitHub/orgs","repos_url": "https://api.github.com/users/HGinGitHub/repos","events_url": "https://api.github.com/users/HGinGitHub/events{/privacy}","received_events_url": "https://api.github.com/users/HGinGitHub/received_events","type": "User","user_view_type": "public","site_admin": false},{"login": "harris2012","id": 12846977,"node_id": "MDQ6VXNlcjEyODQ2OTc3","avatar_url": "https://avatars.githubusercontent.com/u/12846977?v=4","gravatar_id": "","url": "https://api.github.com/users/harris2012","html_url": "https://github.com/harris2012","followers_url": "https://api.github.com/users/harris2012/followers","following_url": "https://api.github.com/users/harris2012/following{/other_user}","gists_url": "https://api.github.com/users/harris2012/gists{/gist_id}","starred_url": "https://api.github.com/users/harris2012/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/harris2012/subscriptions","organizations_url": "https://api.github.com/users/harris2012/orgs","repos_url": "https://api.github.com/users/harris2012/repos","events_url": "https://api.github.com/users/harris2012/events{/privacy}","received_events_url": "https://api.github.com/users/harris2012/received_events","type": "User","user_view_type": "public","site_admin": false},{"login": "Lavenir7","id": 105573717,"node_id": "U_kgDOBkrtVQ","avatar_url": "https://avatars.githubusercontent.com/u/105573717?v=4","gravatar_id": "","url": "https://api.github.com/users/Lavenir7","html_url": "https://github.com/Lavenir7","followers_url": "https://api.github.com/users/Lavenir7/followers","following_url": "https://api.github.com/users/Lavenir7/following{/other_user}","gists_url": "https://api.github.com/users/Lavenir7/gists{/gist_id}","starred_url": "https://api.github.com/users/Lavenir7/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/Lavenir7/subscriptions","organizations_url": "https://api.github.com/users/Lavenir7/orgs","repos_url": "https://api.github.com/users/Lavenir7/repos","events_url": "https://api.github.com/users/Lavenir7/events{/privacy}","received_events_url": "https://api.github.com/users/Lavenir7/received_events","type": "User","user_view_type": "public","site_admin": false},{"login": "linyisonger","id": 34770610,"node_id": "MDQ6VXNlcjM0NzcwNjEw","avatar_url": "https://avatars.githubusercontent.com/u/34770610?v=4","gravatar_id": "","url": "https://api.github.com/users/linyisonger","html_url": "https://github.com/linyisonger","followers_url": "https://api.github.com/users/linyisonger/followers","following_url": "https://api.github.com/users/linyisonger/following{/other_user}","gists_url": "https://api.github.com/users/linyisonger/gists{/gist_id}","starred_url": "https://api.github.com/users/linyisonger/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/linyisonger/subscriptions","organizations_url": "https://api.github.com/users/linyisonger/orgs","repos_url": "https://api.github.com/users/linyisonger/repos","events_url": "https://api.github.com/users/linyisonger/events{/privacy}","received_events_url": "https://api.github.com/users/linyisonger/received_events","type": "User","user_view_type": "public","site_admin": false},{"login": "lpleipeng","id": 39250004,"node_id": "MDQ6VXNlcjM5MjUwMDA0","avatar_url": "https://avatars.githubusercontent.com/u/39250004?v=4","gravatar_id": "","url": "https://api.github.com/users/lpleipeng","html_url": "https://github.com/lpleipeng","followers_url": "https://api.github.com/users/lpleipeng/followers","following_url": "https://api.github.com/users/lpleipeng/following{/other_user}","gists_url": "https://api.github.com/users/lpleipeng/gists{/gist_id}","starred_url": "https://api.github.com/users/lpleipeng/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/lpleipeng/subscriptions","organizations_url": "https://api.github.com/users/lpleipeng/orgs","repos_url": "https://api.github.com/users/lpleipeng/repos","events_url": "https://api.github.com/users/lpleipeng/events{/privacy}","received_events_url": "https://api.github.com/users/lpleipeng/received_events","type": "User","user_view_type": "public","site_admin": false},{"login": "xxxggg-ctrl","id": 63829555,"node_id": "MDQ6VXNlcjYzODI5NTU1","avatar_url": "https://avatars.githubusercontent.com/u/63829555?v=4","gravatar_id": "","url": "https://api.github.com/users/xxxggg-ctrl","html_url": "https://github.com/xxxggg-ctrl","followers_url": "https://api.github.com/users/xxxggg-ctrl/followers","following_url": "https://api.github.com/users/xxxggg-ctrl/following{/other_user}","gists_url": "https://api.github.com/users/xxxggg-ctrl/gists{/gist_id}","starred_url": "https://api.github.com/users/xxxggg-ctrl/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/xxxggg-ctrl/subscriptions","organizations_url": "https://api.github.com/users/xxxggg-ctrl/orgs","repos_url": "https://api.github.com/users/xxxggg-ctrl/repos","events_url": "https://api.github.com/users/xxxggg-ctrl/events{/privacy}","received_events_url": "https://api.github.com/users/xxxggg-ctrl/received_events","type": "User","user_view_type": "public","site_admin": false}]let bgmControllerDom = document.querySelector('.bgm-controller')bgmControllerDom.addEventListener("click", () => {const bgm = document.body.querySelector('.bgm')bgm.muted = !bgm.muted;bgmControllerDom.setAttribute('src', bgm.muted ? './assets/dance/bgm-c.png' : './assets/dance/bgm-o.png')})// 2D火柴人 贴图function fetchLoad(url) {return new Promise((resolve) => {fetch(url).then((response) => response.json()).then(resolve)})}async function initGame() {dancers = await getAllStargazers()let dance = await fetchLoad("./assets/dance/kemusan.json")const DROP_FRAME = 5 // 抽帧const ZOOM_OUT = .5// 检查动作信息// for (let i = 0; i < dance.frames.length; i++) {//     console.log(i);//     const frame = dance.frames[i];//     const img = document.createElement('img')//     img.src = frame.url;//     document.body.appendChild(img)// }let danceCvsList = []for (let i = 0; i < dancers.length; i++) {const dancer = dancers[i];let danceCvs = await createCanvas(dancer)danceCvsList.push({dancer,cvs: danceCvs})}let i = 0async function animationFrame() {if (i % DROP_FRAME == 0) {for (let j = 0; j < danceCvsList.length; j++) {const { cvs, dancer } = danceCvsList[j];await drawFrame(cvs, dance.frames[(i / DROP_FRAME) % dance.frames.length], dancer.avatar_url)}}requestAnimationFrame(animationFrame)i++;}await animationFrame()document.body.querySelector('.bgm').play()document.body.querySelector('.bgm').loop = true;/*** 创建一个用户* @author 	 linyisonger* @date 	 2025-02-23*/function createCanvas(dancer) {let avatarUrl = dancer.avatar_urllet cvs = document.createElement("canvas")cvs.setAttribute('width', dance.width)cvs.setAttribute('height', dance.height)cvs.width = dance.width * ZOOM_OUT;cvs.height = dance.height * ZOOM_OUT;document.body.querySelector("#container").appendChild(cvs)return cvs}/*** 渲染一帧* @author 	 linyisonger* @date 	 2025-02-23*/async function drawFrame(cvs, frame, avatar) {/** @type {CanvasRenderingContext2D } */let ctx = cvs.getContext('2d')let roleImg = await loadImage(frame.url)let avatarImg = await loadImage(avatar)ctx.clearRect(0, 0, cvs.width, cvs.height)ctx.drawImage(roleImg, 0, 0, cvs.width, cvs.height)let avatarWidth = 40 * ZOOM_OUTctx.drawImage(avatarImg, (frame.avatar.x * ZOOM_OUT - avatarWidth / 2), (frame.avatar.y * ZOOM_OUT - avatarWidth / 2), avatarWidth, avatarWidth)}}initGame()</script></body></html>

源码仓库

更新的话文章可能不一定会更新,仓库会可能更新,有问题可以提issue~

https://github.com/linyisonger/H5.Examples

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云k8s服务部署操作一指禅

文章目录 DockerFile镜像操作阿里云k8s服务部署 DockerFile # 使用 JDK 17 官方镜像 # linux架构&#xff1a;FROM --platformlinux/amd64 openjdk:17-jdk-slim # arm架构&#xff1a;openjdk:17-jdk-slim FROM --platformlinux/amd64 openjdk:17-jdk-slim# 设置工作目录 WORK…

【算法】游艇租贷

问题 ⻓江游艇俱乐部在⻓江上设置了 n 个游艇租聘站&#xff0c;游客可以在这些租聘站租 ⽤游艇&#xff0c;然后在下游的任何⼀个租聘站归还。游艇出租站 i 到 j 的租⾦为 r(i, j)&#xff0c;1 ≤i< j≤n&#xff0c;设计⼀个算法&#xff0c;计算从出租站 i 到 j 所需的…

AnythingLLM安装包下载+CUDA安装包下载地址,提升GPU性能【语义熔炉网】

一、安装包下载地址 1. AnythingLLM安装包 &#xff08;支持Windows/macOS/Linux&#xff0c;部分用户反馈需科学上网&#xff09;国内镜像备份&#xff08;含DeepSeek相关工具&#xff09;&#xff1a;www.mix688.com/118.html 2. CUDA安装包 国内镜像&#xff08;若官网访…

【大模型】蓝耘智算平台部署DeepSeek-R1大模型使用详解

目录 一、前言 二、蓝耘智算平台介绍 2.1 蓝耘智算平台是什么 2.2 平台优势 2.3 应用场景 2.4 对DeepSeek 的支持 2.4.1 DeepSeek 简介 2.4.2 DeepSeek 优势 三、蓝耘智算平台部署DeepSeek-R1操作过程 3.1 注册账号 3.1.1 余额检查 3.2 部署DeepSeek-R1 3.2.1 获取…

本地部署deepseek-r1 ollama+anythingllm

本期笔者带给大家部署一个本地私有化知识库&#xff0c;简单明了&#xff0c;直接步入主题&#xff0c;需要读者可以继续关注支持一下啊&#xff01; 目录 背景步骤 一、环境准备二、Ollama环境部署三、AnythingLLM安装 总结 开始下载应用&#xff1a; 操作系统&#xff1a…

VSCode ssh远程连接内网服务器(不能上网的内网环境的Linux服务器)的终极解决方案

VSCode ssh远程连接内网服务器&#xff08;不能上网的内网环境的Linux服务器&#xff09; 离线下载vscode-server并安装: 如果远程端不能联网可以下载包离线安装,下载 vscode-server 的 url 需要和 vscode 客户端版本的 commit-id 对应.通过 vscode 面板的帮助->关于可以获…

计算机视觉算法实战——三维重建(主页有源码)

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​ 1. 三维重建领域简介 三维重建&#xff08;3D Reconstruction&#xff09;是计算机视觉的核心任务之一&#xff0c;旨在通过多视角图像、视频…

十、OSG学习笔记-多线程(OpenThreads)

上一节内容&#xff1a; 九、OSG学习笔记-NodeVisitor节点遍历器-CSDN博客https://blog.csdn.net/weixin_36323170/article/details/145742756?spm1001.2014.3001.5501 本章节代码&#xff1a; OsgStudy/Openthreads CuiQingCheng/OsgStudy - 码云 - 开源中国https://gite…

AI颠覆蛋白质工程:ProMEP零样本预测突变效应

概述 在生命科学的“造物革命”中&#xff0c;蛋白质工程一直面临着“试错成本”与“设计效率”的双重挑战——传统方法依赖繁复的多序列比对&#xff08;MSA&#xff09;或耗时的实验室筛选&#xff0c;如同在浩瀚的蛋白质宇宙中盲选星辰。而今日&#xff0c;一项发表于《Cel…

计算机领域里注重实战的9本书

计算机领域注重实战的书籍众多&#xff0c;以下是一些备受推崇的注重实战的计算机书籍&#xff1a; 1、Redis实战 当你需要以接近实时的速度访问快速变动的数据流时&#xff0c;Redis这样的键值数据库就是你的极好选择。通过接纳散列、字符串、列表等多种数据类型&#xff0c;…

《2024工业控制系统网络安全态势白皮书》

一、白皮书发布背景 东北大学“谛听”网络安全团队近日撰写并发布了2024年工业控制网络安全态势白皮书&#xff0c;读者可以通过报告了解2024年工控安全相关政策法规报告及典型工控安全事件分析。 二、白皮书主要内容 报告对工控系统漏洞、联网工控设备、工控蜜罐与威胁情报…

【VSCode】MicroPython环境配置

【VSCode】MicroPython环境配置 RT-Thread MicroPython 插件安装MicroPython 库文件配置结束语 RT-Thread MicroPython 插件安装 在 VSCode 拓展中搜索 “RT-Thread MicroPython” 并安装&#xff0c;详细配置步骤&#xff08;修改 VSCode 默认终端、MicroPython 代码补全&…

如何在VMware虚拟机的window10系统中安装网易mumu模拟器

安卓模拟器是可以在电脑的windows环境中运行手机软件的工具,喜欢网游或者是要逆向安卓应用应该都要安装这个模拟器,如果要模拟器正常工作,主机的虚拟化应该开启,也就是要开启vt。在有些情况下,需要把模拟器安装到电脑的虚拟机里,隔离模拟器与主机,这时vt的开启就稍麻烦些…

Mac本地部署DeepSeek-r1

一、安装DeepSeek 1.1 安装ollama模型管理器 ollama官网下载安装包&#xff1a;https://ollama.com/ 看到mac右上方工具图标出现小羊驼&#xff0c;表示ollama已经安装成功。 2.2 安装DeepSeek 打开终端&#xff0c;输入命令&#xff1a;ollama run deepseek-r1:1.5b&…

单页图床HTML源码+本地API接口图床系统修复版源码

源码介绍 图床系统是一种用于存储和管理图片文件的在线服务。它允许用户上传图片文件&#xff0c;并生成相应的图片链接&#xff0c;从而方便用户在网页、社交媒体或其他平台上分享图片。 PS:源码压缩包分为两个版本&#xff0c;一个是调用360第三方api接口&#xff0c;另外一…

初级渗透测试工程师需要学什么?网络安全零基础入门到精通教程建议收藏!

1、前言 本文主要介绍如何成为一名初级的渗透测试工程师所需要学习的内容&#xff0c;后续也会基于此将自己的学习总结、心得记录下来。相信在不断坚持下&#xff0c;争取在今年五月初成为一名初级的渗透测试工程师。 2、涉及知识领域 基础网络知识&#xff1a; 理解TCP/IP协…

DeepSeek写俄罗斯方块手机小游戏

DeepSeek写俄罗斯方块手机小游戏 提问 根据提的要求&#xff0c;让DeepSeek整理的需求&#xff0c;进行提问&#xff0c;内容如下&#xff1a; 请生成一个包含以下功能的可运行移动端俄罗斯方块H5文件&#xff1a; 核心功能要求 原生JavaScript实现&#xff0c;适配手机屏幕 …

网络安全营运周报

&#x1f345; 点击文末小卡片 &#xff0c;免费获取网络安全全套资料&#xff0c;资料在手&#xff0c;涨薪更快 第三章网络安全基础 一、网络安全概述 1、网络安全现状及安全挑战 网络安全范畴极其广泛&#xff0c;可以说是涉及多方面。 因为计算机病毒层出不穷以及黑客的…

C#中级教程(1)——解锁 C# 编程的调试与错误处理秘籍

一、认识错误&#xff1a;编程路上的 “绊脚石” 在 C# 编程中&#xff0c;错误大致可分为两类&#xff1a;语法错误和语义错误&#xff08;逻辑错误&#xff09;。语法错误就像是写作文时的错别字和病句&#xff0c;编译器一眼就能识别出来&#xff0c;比如变量名拼写错误、符…

QML Button 部件的使用

按钮也是程序开发中最经常用到的部件&#xff0c;当然其也是比较简单&#xff0c;只需要懂得最基本的操作即可&#xff1b; Button {id: btnwidth: 100height: 50 } 生成一个最基本的按钮 text 属性可以设置按钮文本&#xff1b; flat 属性设置为true时&#xff0c;只有鼠标…