Yeah, it’s a subset of JavaScript (or JS simplified perhaps). That is to say, syntactically it is ES6 / JavaScript, but functionally is missing many things that make JavaScript what it is.
It is not an official / common subset, this language was created for Pixelblaze. I would have used another language, but the real-time coding requirements meant that there wasn’t any existing compiler I could use. So I built one based on a JavaScript parser. As a language specification, it is easier to say it’s JavaScript light and list the limitations.
If you go learn JavaScript, you’ll learn about objects, prototype chains, and APIs (functions/objects) that don’t exist in Pixelblaze. Your “hello world” program will probably use text strings and console.log
, both of which are absent from PB. Pixelblaze’s “hello world” is a rainbow. So it may not be immediately applicable, but once you start solving problems in JavaScript, that same thought process and at least some of the tools can be used in Pixelblaze.
If you forget “JavaScript” for a moment, there are some things that are common to several languages, and those are key for writing pattern code. Stuff like variables, expressions, functions, loops, and that sort of thing are common across many languages. In C-like languages like C, Java, JavaScript, etc., you have for
and while
loops, if
for conditional code, curly braces for code blocks, array access with []
and that sort of thing in common.
The pixel mapper tool is different - that is real JavaScript and it runs only in the browser.
Without changing anything about your pixel map, you can get a wrapped 2D surface by converting the x,y coordinates into an angle. That does require some trig, but we’ve already done the work
A while back I uploaded a pattern called “angle and radius from coordinates” to the pattern site. Here’s the relevant bit (updated for atan2)
//return the angle as a value between 0 and 1.0
//most of Pixelblaze's animation language uses this range
//it also happens to rotate the angle so that 0 is north
function getUnitAngle(x, y) {
return (PI + atan2(x - .5, y - .5))/PI2
}
This assumes your center point is at (0.5, 0.5), which it would be for your 3D helix. Pass in the X and Y from your render3D, and you get back a value from 0.0 to 1.0 based on the angle from that center. In other words, it’s a value that walks the circumference of your circle. Combine that with Z as the up-down dimension, and you have a 2D surface wrapped around your cylinder!