i want to draw/animate this thing:
this example html/js thing shows exactly what i want:
<canvas width="128" height="32"></canvas>
<script>
const ctx = document.querySelector("canvas").getContext("2d")
setInterval(function(){
ctx.fillStyle = "rgba(0, 0, 0, 0.2)"
ctx.fillRect(0, 0, 128, 32)
ctx.fillStyle = "rgba(0, 255, 0, 0.2)"
for (let i = 0; i < 4; i++) {
let r = Math.sin(Date.now()/1000+(1*i)) * 0.5 + 0.5
ctx.fillRect(0, 0+((32/4)*i), 128*r, 32/4)
}
}, 250)
</script>
ignore the maths and numbers, it's about
fillStyle
andfillRect
, and how they blend with previous drawing. (you can save that to a file and open in any modern browser)
i was able to boil it down to this opengl/c code:
#include <GL/gl.h>
#include <GLFW/glfw3.h>
#include <unistd.h>
#include <math.h>
int main (void) {
float s = 2.0 / 4;
double t; int i;
GLFWwindow* window;
if (!glfwInit()) return 1;
window = glfwCreateWindow(128, 32, "test", NULL, NULL);
if (!window) { glfwTerminate(); return 2; }
glfwMakeContextCurrent(window);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
while (1) {
t = glfwGetTime();
glColor4f(0, 0, 0, 0.2);
glRectf(-1, -1, 1, 1);
for (i = 0; i < 4; i++) {
glColor4f(0, 1, 0, 0.2);
glRectf(-1, -1+(s*i), sin(t+i), -1+(s*(i+1)));
}
glFlush();
glfwSwapBuffers(window);
usleep(1000 * 250);
}
return 0;
}
build with:
gcc foo.c -o foo $(pkg-config --cflags --libs glfw3 gl) -lm
that opengl/c code renders the same as the html/js version, but only on x11 (openbox). on wayland with weston (or wayfire) the blending is "all bonkers", so i wonder...
as i'm a total wayland/opengl/c noob (and mostly trial-and-error until something (seems) to work >.<*), i would be very thankful for any related/specific clarification (links)
ps. i wonder if/when we get single buffer with glfw, if that's gonna solve the problem? https://github.com/glfw/glfw/issues/1843
you are blending the two semi-transparent rectangles onto an unknown image, which could be garbage. So do a glClear()
i was fearing that. but the idea of this "cheap blend" was that i want to keep the previous drawing, so i don't need/want glClear(). i guess i was wrongly encouraged by html canvas 2d and apparently opengl on x11 keeping the previous drawing by default, and letting me blend new rectangles over it...
or something else that resets your window content to something you want every frame, before you start blending things into it.
i was able to do a prototype in webgl that copies the previous drawing pixels for fragment shader, and blend the colors there, but that felt expensive...
(and yeah, i don't know how to measure these, so dunno what is actually expensive for the hardware)
there is no single-buffering on Wayland
assuming single-buffering would keep the previous drawing, and make above code work, i'm a bit saddened by this fact. but good to know!
thank you very much for the clarifications.
ps. hmmm, maybe i should get an old crt to get a fadeout effect for free ;P
i want to draw/animate this thing:
this example html/js thing shows exactly what i want:
<canvas width="128" height="32"></canvas>
<script>
const ctx = document.querySelector("canvas").getContext("2d")
setInterval(function(){
ctx.fillStyle = "rgba(0, 0, 0, 0.2)"
ctx.fillRect(0, 0, 128, 32)
ctx.fillStyle = "rgba(0, 255, 0, 0.2)"
for (let i = 0; i < 4; i++) {
let r = Math.sin(Date.now()/1000+(1*i)) * 0.5 + 0.5
ctx.fillRect(0, 0+((32/4)*i), 128*r, 32/4)
}
}, 250)
</script>
ignore the maths and numbers, it's about
fillStyle
andfillRect
, and how they blend with previous drawing. (you can save that to a file and open in any modern browser)
i was able to boil it down to this opengl/c code:
#include <GL/gl.h>
#include <GLFW/glfw3.h>
#include <unistd.h>
#include <math.h>
int main (void) {
float s = 2.0 / 4;
double t; int i;
GLFWwindow* window;
if (!glfwInit()) return 1;
window = glfwCreateWindow(128, 32, "test", NULL, NULL);
if (!window) { glfwTerminate(); return 2; }
glfwMakeContextCurrent(window);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
while (1) {
t = glfwGetTime();
glColor4f(0, 0, 0, 0.2);
glRectf(-1, -1, 1, 1);
for (i = 0; i < 4; i++) {
glColor4f(0, 1, 0, 0.2);
glRectf(-1, -1+(s*i), sin(t+i), -1+(s*(i+1)));
}
glFlush();
glfwSwapBuffers(window);
usleep(1000 * 250);
}
return 0;
}
build with:
gcc foo.c -o foo $(pkg-config --cflags --libs glfw3 gl) -lm
that opengl/c code renders the same as the html/js version, but only on x11 (openbox). on wayland with weston (or wayfire) the blending is "all bonkers", so i wonder...
as i'm a total wayland/opengl/c noob (and mostly trial-and-error until something (seems) to work >.<*), i would be very thankful for any related/specific clarification (links)
ps. i wonder if/when we get single buffer with glfw, if that's gonna solve the problem? https://github.com/glfw/glfw/issues/1843