TLDR: Graphics programming for the most part isn't common, even more so using WebGL/GLSL. What are your thoughts on using JS and the libraries that make it more accessible?
Some context, I'm a frontend web developer and work with JavaScript/TypeScript daily. I gained an interest in graphics programming through watching Acerola on YouTube. I mainly wanted to produce post processing effects, but more so generate/manipulate images.
I found it hard to jump into writing shaders with unity, and GLSL for WebGL is honestly a mess with too much overhead needed. With that, JavaScript is missing a lot of the basic things one would normally use. Things like generating Perlin noise or Vector types.
So far, I've created my own Perlin/Value noise library, quite a few filter effects (such as gaussian blur, B&W + colorize, wave distortion, edge detection, ect.), and even implemented various types of image scaling methods from box/tent to Lagrange-Chebyshev interpolation. Along the way I've also created a few GEMM utilities, but also quite a few calculus and trig utilities.
I'm currently working on creating Vector classes (2, 3, and 4, including their respective integer variants), in addition to a Color class. The Vector classes are based on C#, Unity, and Godot, with a few more additional features. The Color class is primarily based on Godot, but heavily expands on the blend method to support basically all the modes you would find in Adobe Photoshop. It uses sRGB/linearRGB for the most part, but can convert to/from HTML, HSV, HSL, and okLCH.
Over on r/javascript, all of this is well outside the realm of the casual web developer and is exceptionally niche. However, I'm noticing a trend of more games and interactive graphics being build with JS, typically using bloated libraries for rendering/physics.
So, what are your thoughts on having a "bare bones" library that implements what's missing in JS for graphics programming(minus the rendering parts)?
Videos
Programming on Khan Academy uses the JavaScript language along with the library ProcessingJS.
Here is a stand-alone program example derived from Processing.js Quick Start. This performs a very simple animation.
The graphics functions will match the the documentation at khanacademy.org and also here.
To run this, you need to download the file "processing.js" from here and save the following as "hello.html" (or whatever you want to call it), then open "hello.html" with a browser.
<script src="processing.js"></script>
<script type="application/processing" data-processing-target="pjs">
void setup() {
size(200, 200);
stroke(0), strokeWeight(2);
println('hello web!');
}
void draw() {
background(100); // clear the frame
ellipse(abs(frameCount%400-200), 50, 25, 25);
}
</script>
<canvas id="pjs"> </canvas>
Alternative: Advanced JavaScript programming style
Here is a stand-alone JavaScript program example based on snippets from Processing.js Quick Start -- this draws (and animates) a small analog clock.
The available graphics functions are the same as above, but here they require the prefix processing -- the parameter to sketchProc() below. Notice, in particular, the call to processing.line().
The instructions for running this are the same as above -- just put the following .html file in a folder along with the file processing.js...
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="processing.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based sketch:</p>
<canvas id="canvas"></canvas>
<script>
function sketchProc(processing) {
processing.draw = function() {
var centerX = processing.width / 2, centerY = processing.height / 2;
var maxArmLength = Math.min(centerX, centerY);
function drawArm(position, lengthScale, weight) {
processing.strokeWeight(weight);
processing.line(centerX, centerY,
centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
}
processing.background(224);
var now = new Date();
var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
drawArm(hoursPosition, 0.5, 5);
var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
drawArm(minutesPosition, 0.80, 3);
var secondsPosition = now.getSeconds() / 60;
drawArm(secondsPosition, 0.90, 1);
};
}
var canvas = document.getElementById("canvas");
var processingInstance = new Processing(canvas, sketchProc);
</script>
</body>
</html>
You don't have to be online to run JavaScript. JavaScript is a client-side language, meaning it runs in your web browser. Since you're at the JavaScript stage, I'm going to assume you know at least the basics of HTML and hopefully CSS.
You can include a JavaScript file in your HTML document by placing this tag in the section.
<html>
<head>
<script src="/path/relavite/to/htmlpage/your.js"></script>
</head>
...
</html>
Then, you can either open your browser, then File > Open your html page, which now has the JavaScript linked to it, or you can right click the .html file in your file browser, and Open With > Chrome, FireFox, etc. to view the page locally.
Again, a connection to the web is not needed to run these files, since they are stored locally on your computer.
EDIT Might as well include the file structure. It may be easier to visualize that way.
Locally on your computer, you create a folder named "myjavascripttest". Inside this folder, you create three files: index.html, style.css and script.js
The content of the HTML file is:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/path/relavite/to/htmlpage/your.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
The content of the CSS file is:
p {
background-color: blue;
}
The content of the JavaScript file is: (Note: this is jQuery, an extension of JavaScript)
$(document).ready(function() {
$(this).css('background-color', 'red');
});
Now, loading the HTML file in your browser will display a paragraph with a red background, though clearly the CSS says it should be blue. The JavaScript thus must be running!
I am part of the development of a new JavaScript library called utahpot.js, aimed at simplifying the usage of 3D graphics in web development. We are currently in the early stages and would like to gather information about your experience with similar libraries such as Three.js, Babylon.js, or p5.js.
What were the pros and cons of using these libraries? Were there any challenges that hindered the development process?
Thanks in advance for your answers.