All posts that are about or contain

First try

First try with WebGPU + WebGL

This post is also about or contains
Programming WebGL WebGPU




The cube on top is WebGPU, and the cube on the bottom of this post is WebGL. And the video is a side-by-side comparison if you don't have WebGPU support. As expected is there no differences in their output. But it is two different graphic libraries. Where WebGPU was the one that needed the most code. But then WebGPU can utilize more of the graphic card than WebGL can.

WebGPU has more in common with the libraries Metal, Vulcan, and DirectX 12 than WebGL. And it looks like it will be the successor of WebGL. Of course, I stumbled over it right after starting to learn WebGL. So now I am not sure which I will spend the most time on. WebGPU is pretty young and is still only an experimental feature in some web browsers. So actually, you probably do not see the WebGPU that I have embedded in this post. And for the moment, even if you have support, there is no guarantee that you will see the cube.

I have in this post followed examples from WebKit and have only got them to run in Safari. Other examples I have looked at have only run in a different browser. That includes the one in WebGPU's GitHub. Hopes it is because the WebKit examples do not use the same shader language. I probably have to swap languages since it looks like WGSL will win the battle and not WHLSL. 

Now was the plan to go through some parts of the code and highlighting the differences.  But surprise, I need to work more with both libraries first. So maybe another day.




First try with p5js, including bugs, v0.1

This post is also about or contains
Artistic programmingp5js Programming


p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! -

Inside of this canvas is a frequency modulator with some sampling functionality. You can control the interface with keys or a mouse. For starting to play and turn off, you use the p key. The r key starts and stops the recording. There are two volume sliders. The a and s keys control the volume on the modulator. And you use the z and x keys to control the sample volume. With the c key, you clean the sampler or empty it. There will come a button for that later together whit some other things. Update: I have added the h key, and it will hold or freeze the tone.

There is some bug in the p5js library or WebKit 1 that distorts the sound from the sampling. So this is not usable, but just a big enough programming challenge that it has been worth doing just for the practice.


The first try with WebGL

This post is also about or contains
Programming WebGL

It has gone many years since I started working with graphic programming. And that was with OpenGL. Today I have tried WebGL for the first time. It builds on OpenGL ES 2 that again are simplified OpenGL 2, so everything was familiar. I have followed step by step a Mozilla tutorial. I mostly work like this. Doing tutorials or web courses first, then experiments.

I hope to do some experimental work soon. And it was good doing some graphics programming again, even if it just copied something. The few last years has mainly been theory.

There is not more to say than check the tutorial for details if you are interested.