brand-grid-web.md

brand-grid-web

Grid visualisation used in branding materials.

JSON config

Position

Describe the position of the sculpture. Y Axis points up. Z axis is distance.

{
  "pos" : {
    "x": "0.",
    "y": "0.",
    "z": "-0.5"
  }
}

Rotation

Describe rotation of the object around itself.

{
  "rot" : {
    "x": "-0.9",
    "y": "0.2",
    "z": "0."
  }
}

Colors

3 colors in RGB. First and second colors are main colors, 3rd color is for highlights and is very subtle.

{
  "colors" : [
    {
      "r": "0.3",
      "g": "0.05",
      "b": "0.5"
    },
    {
      "r": "1.",
      "g": "0.0",
      "b": "0.1"
    },
    {
      "r": "0.9",
      "g": "0.9",
      "b": "0.7"
    }
  ]
}

Big wave

Set the frequency and amplitude of the main wave.

{
  "bigWave": {
    "amplitude": "0.06" ,
    "freq": "0.3"
  }
}

Small wave

Set the frequency and amplitude of the small ripples and distortions.

{
  "smallWave": {
    "amplitude": "0.007" ,
    "freq": "2.3"
  }
}

Speed

Set the speed of motion. base is the default speed, while mouse is the speed of the interaction.

To disable mouse interaction, set mouse to zero.

{
  "speed": {
    "base": "1" ,
    "mouse": "1"
  }
}