人物画像————圆球转动效果

最新推荐文章于 2020-10-26 10:44:55 发布
最新推荐文章于 2020-10-26 10:44:55 发布
阅读量1.4k 收藏 5
点赞数 1
分类专栏： 微码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongsdh/article/details/81133206
版权

前言：

<!doctype html>
<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>人物画像</title>
		<meta name="author" content="hongru.chen" />
		<style type="text/css">
			html {
				overflow: hidden
			}
			
			body,
			.screen {
				overflow: hidden;
				width: 500px;
				height: 500px;
				position: absolute;
				margin: 0;
				padding: 0;
				border: 1px solid red;
			}
			
			#screen {
				left: 0;
				top: 0;
				zoom: 1;
			}
			
			#screen a {
				position: absolute;
				font-size: 12px;
				overflow: hidden;
				padding: 1px 2px;
				font-weight: bold;
			}
			
			#screen a:hover {
				border: 1px solid #ccc;
				background: #666
			}
		</style>
		
		
		<script src="jquery.min.js"></script>
		<script type="text/javascript">
			var tt="";
			var BeautifullMath = function() {
				var obj = [],
					xm = 0,
					ym = 0,
					axe = 0,
					aye = 0,
					parts = 50,
					scr, aArr, txe, tye, nw, nh;
				var colorArr = ['black', 'blue', 'red', 'green', 'yellow'];
				var addEvent = function(o, e, f) {
					window.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' + e, function() {
						f.call(o)
					})
				}
				var resize = function() {
					nw = scr.offsetWidth * .5;
					nh = scr.offsetHeight * .5;
				}
				var init = function(id, f) {
					scr = document.getElementById(id);
					aArr = document.getElementsByTagName('a');
					
//					function fun(e){
//						e = e || window.event;
//						xm = e.clientX;
//						ym = e.clientY;
//					}
					addEvent(document, 'mousemove', function(e) {
//						fun(e);
//						console.log(e.target)
						console.log(e.target.tagName)
						if(e.target.tagName == "A"){
							return false;
							clearInterval(tt);
						}
						e = e || window.event;
						xm = e.clientX;
						ym = e.clientY;
						
					});
					resize();
					addEvent(window, 'resize', resize);
					__init(f);
					tt = setInterval(run, 10);
				}
				var __init = function(f) {
					for(var i = 0; i < aArr.length; i++) {
						var o = {};
						o.p = aArr[i];
						o.p.style.color = colorArr[Math.round(Math.random() * 4)];
						var r = i / parts,
							j, a, b;
						j = i % parts;
//						a = Math.floor(j) / 200 + (Math.floor(j / 2) % 10) / 5 * Math.PI * 2;
						a = Math.floor(j) / 50 + (Math.floor(j / 2) % 10) / 5 * Math.PI * 2;
						b = Math.acos(-0.9 + (j % 4) * 0.6);
						r = !!f ? f(r) : r - r * r + .5;
						var sbr = Math.sin(b) * r;
						o.x = Math.sin(a) * sbr;
						o.y = Math.cos(a) * sbr;
						o.z = Math.cos(b) * r;
						obj.push(o);
						o.transform = function() {
							var ax = .02 * txe,
								ay = .02 * tye,
								cx = Math.cos(ax),
								sx = Math.sin(ax),
								cy = Math.cos(ay),
								sy = Math.sin(ay);
							//rotation
							var z = this.y * sx + this.z * cx;
							this.y = this.y * cx + this.z * -sx;
							this.z = this.x * -sy + z * cy;
							this.x = this.x * cy + z * sy;
							//3d
							var scale = 1.3 / (1 + this.z),
								x = this.x * scale * nh + nw - scale * 2,
								y = this.y * scale * nh + nh - scale * 2;
							//set style
							var p = this.p.style;
							if(x >= 0 && y >= 0 && x < nw * 2 && y < nh * 2) {
								var c = Math.round(256 + (-this.z * 256));
								p.left = Math.round(x) + 'px';
								p.top = Math.round(y) + 'px';
								p.fontSize = Math.round(14 * scale) + 'px';
//								p.fontSize = (Math.random()*50 +scale)  + 'px';
								p.zIndex = 200 + Math.floor(-this.z * 100);
								p.opacity = .6 - this.z;
								p.filter = 'alpha(opacity=' + 100 * (.6 - this.z) + ')';
							} else p.width = "0px";
						}
					}
				}
				//run function 
				var run = function() {
					var se = 1 / nh;
					txe = (ym - axe) * se;
					tye = (xm - aye) * se;
					axe += txe;
					aye += tye;
					
					/* ---- anim particles ---- */
					for(var i = 0, o; o = obj[i]; i++) o.transform();
				}
				return {
					init: init
				}
			}();
			onload = function() {
				BeautifullMath.init('screen', function(r) {
					return .4;
				});
			}
		</script>
	</head>

	<body>
		<div id="screen" class="screen">
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
		</div>
	</body>

</html>

 

2020/09/22扩展，自动匀速旋转


1、去掉鼠标移入效果

2、修改滚动方向

 

<!doctype html>
<html>
 
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>人物画像</title>
		<meta name="author" content="hongru.chen" />
		<style type="text/css">
			html {
				overflow: hidden
			}
			
			body,
			.screen {
				overflow: hidden;
				width: 500px;
				height: 500px;
				position: absolute;
				margin: 0;
				padding: 0;
				border: 1px solid red;
			}
			
			#screen {
				left: 0;
				top: 0;
				zoom: 1;
			}
			
			#screen a {
				position: absolute;
				font-size: 12px;
				overflow: hidden;
				padding: 1px 2px;
				font-weight: bold;
			}
			
			#screen a:hover {
				border: 1px solid #ccc;
				background: #666
			}
		</style>
		
		
		<script src="jquery.min.js"></script>
		<script type="text/javascript">
			var tt="";
			var BeautifullMath = function() {
				var obj = [],
					xm = 0,
					ym = 0,
					axe = 0,
					aye = 0,
					parts = 50,
					scr, aArr, txe, tye, nw, nh;
				var colorArr = ['black', 'blue', 'red', 'green', 'yellow'];
				var addEvent = function(o, e, f) {
					window.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' + e, function() {
						f.call(o)
					})
				}
				var resize = function() {
					nw = scr.offsetWidth * .5;
					nh = scr.offsetHeight * .5;
				}
				var init = function(id, f) {
					scr = document.getElementById(id);
					aArr = document.getElementsByTagName('a');
					
//					function fun(e){
//						e = e || window.event;
//						xm = e.clientX;
//						ym = e.clientY;
//					}
//					addEvent(document, 'mousemove', function(e) {
//						fun(e);
//						console.log(e.target)
//						console.log(e.target.tagName)
//						if(e.target.tagName == "A"){
//							return false;
//							clearInterval(tt);
//						}
//						e = e || window.event;
//						xm = e.clientX;
//						ym = e.clientY;
//						
//					});
					resize();
					addEvent(window, 'resize', resize);
					__init(f);
					tt = setInterval(run, 10);
				}
				var __init = function(f) {
					for(var i = 0; i < aArr.length; i++) {
						var o = {};
						o.p = aArr[i];
						o.p.style.color = colorArr[Math.round(Math.random() * 4)];
						var r = i / parts,
							j, a, b;
						j = i % parts;
//						a = Math.floor(j) / 200 + (Math.floor(j / 2) % 10) / 5 * Math.PI * 2;
						a = Math.floor(j) / 50 + (Math.floor(j / 2) % 10) / 5 * Math.PI * 2;
						b = Math.acos(-0.9 + (j % 4) * 0.6);
						r = !!f ? f(r) : r - r * r + .5;
						var sbr = Math.sin(b) * r;
						o.x = Math.sin(a) * sbr;
						o.y = Math.cos(a) * sbr;
						o.z = Math.cos(b) * r;
						obj.push(o);
						o.transform = function() {
							var ax = .02 * txe,
								ay = .02 * tye,
								cx = Math.cos(ax),
								sx = Math.sin(ax),
								cy = Math.cos(ay),
								sy = Math.sin(ay);
							//rotation
							var z = this.y * sx + this.z * cx;
							this.y = this.y * cx + this.z * -sx;
							this.z = this.x * -sy + z * cy;
							this.x = this.x * cy + z * sy;
							//3d
							var scale = 1.3 / (1 + this.z),
								x = this.x * scale * nh + nw - scale * 2,
								y = this.y * scale * nh + nh - scale * 2;
							//set style
							var p = this.p.style;
							if(x >= 0 && y >= 0 && x < nw * 2 && y < nh * 2) {
								var c = Math.round(256 + (-this.z * 256));
								p.left = Math.round(x) + 'px';
								p.top = Math.round(y) + 'px';
								p.fontSize = Math.round(14 * scale) + 'px';
//								p.fontSize = (Math.random()*50 +scale)  + 'px';
								p.zIndex = 200 + Math.floor(-this.z * 100);
								p.opacity = .6 - this.z;
								p.filter = 'alpha(opacity=' + 100 * (.6 - this.z) + ')';
							} else p.width = "0px";
						}
					}
				}
				//run function 
				var run = function() {
					var se = 1 / nh;
					
//					axe=100//绝对值越大，速度越快
//					aye=100//绝对值越大，速度越快
					
					axe=-100//绝对值越大，速度越快
					aye=-100//绝对值越大，速度越快
					
					
					txe = (ym - axe) * se;
					tye = (xm - aye) * se;
					axe += txe;
					aye += tye;
					
					/* ---- anim particles ---- */
					for(var i = 0, o; o = obj[i]; i++) o.transform();
				}
				return {
					init: init
				}
			}();
			onload = function() {
				BeautifullMath.init('screen', function(r) {
					return .4;
				});
			}
		</script>
	</head>
 
	<body>
		<div id="screen" class="screen">
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
			<a href="http://www.cnblogs.com/hongru/">老腊肉666</a>
		</div>
	</body>
 
</html>

效果：

dongsdh
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
可视化 | 人物画像的设计方法
weixin_34192816的博客
01-20 1425
2019独角兽企业重金招聘Python工程师标准>>> ...
人物画像及“七步人物角色法”
galaxy__fish的博客
10-16 4万+
人物画像的主要目的是分析人物行为，最终为每个人物打上标签，以及该标签的权重 1.标签是对用户的社会属性、生活习惯、消费行为等进行进一步的抽象, 通过简单规则算法或者大数据技术对用户行为习惯的分析提取, 以及对用户简单直接的特征描述即用户标签, 标签的目的使我们简单、直观的了解用户的某些特征。 2.权重代表指数，即目标在这以标签上的侧重值 人物画像的核心在于给人物“打标签”，每一
e2fsprogs-1.41.14.tar.gz
03-30
e2fsprogs-1.41.14.tar.gz
Javascript秘密花园
boylufeng的专栏
03-29 1703
https://bonsaiden.github.io/JavaScript-Garden/zh/
p5.js绘制简单人物+交互
qq_44057258的博客
10-27 2983
人物简单交互成图预览图片使用工具基本图形的绘制重要函数直线圆弧贝塞尔曲线代码实现添加动态图形引入时间参数动态画圆函数实现简单交互眼睛跟随鼠标移动点击眨眼源代码 成图预览 图片 使用工具 p5.js在线编辑网址 基本图形的绘制 重要函数 查p5.js文档得： 直线 //语法 line(x1, y1, x2, y2) line(x1, y1, z1, x2, y2, z2) 参数 x1 Numb...
用户画像系统解决方案——用户画像应用.pdf
11-18
用户画像系统解决方案——用户画像应用.pdf
用户画像系统解决方案——用户画像产品化.pdf
11-18
用户画像系统解决方案——用户画像产品化.pdf 本文档介绍了用户画像系统解决方案，旨在驱动营收增长、打通用户在不同客户端行为数据、开发及部署画像应用服务层、画像数据分析 SECURE、CLOUD-BASED NETWORK 图像...
用户画像系统解决方案——标签数据存储.pdf
11-18
用户画像系统解决方案——标签数据存储 用户画像系统解决方案是指通过收集和分析用户行为数据，生成用户画像的过程。该系统的核心是标签数据的存储和分析。本文将详细介绍用户画像系统解决方案中标签数据存储的方法...
用户画像系统解决方案——搭建开发环境.pdf
11-18
本资源旨在解决用户画像系统的开发环境搭建问题，提供了一个完整的解决方案，涵盖了用户画像基础知识、标签指标体系、搭建开发环境、标签数据存储、标签数据开发、开发性能调优、作业流程调度、用户画像产品化、用户...
用户画像系统解决方案——标签数据开发.pdf
11-18
用户画像系统解决方案 用户画像系统解决方案是指通过标签数据开发和画像应用服务层，驱动营收增长，打通用户在不同客户端行为数据的解决方案。该解决方案主要包括用户画像基础知识、用户标签指标体系、搭建开发环境...
用D3.js画的人物关系demo
05-01
用D3.js画的人物关系动态demo，简单易懂，容易上手。用D3.js画的人物关系动态demo，简单易懂，容易上手。
HTML5 canvas粒子生成人物面部轮廓插件
12-17
插件描述：一个奇葩的canvasdemo. 参考示例：http://www.jq22.com/jquery-info5145
p5.js创意编程——Q版人像绘制
weixin_44374653的博客
11-01 1538
目录主要函数介绍贝塞尔曲线ShapeframeRate完整代码实现效果 主要函数介绍 贝塞尔曲线 如图，是p5.js官方reference上关于贝塞尔曲线的说明，一次可以画出一条贝塞尔曲线。但在作图中往往是不够用的，画画时我们大多是绘制一个不规则的闭合区域，故会用到接下来的函数。 Shape 在这里，为了绘制出闭合图形，我们使用了 beginShape() 和 endShape() 函数，如下代...
js绘图
weixin_46351593的博客
10-26 1万+
文章目录JavaScript绘图使用canvas绘制图形矩形路径圆弧直线与曲线定义样式和颜色颜色不透明度实线虚线经向渐变图案阴影填充规则图形变形保存和恢复状态清除画布移动坐标旋转坐标缩放图形变换图形图形合成合成裁切绘制文本填充文字轮廓文字文本样式测量宽度导入图像缩放图像裁切图像平铺图像 JavaScript绘图 HTML5新增了Canvas API，允许js在<canvas>标签识别的画布上绘制图形，创建动画，设置设计实时视频处理或渲染。借助一套编程接口，用户可以在页面上绘制出任何漂亮的图形。
用p5.js画一幅自画像
Slient116的博客
11-02 4067
用p5.js画一幅自画像 首先来看一下成品~ 这幅画没有太大的难度，唯一需要动脑筋的地方是繁琐的坐标计算和动态背景，人物的绘制主要是由三角形、四边形、椭圆构成的，代码就不细讲啦，主要讲一下动态背景的制作。 人物绘制代码： 在这里插入代码片 ...
关于JS绘图
programfan477976996的专栏
08-06 2095
html>head>META http-equiv=Content-Type content="text/html; charset=UTF-8">style type="text/css">#Layer1,#Layer2{    position:absolute;    padding:5px;    z-index:1;}#Layer1 {
人物画像
xuquanweiwinwinwin的专栏
10-30 1万+
talkingdata工程师分享人物画像的笔记；作为一个数据公司，通过提供sdk给各个行业来获取用户终端数据，地理信息，app信息等来推测一个用户画像，是一个非常具有价值的操作，可以给商家带来财富
用户画像总结
热门推荐
zzhhoubin的博客
03-28 15万+
        最近在工作之余，结合自己的理解和论坛上的一些帖子，整理了份用户画像的文章，个人觉得这篇文章在宏观上很好地描述了用户画像的主要内容。（文章内的图片来源于不同帖子，权当分享，侵删）一、 什么是用户画像        用户画像是指根据用户的属性、用户偏好、生活习惯、用户行为等信息而抽象出来的标签化用户模型。通俗说就是给用户打标签，而标签是通过对用户信息分析而来的高度精炼的特征标识。通过打...
用户画像数据可视化
Running_Tiger的博客
03-17 8907
用户画像数据可视化1、数据可视化方案技术框架：maven+spring+phoenix 核心点：采用phoenix与hbase整合，通过sql语句来操作NoSql数据库。2、Phoenix建立hbase表的映射表这里列出了一部分字段具体字段根据业务需要来创建。create table "cheng_adm_personas_hbase_20170101"( "user_id" varchar(10
python人物画像
最新发布
01-04
在Python中绘制人物画像可以通过使用绘图库和科学计算库来实现。以下是一个简单的示例代码，演示了如何使用Python绘制人物画像： ```python import matplotlib.pyplot as plt from PIL import Image # 读取人物照片 image = Image.open("path_to_image.jpg") # 将照片转换为灰度图像 gray_image = image.convert("L") # 将灰度图像转换为numpy数组 image_array = np.array(gray_image) # 绘制人物画像 plt.imshow(image_array, cmap="gray") plt.axis("off") plt.show() ``` 这段代码首先使用PIL库中的`Image.open()`函数读取人物照片，并使用`convert()`函数将其转换为灰度图像。然后，使用numpy库将灰度图像转换为numpy数组。最后，使用matplotlib库的`imshow()`函数绘制人物画像，并使用`axis("off")`函数隐藏坐标轴，最后使用`show()`函数显示画像。 请注意，这只是一个简单的示例，你可以根据自己的需求和喜好进行更复杂的图像处理和绘制操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值