Tag Archives: graphics

A Text-Based SVG Editor in JavaScript

Posted on 2019/02/27 by thiscouldbebetter

The JavaScript program below, when run, will present an interface that allows a user to edit a vector image in SVG format as text, and view the changes to the rendered image as they are made. To see it in … Continue reading →

Posted in Uncategorized | Tagged , , , , , | Leave a comment

A Music Notation Renderer In JavaScript

Posted on 2018/03/10 by thiscouldbebetter

The JavaScript below prompts the user for a musical composition in JavaScript format, and then renders that composition in musical notation. To see it in action, copy the code into an .html file and open that file in a web … Continue reading →

Posted in Uncategorized | Tagged , , , , , , | Leave a comment

A Scrolling Map Tile Engine in JavaScript

Posted on 2017/12/12 by thiscouldbebetter

The JavaScript below implements a simple engine for allowing an animated character to move around a map made of tiles. To see it in action, copy it into an .html file and open that file in a web browser that … Continue reading →

Posted in Uncategorized | Tagged , , , , | 1 Comment

Exploring the SVG Vector Image File Format in JavaScript

Posted on 2017/09/05 by thiscouldbebetter

The JavaScript program below accepts a vector-based “path” in JSON format and converts that path to the SVG format. The output can then be viewed in a program that understands the SVG format, such as most modern web browsers. The … Continue reading →

Posted in Uncategorized | Tagged , , , , , , | Leave a comment

Drawing Ellipses (Ovals) to an HTML5 Canvas with JavaScript

Posted on 2017/08/21 by thiscouldbebetter

The JavaScript code below, when run, prompts the user to input information about an ellipse (oval), and then draws that ellipse to the screen. To see it in action, copy it into an .html file and open that file in … Continue reading →

Posted in Uncategorized | Tagged , , , , | Leave a comment

A Flood-Fill Implementation in JavaScript

Posted on 2017/07/19 by thiscouldbebetter

Below is a simple implementation of a floodfill algorithm in JavaScript. When run, the program will draw a green background on a canvas, render the word “FLOOD” over it in orange, and then flood-fill the background with cyan, leaving the … Continue reading →

Posted in Uncategorized | Tagged , , , | Leave a comment

Comparing Images in JavaScript

Posted on 2017/06/16 by thiscouldbebetter

The JavaScript code below, when run, prompts the user to specify two image files and click a button to calculate the difference in intensity of their respective pixels. It is intended only as a simple early experiment in the field … Continue reading →

Posted in Uncategorized | Tagged , , , | Leave a comment

Exploring the PNG Image File Format with a PNG Viewer in JavaScript

Posted on 2017/02/23 by thiscouldbebetter

The JavaScript program below, when run, prompts the user to upload a PNG file and displays that image. To see the code in action, copy it into an .html file and open that file in a web browser that runs … Continue reading →

Posted in Uncategorized | Tagged , , , , , | Leave a comment

Rendering to Texture with WebGL

Posted on 2017/02/09 by thiscouldbebetter

The JavaScript program below, when run, will display a simple three-dimensional scene rendered with WebGL. It is nearly identical to a program from a previous post, except that this version demonstrates how to render a scene to a texture, rather … Continue reading →

Posted in Uncategorized | Tagged , , , , , , , | Leave a comment

A Rudimentary Mesh Editor in JavaScript

Posted on 2017/01/25 by thiscouldbebetter

The code below implements a rudimentary editor for three-dimensional forms called “meshes”. To see it in action, copy it into an .html file and open that file in a web browser that runs JavaScript. Or, for an online version, visit … Continue reading →

Posted in Uncategorized | Tagged , , , , | Leave a comment