{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreid7zj6bv4m4qonl62dguhvcdrsiip37jkgwh6g5jqxrslogxwoz2i",
    "uri": "at://did:plc:6dmfe46c76jjenq3kaxc5eds/app.bsky.feed.post/3mfsgxlhibtr2"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreidnmxk36bv4pzikxgsgbg6llxytsg25tnesje3oieswgbm2byqkfu"
    },
    "mimeType": "image/png",
    "size": 5775
  },
  "path": "/creating-a-wooden-board-with-perlin-noise-in-mankala/",
  "publishedAt": "2026-02-26T04:58:00.000Z",
  "site": "https://sayandeep.bearblog.dev",
  "textContent": "During this **Season of KDE** , we made a lot of design changes to the **Mankala Engine**. We successfully redesigned most of the components including the entire home page, boards and game variants. Now I was in the middle of creating a new cover image to select game variants. I tried to create a natural wooden board for **Bohnenspiel** , and well, we got most of the things nicely done.\n\n### Designing a board\n\nI had used **perlin noise** and a custom shader to give the wooden-like texture to the board. I used this function in our shader for the random generation of the particles.\n\n\n    glsl\n    float rand(vec2 n) {\n    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);\n    }\n\n\nTo get a smooth, wooden-like surface, I used a function that interpolates between these random points. After experimenting with it a bit, I mixed and blended them with random values and was able to get a continuous noise surface.\n\n\n    glsl\n    float n = noise(v.yx * vec2(2.0, 12.0));\n    float rings = sin(v.x * 20.0 + n * 10.0);\n\n\n### Improvements in Wooden Texture\n\nBut to get the wood effect, this was still not enough, as if we were to render this directly, then we would have gotten a blurry, cloud-like texture. So, we stretched the noise heavily across one axis to give it a wave-like effect, having a more similar texture to a board. This made a color stretch of dark and light brown.\n\n\n    qml\n    ShaderEffect {\n    anchors.fill: parent\n    property real time: 0.0\n    property variant color1: \"#8B4513\"\n    property variant color2: \"#D2691E\"\n\n\n### Final look\n\nI used **QML's ShaderEffect** component to compile it and connect it to the MenuCard component in Mankala, which would act as a cover image while selecting Bohnenspiel. At last, I added some shadows and depth to make it more realistic, giving a feel of wood carving to the board.\n\nThanks for reading :)",
  "title": "Creating a wooden board with Perlin Noise in Mankala"
}