Toca Blocks

Like minecraft, but not really ¯\(ツ)/¯.

Minecraft (1/5)

I said, no pointing arrows at your sister!

Minecraft (2/5)

Look we build a house!

Minecraft (3/5)

Yay, let’s have BDay – Party

Minecraft (4/5)

Worlds with unicorns and rainbows where anything can happen.

Minecraft (5/5)

And maybe grow some skills?

Voxels in JavaScript?

Voxel: Volumetric Pixels.

• Piece of cake. How hard can it be?
• Just, add a cube for each voxel, right?
• Why is my CPU on fire!?
• Keep calm and read 0fps.net.

Brute Force

8 * 8 * 8 * 6 = 3072 quads – Hey, look, that’s me!

Culling

8 * 8 * 8 * 3 = 1536 quads – Remove inner faced, better than nothing!

Optimal

6 quads, that would be nice! Right?

Greedy Math

Here is some fancy math…

Greedy Hacks

self.meshLongestSubset = function(pending) {
    var points = pending.list();

    for (var idx in points) {
      var longestX = self.longest(pending, points[idx], color, [1, 0, 0]);
      var longestY = self.longest(pending, points[idx], color, [0, 1, 0]);
      var longestZ = self.longest(pending, points[idx], color, [0, 0, 1]);
      
      var longest = max(longestX, longestY, longestZ);
      
      self.box(longest.start, longest.end, store.get(longest.start), longest.list);
    }
};

Rendering

Our greedy algorithm gets us 8 * 6 = 48 quads, not bad!

voxels::voxels(array(rep(1, 8*8*8), dim=c(8, 8, 8)), offset = c(-8, 0, -8), wireframe = T)

RayRender

Bricks

Using rayrender, https://github.com/ryantimpe/brickr.

Interactive?

Could brickr this be interactive?

Learning Python

“I can neither confirm nor deny my kids learned python”

Learning R

voxels::voxels(array(c(
    1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1,
    1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1,
    1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1,
    1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1,
    1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1
), dim=c(19, 5, 1)), offset = c(-10, 0, 0))

Terrain Generation

Perlin noise would be quite awesome!

But I’m lazy!

No worries, R has your back :)

ambient::noise_perlin(c(5, 5, 1))

## , , 1
## 
##             [,1]       [,2]       [,3]       [,4]       [,5]
## [1,] 0.000000000 0.01715508 0.03434794 0.05153106 0.06858745
## [2,] 0.005636825 0.02278467 0.03994962 0.05706796 0.07401105
## [3,] 0.010870407 0.02799255 0.04511569 0.06216345 0.07899799
## [4,] 0.015451994 0.03251567 0.04957213 0.06653838 0.08327159
## [5,] 0.019273016 0.03623541 0.05319231 0.07006179 0.08670133

Wait, could I just pipe them together O_o!

Maybe, maybe, maybe!

Yes, you can, cause R is pretty awesome!

ceiling(ambient::noise_perlin(c(30, 10, 30)) * 10) %>%
  voxels::voxels(offset = c(-20, 0, -20))