A source code text editor that renders in an HTML5 canvas. Useful for texturing objects in WebGL apps.
Features
- International keyboard support (left-to-right rendering only)
- Wide Unicode character-aware
- Line numbering
- Color theming
-
Syntax highlighting for:
- JavaScript,
- HTML, and
- BASIC
Demo
In 2D
function testDemo(scene) {
// 🐔🥚🥚🥚
// 🥚🐔🥚🥚
// 🥚🥚🐔🥚
// 🥚🥚🥚🐔
var GRASS = "../shared_assets/images/grass.png",
ROCK = "../shared_assets/images/rock.png",
SAND = "../shared_assets/images/sand.png",
WATER = "../shared_assets/images/water.png",
DECK = "../shared_assets/images/deck.png",
WIDTH = 5,
HEIGHT = 5,
DEPTH = 5,
MIDX = WIDTH / 2 - 5,
MIDY = HEIGHT / 2,
MIDZ = DEPTH / 2,
start = hub()
.addTo(scene)
.at(-MIDX, 0, -DEPTH - 2);
const balls = [];
for (var i = 0; i < 10; ++i) {
balls.push(brick(DECK)
.addTo(start)
.at(number(WIDTH),
number(HEIGHT),
number(DEPTH)));
balls[i].velocity = v3(
number(WIDTH),
number(HEIGHT),
number(DEPTH));
}
function update(dt) {
for (var i = 0; i < balls.length; ++i) {
var ball = balls[i],
p = ball.position,
v = ball.velocity;
p.add(v.clone()
.multiplyScalar(dt));
if (p.x < 0 && v.x < 0 || WIDTH <= p.x && v.x > 0) {
v.x *= -1;
}
if (p.y < 1 && v.y < 0 || HEIGHT <= p.y && v.y > 0) {
v.y *= -1;
}
if (p.z < 0 && v.z < 0 || DEPTH <= p.z && v.z > 0) {
v.z *= -1;
}
}
}
}
In 3D
Instructions
Try out what you would normally do in a text editor.
Made by
Sean T. McBeth
Follow @Sean_McBeth on Twitter
Primrose
v1.1.x
Follow Primrose on Github
Follow Primrose on NPM