Perlin noise for Dart implementation failing

Question

So the past hours I've been trying to make a simple Perlin noise generator in Dart. To do this I decided to use the psuedo-code for 2d generation on this page (great read!)

This is what my Dart implementation looks like: http://pastebin.com/NZF0U6ju

Unfortunately, when I render to a canvas, I only get randomly generated diagonal lines as seen in this image:

For rendering the image I used the following script:

void main() {
  PerlinNoise p = new PerlinNoise(octaves:5);
  CanvasElement c = query('canvas');
  CanvasRenderingContext2D con = c.context2D;
  ImageData id= con.createImageData(1,1);
  List d= id.data;
  d[3]=255;  
  for (var i=0;i<c.width;i++) {
    for (var j=0;j<c.height;j++) {
      int val = (p.perlinNoise(i.toDouble(), j.toDouble())*200).toInt();
      d[0] = val;
      d[1] = val;
      d[2] = val;
      con.putImageData(id, i, j);
    }
  }
}

Does anyone know what causes this behaviour and where my implementation went wrong?

Answer 1

I saw some problems in your code :

• line 42 : it should be double fracY = y-intY; instead of double fracY = x-intY;
• your _noise function is symetric : _noise(x, y) == _noise(y, x). The article use x+y*57 that is not symetric.
• having read quickly the page you mentioned I understand that _interpolatedNoise, _smoothNoise and _noise should take an additionnal i parameter.

Each iteration calls a different noise function, denoted by Noisei.

EDIT : Here's a attempt to implement the 2D Perlin noise :

• I have change the implementation of _noise
• perlinNoise needed to be call with number between 0 and 1 (see main)

import 'dart:html';
import 'dart:math' as Math;

class PerlinNoise {
  int _octaves;
  double _persistence;
  Map<int, Map<int, Map<int, double>>> _noises = {};
  final _rand = new Math.Random();

  PerlinNoise({int octaves: 1, double persistence:1.0}) :
    _octaves = octaves,
    _persistence = persistence;

  double _noise(int i, int x, int y) =>
      _noises.putIfAbsent(i, () => {})
        .putIfAbsent(x, () => {})
          .putIfAbsent(y, () => 2 * _rand.nextDouble() - 1);

  double _smoothNoise (int i, int x, int y) {
    double corners = (_noise(i, x - 1, y - 1) +
                      _noise(i, x + 1, y - 1) +
                      _noise(i, x - 1, y + 1) +
                      _noise(i, x + 1, y + 1)) / 16;
    double sides  = (_noise(i, x - 1, y    ) +
                     _noise(i, x + 1, y    ) +
                     _noise(i, x    , y - 1) +
                     _noise(i, x    , y + 1)) / 8;
    double center = _noise(i, x, y) / 4;
    return corners + sides + center;
  }

  double _interpolate (double a,double b,double x) {
    double ft = x * Math.PI;
    double f = (1 - Math.cos(ft)) * 0.5;
    return a * (1 - f) + b * f;
  }

  double _interpolatedNoise (int i, num x, num y) {
    int intX = x.floor();
    int intY = y.floor();

    double fracX = (x - intX).toDouble();
    double fracY = (y - intY).toDouble();

    double v1 = _smoothNoise(i, intX    , intY    );
    double v2 = _smoothNoise(i, intX + 1, intY    );
    double v3 = _smoothNoise(i, intX    , intY + 1);
    double v4 = _smoothNoise(i, intX + 1, intY + 1);

    double i1 = _interpolate(v1, v2, fracX);
    double i2 = _interpolate(v3, v4, fracX);

    return _interpolate(i1, i2, fracY);
  }

  double perlinNoise(num x, num y) {
    var total = 0;

    for (var i = 0; i < _octaves; i++) {
      int frequency = Math.pow(2, i);
      double amplitude = Math.pow(_persistence, i);

      total += _interpolatedNoise(i, x * frequency, y * frequency) * amplitude;
    }
    return total;
  }
}

void main() {
  PerlinNoise p = new PerlinNoise(octaves: 5, persistence: 0.9);
  CanvasElement c = query('canvas');
  CanvasRenderingContext2D con = c.context2D;
  ImageData id = con.createImageData(1,1);
  List d = id.data;
  d[3] = 255;
  for (var i = 0; i < c.width; i++) {
    for (var j = 0; j < c.height; j++) {
      // my canvas is 256px x 256px
      int val = (128 + 128 * p.perlinNoise(i / 256.0, j / 256.0)).toInt();
      d[0] = val;
      d[1] = val;
      d[2] = val;
      con.putImageData(id, i, j);
    }
  }
  print('done');
}