Procedural Graphics in Web Markup for Scalable Rendering
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing approaches to creating dynamic and scalable graphics for web pages are limited, as they often rely on bulky rasterized formats or unsuccessful attempts like VRML, which fail to leverage procedural interfaces for arbitrary graphics objects, lacking the benefits of vector graphics and interactivity.
Innovation Solution
A method is introduced to create arbitrary graphics objects using a markup language to specify a drawing area and a procedural language to execute drawing commands, allowing for dynamic generation of scalable and resolution-independent graphics, leveraging existing graphics platforms like vector graphics, OpenGL, or conventional formats.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Volume of moving object
If rasterized graphic formats (GIF, JPEG) are used for web pages, then graphics can be displayed in browsers, but the graphics are not scalable and consume more space
Solution Approach 1:
The patent changes the fundamental parameter of graphic representation from rasterized pixels to procedural vector commands. By expressing graphics as a series of drawing commands (moveTo, lineTo, curveTo, etc.) rather than fixed-resolution pixel data, the graphics become scalable without loss of quality while reducing file size for complex images.
Solution Approach 2:
The patent replaces the traditional markup language approach (static HTML/SVG) with a procedural programming approach using JavaScript. Instead of describing graphics structure declaratively, the system uses imperative drawing commands that can dynamically generate and manipulate vector graphics, combining the scalability of vectors with the interactivity of scripting.
2Adaptability or versatility
If vector graphics formats are used, then graphics are scalable and resolution-independent, but they require specialized rendering engines and plug-ins
Solution Approach 1:
The patent creates a universal interface that works across all modern browsers without requiring specialized plug-ins. By using standard HTML canvas elements combined with widely-supported JavaScript, the system achieves vector graphic scalability while maintaining compatibility with existing browser infrastructure. The procedural drawing commands can be executed by any browser with JavaScript support.
Solution Approach 2:
The patent introduces an intermediary layer: the HTML canvas element serves as a mediator between the procedural JavaScript drawing commands and the browser's native rendering engine. The JavaScript code generates drawing operations that are translated into canvas API calls, which the browser then renders using its built-in 2D rendering capabilities, eliminating the need for specialized vector graphic plug-ins.
3Ease of operation
If procedural language commands are used to draw graphics, then dynamic manipulation and interactivity are enabled, but the implementation complexity increases
Solution Approach 1:
The patent segments the graphic drawing process into discrete, reusable command functions. Each drawing operation (lines, curves, shapes) is broken down into individual method calls that can be independently controlled and manipulated. This modular approach simplifies the implementation of complex interactive graphics by allowing developers to build upon basic drawing primitives rather than managing monolithic rendering code.
Data Source
AI summary
A graphics object can be expressed using procedural language embedded in a markup language document. In an embodiment, a drawing space is specified in markup language. A drawing command to arbitrarily draw a graphics object into the drawing space is specified in procedural language. Interpretation of the markup and procedural language commands results in the rendering of the arbitrary graphics object. In another embodiment, there is a browser comprising a rendering engine, an interpreter, and parser. The rendering engine is configured to interpret a markup language instruction that specifies a drawing space as well as drawing commands in procedural language for drawing an arbitrary graphical object into the drawing space. The parser can then parse the drawing commands and convert them into an execution tree of tree objects.