Hi. I translated a java to a p5.js sketch.
The p5.js pixels array takes 4 times more values and I believe that is why it the sketch runs far more slowly. The java sketch runs faster as the gif image below. The p5.js runs terribly slow as you can see here in the web editor. Is there a way (maybe through bit shifting) to improve the speed?
java:
int k[] = new int[128];
int[] a;
float u, v, r = 42, g = 84, b = 128;
int w = 300, p = 0;
void setup() {
size(300, 300);
a = new int[w * w];
for (int x = 0; x < w; x++) {
for (int y = 0; y < w; y++) {
a[x + y * w] = int((b + (b * sin(x / 32.0)) +
(b + (b * cos(y / 32.0))) +
(b + (b * sin(sqrt((x * x + y * y)) / 32.0)))) / 4);
}
}
}
void draw() {
p++;
for (int i = 0; i < b; i++) {
u = sin(i * 0.12);
v = sin(i * PI / 50 + 0.79);
k[i] = color(r + u * b, g + v * b, b + u * b);
}
loadPixels();
for (int i = 0; i < w * w; i++) {
pixels[i] = k[(a[i] + p) & 127];
}
updatePixels();
}
p5.js:
let a = [];
let k = [];
let u, v, r = 42, g = 84, b = 128, p = 0, s = 32;
function setup() {
createCanvas((w = 300), w);
pixelDensity(1);
for (let x = 0; x < w; x ++) {
for (let y = 0; y < 4 * w; y ++) {
a[x * 4 + y * 4* w] = int((b + b * sin(x / 32.0) +
(b + b * cos(y / s)) +
(b + b * sin(sqrt(x * x + y * y) / s))) / 4);
}
}
}
function draw() {
p++;
for (i = 0; i < 128; i++) {
u = sin(i * 0.12);
v = sin(i * PI / 50 + 0.79);
k[i] = color(r + u * b, g + v * b, b + u * b);
}
loadPixels();
for (let i = 0; i < 4 * w * w; i += 4) {
c = k[(a[i] + p) & 127];
pixels[i] = red(c);
pixels[i + 1] = green(c);
pixels[i + 2] = blue(c);
pixels[i + 3] = alpha(c);
}
updatePixels();
}
