Perlin snakes

最新推荐文章于 2025-07-10 14:32:26 发布

X01动力装甲

最新推荐文章于 2025-07-10 14:32:26 发布

阅读量222

点赞数 1

CC 4.0 BY-SA版权

分类专栏：可视化

本文为博主原创文章，未经作者允许禁止任何形式的转载。

本文链接：https://blog.csdn.net/lin5165352/article/details/114085071

可视化专栏收录该内容

16 篇文章

订阅专栏

博客展示了相似参数下几种噪声的效果对比，包括perlin2、perlin3、simplex2、simplex3的效果，这是个动态绘制过程，还给出了效果来源链接，代码虽古老但仍可用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

noise perlin

相似参数下几种噪声的效果对比：

在这里插入图片描述
这是个动态的绘制过程

perlin2的效果
在这里插入图片描述

perlin3的效果
在这里插入图片描述

simplex2的效果：
在这里插入图片描述

simplex3的效果
在这里插入图片描述

<body>
	<div class="centerbox">
	  <canvas width="1440" height="900"></canvas>
	  <input type="button" value="Save">
	</div>
	<script src="./Perlin snakes_files/perlin.js"></script>
	<script src="./Perlin snakes_files/p.js"></script>
</body>

// Generated by CoffeeScript 1.3.3
var TAU, button, canvas, ctx, draw, f, fpselem, h, p1, particles, period, raf, w, _i;
canvas = document.getElementsByTagName('canvas')[0];
fpselem = document.getElementById('fps');
w = canvas.width = 1440;
h = canvas.height = 900;
TAU = 2 * Math.PI;
ctx = canvas.getContext('2d');
period = 1 / 800;
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = 'rgba(1,1,1,0.3)';
noise.seed(Math.random());
particles = [];
for (_i = 1; _i <= 200; _i++) {
  p1 = {
    x: Math.random() * w,
    y: h / 2 + Math.random() * 50,
    a: 0
  };
  particles.push(p1);
  particles.push({
    x: p1.x,
    y: p1.y,
    a: TAU / 2
  });
}
draw = function() {
  var a, p, v, _j, _len, _results;
  _results = [];
  for (_j = 0, _len = particles.length; _j < _len; _j++) {
    p = particles[_j];
    v = noise.perlin2(p.x * period, p.y * period);
    ctx.fillStyle = "hsla(" + (Math.floor(v * 360)) + ", 95%, 20%, 0.05)";
    ctx.fillRect(p.x, p.y, 1.5, 1.5);
    p.h++;
    a = v * 2 * Math.PI + p.a;
    p.x += Math.cos(a);
    _results.push(p.y += Math.sin(a));
  }
  return _results;
};
raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
  return window.setTimeout(callback, 1000 / 60);
};

button = document.getElementsByTagName('input')[0];

button.onclick = function() {
  return window.open(canvas.toDataURL('image/png'));
};

f = function() {
  raf(f);
  return draw();
};

raf(f);