【JS绘制Voronoi图 - 1】Voronoi 简单介绍

最新推荐文章于 2024-06-23 09:42:32 发布

Caretaker9

最新推荐文章于 2024-06-23 09:42:32 发布

阅读量1k

点赞数

分类专栏：自学算法

本文链接：https://blog.csdn.net/aihidao/article/details/104756677

版权

自学同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

算法

10 篇文章 0 订阅

订阅专栏

Voronoi ：其实就是在一个平面上有若干个特殊点，每个点都和里它最近的特殊点的颜色相同。
这里写出一个基本代码，Voronoi图可以用于生成随机地图之类的。网上有相关教程，这个是自己写的第一步。
因为生成地图要自然边界和平均分布的地界，后期的开发都要围绕这个基础。因为接下来要给Voronoi 单独设个类了。所以先把第一步的代码贴出了。以做笔记。

<!DOCTYPE HTML>
<html>
<body>

<main>

</main>

<script type="text/javascript">

var width = 500;
var height = 500;
var main = document.getElementsByTagName('main')[0];

var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
main.appendChild(canvas);

// var p = new Point(100,200);
// alert(p.getX());
//draw

var cxt=canvas.getContext("2d");

//points
var point_number = 4;
var points = new Array();

//第一步随机生成点
for(var i =0 ; i <point_number ; i++){
	var tmpPoint = new Point(0,0);
	tmpPoint.randomPoint();
	points.push(tmpPoint);
}

//记录不同点的颜色
var colorMap = new Map();

//绘制出每个点的颜色，它的颜色和它距离最近的点的颜色相同
for(var i = 0; i < width ; i++){
	for(var j = 0; j <height ; j++){
		
		var dis = -1;
		var nearPointID = 0;
		for(var m = 0 ; m < points.length ; m++){
			var tmpDis = PointDis(new Point(i,j),points[m]);
			if(dis < 0){
				dis = tmpDis;
			}

			if(tmpDis<dis){
				dis = tmpDis;
				nearPointID = m;
			}
		}
		if(!colorMap.get(nearPointID)){
			var color = Math.floor(Math.random() * 16777216).toString(16);
			///
            //图二中图片填充错误是由于没有下句代码导致，因为有时候生成的16进制数字没有不能达到6个字符。 比如 255 就为 FF
            //导致颜色为 #FF，导致填充失败。所以我们加个不足六位的 0补齐。
            while(color.length<6){
                color = "0" + color;
            }
            ///
			colorMap.set(nearPointID,color);
		}

		cxt.fillStyle = "#" + colorMap.get(nearPointID);
		cxt.fillRect(i,j,1,1);
	}
}

//绘出随机点
for(var i =0 ; i <point_number ; i++){
	cxt.fillStyle = "#000000";
	cxt.fillRect(points[i].getX(),points[i].getY(),2,2);
}

console.log("over");



//class point
function Point(ax,ay){
	var x = 0;
	var y = 0;

	var init = function(){
		x = ax;
		y = ay;
	}

	this.getX = function(){
		return x;
	}

	this.getY = function(){
		return y
	}

	this.setPoint = function(p1){
		x = p1.getX();
		y = p1.getY();
	}

	this.randomPoint = function(){
		x = Math.round(Math.random() * width); 
		y = Math.round(Math.random() * height); 
	}

	this.isReal = function(){
		return x!=-1&&y!=-1;
	}

	init();
}
//计算出点的距离函数
function PointDis(p1,p2){
	return Math.sqrt((Math.pow((p1.getX() - p2.getX()),2) + Math.pow((p1.getY() - p2.getY()),2)));
}
</script>

</body>
</html>

Caretaker9

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JS绘制Voronoi图 - 1】Voronoi 简单介绍

Voronoi ：其实就是在一个平面上有若干个特殊点，每个点都和里它最近的特殊点的颜色相同。这里写出一个基本代码，Voronoi图可以用于生成随机地图之类的。网上有相关教程，这个是自己写的第一步。因为生成地图要自然边界和平均分布的地界，后期的开发都要围绕这个基础。因为接下来要给Voronoi 单独设个类了。所以先把第一步的代码贴出了。以做笔记。<!DOCTYPE HTML>&l...
复制链接

扫一扫

专栏目录