On 3D pizza ingredients and how to place them

26/07/2020Intropizzaproceduralrandom3d

Generating coordinates to plot points on a circumference in Javascript

In a gist, what I had to to achieve was drawing the 3D ingredients of the pizza you can find in the homepage in such a way their placing would be aesthetically pleasing and in a manner as similar as possible as what a real Pizzaiolo would do.

It had to give the sense they weren’t all placed in a single spot, as in crowded up, but also that they’d work visually while all kinds of toppings were enabled, a process that a real baker would do on the fly while placing incrementally the ingredients on each step.

Initially, I went for static coordinates, as in:

const coords = [
  {
    x: 3 + randomInteger(3, 2),
    y: 5 + randomInteger(3, 5),
  },
  {
    x: 12 + randomInteger(3, 2),
    y: 15 + randomInteger(3, 5),
  },
]

and so on.

Rough to maintain.

I went for a procedural approach, easier to share among all the generators that handle ingredients, drawing ingredients like I’ve seen plenty of Pizzaiolis do, in a circular manner, trying to fill the gaps and obtaining it a somewhat organic placement by shifting this or that ingredient:

function coordinateGenerator(x0, y0, r, items) {
  const coordinate = []
  for (let i = 0; i < items; i++) {
    let x = x0 + r * Math.cos((2 * Math.PI * i) / items)
    let y = y0 + r * Math.sin((2 * Math.PI * i) / items)
    coordinate.push({
      x: x + randomIntFromInterval(5, 10),
      y: y + randomIntFromInterval(5, 10),
    })
  }
  return coordinate
}

A solution derived from these ones: