1.1 The basics ‐ Syntax and structure

Graphica is a javascript module and uses default javascript syntax. It is recommended to know at least a little of the basics first. In any case, this guide will go through how to use it for the total beginners as well.

Graphica is written with an object-oriented idea in mind. This means that all the different canvas objects are objects that has a constructor, properties (often values or references to values), and methods (functions) that all interact with each-other.

To create any graphica object, you call its' constructor with the new keyword followed by the component name and () parenthesis. These parenthesis are the construtor function which will take various arguments covered in this wiki. Sometimes they will also be empty.

This is how you would create a Plot component of sin(x);

const c = new Graphica.Plot("sin(x)");

Here we are assigning the Plot component to the variable named c. If you are familliar with python you will see there are some differences. Most notably the semicolons at the end and the const at the beginning. The const denotes we want to create a constant variable. It's not really important for the sake of this guide. Just remember that you will almost always use the const keyword to create Graphica components.

Here is a short example of the entire script used to render a plot of sin(x).

const a = new Graphica.Graphica(document.body);

const b = new Graphica.Grid();

const c = new Graphica.Plot("sin(x)");

a.add(b);
a.add(c);
a.run();

Output:

A small sidenote is that all the components are preceeded by a Graphica, like the Graphica.Graphica and the Graphica.Plot. This is due to the package name being Graphica, and may not be needed in the future. Components do not need to be preceeded by a Graphica anymore, as it is optional with the exception of the Graphica component itself.

The first component we create we call a and is a Graphica component. This is our canvas, controls, and camera. The document.body will not be required as of the latest version, but may be required when you are reading this guide. It just references appending the canvas to the main part of the page you are working on. You don't really need to think much about this component unless you want to restrict the camera or zoom.

The second component is the Grid component, which is the numberline and x-y axis. We call it b.

Both of these components will be the same most of the time.

The third component is the Plot component with the name c. There will be a separate entry going over it in more detail, but it takes a string as the function argument and tries to parse it into a function. In this case that is sin(x), but it might as well have been cos(x), or x**2.

The variable names are really unimportant here, and you can call them whatever you want without any impact on the user.

The next 2 lines are for adding the components to our canvas. We call a.add() on the components we want to render into our canvas. In the future this may be extended to take an array, as writing add() for many components can be boring.

The last line renders the canvas to the screen, and all the components with it.

This is the basic structure for any Graphica example, and how you will probably make them. Create components, add components, run.