roses.js

var RADIUS = 45;
var INTERVAL = 80;
var WIDTH = 800;
var HEIGHT = 640;
var COLORS = [
  [0xff3300, 0xee2800, 0xbb1100, 0x990000, 0x770000, 0x000000], // RED
  [0x00cc33, 0x00aa18, 0x006600, 0x000000]  // GREEN
];

var config = {
  type: Phaser.AUTO,
  width: WIDTH,
  height: HEIGHT,
  scene: {
    create: create
  }
};
new Phaser.Game(config);

function rose2to1(radius, angle) {
  return radius * Math.sin(2 * (angle + Math.PI / 4));
}

function rose2to3(radius, angle) {
  return radius * Math.sin(2 / 3 * (angle + 3 * Math.PI / 4));
}

// rF: function(radius, angle)
function arc(xc, yc, rF, rMax, from, to) {
  if (!from) {
    from = 0;
  }
  if (!to) {
    to = Math.PI * 2;
  }
  var points = [];
  var fi = 0;
  for (fi = from; fi < to + 0.05; fi += 0.05) {
    var r = rF(rMax, fi);
    points.push(new Phaser.Geom.Point(xc + r * Math.cos(fi), yc + r * Math.sin(fi)));
  }
  return points;
}

function wideOctArcs(graphics, xc, yc, colors, rF, rMid, oct, startingOct) {
  for (k = colors.length - 1; k >= 0; k -= 1) {
    var l = startingOct;
    graphics.lineStyle(2, colors[k], 1.0);
    for (i = 0; i < 4; i++) {
      graphics.strokePoints(
        arc(xc, yc, rF, rMid + k + 1, l * oct, (l + 1) * oct));
      graphics.strokePoints(
        arc(xc, yc, rF, rMid - k - 1, l * oct, (l + 1) * oct));
      l += 2;
    }
  }
}

function create() {
  var graphics = this.add.graphics();

  // Bottom arcs
  for (ix = INTERVAL; ix < WIDTH; ix += INTERVAL) {
    for (iy = INTERVAL; iy < HEIGHT; iy += INTERVAL) {
      if (((ix + iy) / INTERVAL) % 2) {
        wideOctArcs(graphics, ix, iy, COLORS[0], rose2to1, RADIUS, Math.PI / 4, 1);
      } else {
        wideOctArcs(graphics, ix, iy, COLORS[1], rose2to3, RADIUS, 3 * Math.PI / 4, 1);
      }
    }
  }

  // Top arcs
  for (ix = INTERVAL; ix < WIDTH; ix += INTERVAL) {
    for (iy = INTERVAL; iy < HEIGHT; iy += INTERVAL) {
      if (((ix + iy) / INTERVAL) % 2) {
        wideOctArcs(graphics, ix, iy, COLORS[0], rose2to1, RADIUS, Math.PI / 4, 0);
      } else {
        wideOctArcs(graphics, ix, iy, COLORS[1], rose2to3, RADIUS, 3 * Math.PI / 4, 0);
      }
    }
  }
}