Voxelamming - Programming Learning App with ARKit

Voxelamming is an iOS compatible AR-based programming learning app for programming beginners and generative artists.

Voxelamming Studio is a new version that supports Apple Vision Pro. Operation is almost the same as Voxelamming, but some functions are limited.

Download on the App Store

What is Voxelamming?

Voxelamming = Voxel + Programming

Voxelamming is a programming learning app with AR. It can be used for free on AR-compatible iPhones and iPads (iOS 16 and above). You can have fun placing voxels (the smallest units in 3D space, similar to pixels) in a virtual space that you have programmed on your computer.

How to Use

Preparing Your Computer

Both Windows and Mac are supported. If the programming language (Python, Node.js, Ruby, Swift, Scratch3 MOD) is not installed on your computer, please install the language you want to use. Data communication between the computer and the device (iPhone, iPad, Apple Vision Pro) uses an Internet connection (they do not need to be connected to the same network). Once this is done, your computer is ready.

Placing a Plane Anchor

iPhone, iPad

Launch the voxelamming app. The first time you launch the app, it will ask for permission to use the camera, please grant it by selecting "Yes". Once the camera is launched, ARKit will automatically search for a real-world plane. When the plane detection marker (red-green-blue coordinate axes) appears, tap the screen to place a plane anchor. The plane anchor is made up of black and white tiles. With this, you are ready to place voxels.

Apple Vision Pro

Launch the voxelamming vision application. Tap the "Set Base Anchor" button to place the base anchor. The base anchor consists of white and black tiles. Now you are ready to place voxels. Note that the base anchor can be moved by dragging.

Modeling (Programming) Voxels

On your computer (Windows, Mac), program the "voxel data" for modeling the voxels. The voxel data includes information such as "location, color, size, and placement interval". The supported languages are Scratch3 MOD, Python, JavaScript (Node.js), Ruby, and Swift.

Let's create a script. Please refer to the scripts in the sample folder. Don't forget to match the variable room_name (roomName) to the string displayed in the center of the device (iPhone, iPad) screen in order to connect to the WebSocket server's room.

Then, use the loop and conditional expressions of each language to create voxel data. The position of the voxel is specified by the x, y, and z axis values, with the plane anchor as the reference. The x-axis represents left and right, the y-axis represents up and down, and the z-axis represents depth (the front is positive) (the unit is centimeters). The size of the voxel is specified as a decimal based on 1.0 cm. The color is specified as a decimal from 0 to 1 in RGB values. Then, specify the interval at which voxels are placed in seconds. By specifying the interval at which voxels are placed, the voxels will be placed over time instead of all at once.

Build AR Voxels

When you run the script, the voxel data is sent to the device (iPhone, iPad, Apple Vision Pro) via WebSocket communication. Once the data is received, AR voxels are placed based on the plane anchor on the device screen.

If the WebSocket server is on break, data transmission may fail. In that case, please wait for a while and try again.

Explanation of Methods

I will explain the methods to use in the script. The method names for each language are as follows.

Please read snake_case as camelCase. (set_box_size -> setBoxSize)

Script Examples

You can try examples of scripts in the sample folder. When you run the following script, a voxel like the image will be placed.

Scratch3 MOD

Load the voxelamming extension and create a script.

Play the sample project in Xcratch

voxelamming_scratch3_en

Scratch3 MOD (Turtle Programming)

You can use Scratch3 MOD's Turtle Programming to set up voxels. It is recommended for beginners in programming, especially children, as it allows them to intuitively set up voxels.

Play the sample project in Xcratch

voxelamming_turtle_scratch3_en

Python (3.6+)

Script 

# Python
from build_box import BuildBox

room_name = "1000"
build_box = BuildBox(room_name)

build_box.set_box_size(0.5)
build_box.set_build_interval(0.01)
build_box.translate(0, 0, 0, pitch=0, yaw=0, roll=0)
build_box.animate(0, 0, 10, pitch=0, yaw=30, roll=0, scale=2, interval= 10)

for i in range(100):
  build_box.create_box(-1, i, 0, r=0, g=1, b=1)
  build_box.create_box(0, i, 0, r=1, g=0, b=0)
  build_box.create_box(1, i, 0, r=1, g=1, b=0)
  build_box.create_box(2, i, 0, r=0, g=1, b=1)

for i in range(50):
  build_box.remove_box(0, i * 2 + 1, 0)
  build_box.remove_box(1, i * 2, 0)

build_box.send_data()

Run script 

$ sample/python
$ python main.py

or

$ python3 main.py

JavaScript (Node.js)

Script 

// JavaScript (Node.js)
import BuildBox from './buildBox.mjs';

const roomName = '1000';
const buildBox = new BuildBox(roomName);

buildBox.setBoxSize(0.5);
buildBox.setBuildInterval(0.01);

for (let i = 0; i < 100; i++) {
  buildBox.createBox(-1, i, 0, 0, 1, 1);
  buildBox.createBox(0, i, 0, 1, 0, 0);
  buildBox.createBox(1, i, 0, 1, 1, 0);
  buildBox.createBox(2, i, 0, 0, 1, 1);
}

for (let i = 0; i < 50; i++) {
  buildBox.removeBox(0, i * 2, 0);
  buildBox.removeBox(1, i * 2 + 1, 0);
}

buildBox.sendData();

Run script 

$ sample/javascipt
$ node main.mjs

Ruby

Script 

# Ruby
require_relative 'build_box'

room_name = '1000'
build_box = BuildBox.new(room_name)

build_box.set_box_size(0.5)
build_box.set_build_interval(0.01)

for i in 0...100
  build_box.create_box(-1, i, 0, 0, 1, 1)
  build_box.create_box(0, i, 0, 1, 0, 0)
  build_box.create_box(1, i, 0, 1, 1, 0)
  build_box.create_box(2, i, 0, 0, 1, 1)
end

for i in 0...50
  build_box.remove_box(0, i * 2, 0)
  build_box.remove_box(1, i * 2 + 1, 0)
end

build_box.send_data

Run script 

$ sample/ruby
$ ruby main.rb

Swift

Script 

// Swift
import Foundation

let roomName = "1000"

if #available(iOS 15.0, macOS 12.0, *) {
    let buildBox = BuildBox(roomName)

    buildBox.setBoxSize(0.5)
    buildBox.setBuildInterval(0.01)

    for i in 0..<100 {
        buildBox.createBox(-1, Double(i), 0, r: 0, g: 1, b: 1)
        buildBox.createBox(0, Double(i), 0, r: 1, g: 0, b: 0)
        buildBox.createBox(1, Double(i), 0, r: 1, g: 1, b: 0)
        buildBox.createBox(2, Double(i), 0, r: 0, g: 1, b: 1)
    }

    for i in 0..<50 {
        buildBox.removeBox(0, Double(i * 2), 0)
        buildBox.removeBox(1, Double(i * 2 + 1), 0)
    }

    buildBox.sendData()

    RunLoop.main.run(until: Date(timeIntervalSinceNow: 10)) // Or longer depending on your needs
} else {
    fatalError("This script requires iOS 15.0 / macOS 12.0 or later.")
}

Run script 

$ cd sample/swift/basic
$ swift run

Showcase

Square

square_sample

Node placement

move_sample

Node rotation

rotation_sample

Node animation

animation_sample

Global animation

global_animation_sample

Write sentence

sentence_sample

Map

The liteRender command is used to lighten the drawing.

japan_map

Model created by MagicaVoxel

voxel_model

Transparency

set_alpha_sample

Draw line

draw_line

Change shape (box, sphere, plane)

change_shape

Change material

change_material

Light

light_sample

Command

command_sample

Reset Command

The model can be animated by alternately creating and resetting the model.

reset_command

Float-Command

float_command

Push / Pop Matrix

push_matrix

Texture

texture

Frame Animation

A fluttering butterfly is created by frame animation.

frame_animation

User Sharing

TED

Settings

You can navigate to the settings screen from the 'Settings' button in the top right corner of the screen. Turning off debug mode will disable the display of information on the screen.

Reset AR World

You can reset the AR world by pressing the 'Reset' button in the top right corner of the screen.

License

MIT License

Author

creativival

Contact

Contact

Privacy Policy

Privacy Policy