6. Examples
Here are some examples you can use as inspiration or to copy code from.
const a = new Graphica.Core({ autoStartClock: false });
const b = new Graphica.Grid();
const c = new Graphica.Vector([0,0], [5, 5], { normalize: true });
const rand = 3 + (Math.random() * 2);
const rand_x = 6 + (Math.random() * 2);
const circle = new Graphica.Circle(rand_x,rand,0.4, {color: "red"});
const inner_circle = new Graphica.Circle(rand_x,rand,0.2, {color: "white"});
const s1 = new Graphica.Slider({ minValue: 0, maxValue: 10 });
s1.addObserver((val) => {
c.setNormalizedAngleVector([1, val]);
});
let vel_x = 5;
let vel_y = 5;
const g = 0.5;
const te2 = new Graphica.Text("Force: 1", {position: [-4, 4]});
const s2 = new Graphica.Slider({ minValue: 1, maxValue: 20 });
s2.addObserver((val) => {
vel_x = val;
vel_y = val;
te2.setText(`Force: ${vel_x}`);
});
a.addGui(s2);
a.add(te2);
const bu = new Graphica.Button({ label: "fire" });
bu.addObserver(() => {
a.startClock();
});
const te = new Graphica.Text("?", { position: [7, 3] });
a.add(te);
a.addGui(s1);
a.addGui(bu);
a.add(b);
a.add(c);
a.add(circle);
a.add(inner_circle);
a.run((t) => {
c.setOriginPoint([t*c.getX()*vel_x, t*c.getY()*vel_y-g*t*t*0.5]);
c.setNormalizedAngleVector([c.getX()*vel_x,c.getY()*vel_y-g*t]);
if (c.distanceTo(circle) < circle.radius) {
te.setText("Du traff!");
if(c.distanceTo(inner_circle) < inner_circle.radius){
te.setText("Blink!")
}
}
});
Result:
const graphica = new Graphica.Core();
const grid = new Graphica.Grid();
const p = new Graphica.Plot("sin(x)", { plotBetween: [0, 10] });
const s = new Graphica.Circle(-3, 0, 1);
const p2 = new Graphica.Point(-3, 0);
const p3 = new Graphica.Point(0, 0);
const a = new Graphica.Line([-3, 0], [-2, 0]);
const b = new Graphica.Line(p2, p3, { dashed: true, color: 0xa1a1a1 });
const c = new Graphica.Line([-3, 0], p2);
graphica.add(p2);
graphica.add(s);
graphica.add(p);
graphica.add(p3);
graphica.add(grid);
graphica.add(a);
graphica.add(b);
graphica.add(c);
graphica.run((deltatime) => {
p.setExpression(`sin(x + ${deltatime})`);
p2.position.set(-3, Math.sin(0 + deltatime), p2.position.z);
p3.position.set(0, Math.sin(0 + deltatime), p2.position.z);
a.setEnd([-3 + Math.cos(deltatime), Math.sin(deltatime)]);
c.setStart([-3 + Math.cos(deltatime), Math.sin(deltatime)]);
});
Result:
const graphica = new Graphica.Core();
const grid = new Grid();
const p = new Plot("cos(x)* sin(x) + sin(x)");
const s = new Slider({ maxValue: 500, minValue: 1 });
let a = new Component();
const l = new Latex(
" \\sum_{i=1}^{n} [\\sin(x_i)\\cdot\\cos(x_i)+\\sin(x_i)] \\Delta x",
{
position: [-10, 5],
}
);
s.addObserver((v) => {
graphica.remove(a);
a = new Component();
const range = 20;
const stepSize = range / v;
for (let i = 0; i < range; i += stepSize) {
a.add(
new Polygon(
[
new Vector2(i, 0),
new Vector2(i + stepSize, 0),
new Vector2(i + stepSize, Math.sin(i) * Math.cos(i) + Math.sin(i)),
new Vector2(i, Math.sin(i) * Math.cos(i) + Math.sin(i)),
],
{ fill: false }
)
);
}
graphica.add(a);
});
graphica.add(l);
graphica.addGui(s);
graphica.add(p);
graphica.add(grid);
graphica.run();
Result:
const graphica = new Core();
const grid = new Grid();
// Create nodes
// First two parameters decide node position
// Third parameter decides node radius
// Fourth parameter is an optional adjacency list
// Fifth parameter contains optional paramaters, like label, color and segemnts
const node1 = new Node(-5, 0, 1, [], { label: "Node 1" });
const node2 = new Node(0, 5, 1, [], { label: "Node 2" });
const node3 = new Node(5, 5, 1, [], { label: "Node 3" });
const node4 = new Node(0, -5, 1, [], { label: "Node 4" });
const node5 = new Node(5, -2, 1, [], { label: "Node 5" });
const node6 = new Node(5, -8, 1, [], { label: "Node 6" });
// Connect nodes with edges
// First parameter decides which node to connect to with an edge
// Second parameter (optional) decides whether edge is directed or not (default false)
// Third parameter (optional) gives the edge a weight/value
node1.connectTo(node2, false);
node1.connectTo(node4, false);
node2.connectTo(node3, false);
node4.connectTo(node5, false);
node4.connectTo(node6, false);
// Add nodes to the graphica instance
graphica.add(node1);
graphica.add(node2);
graphica.add(node3);
graphica.add(node4);
graphica.add(node5);
graphica.add(node6);
graphica.add(grid);
// Define the BFS traversal steps
// type decides the node operation and can be "setColor" | "setEdgeColor" | "setEdgeWeight" | "addEdgeWeight"
// args specifies arguments for the operation given in type
const steps = [
{ type: "setColor", args: [node1, 0xaaaaaa] },
{ type: "setEdgeColor", args: [node1, node2, 0xfaa307] },
{ type: "setColor", args: [node2, 0xaaaaaa] },
{ type: "setEdgeColor", args: [node1, node4, 0xfaa307] },
{ type: "setColor", args: [node4, 0xaaaaaa] },
{ type: "setColor", args: [node1, 0x000000] },
{ type: "setEdgeColor", args: [node2, node3, 0xfaa307] },
{ type: "setColor", args: [node3, 0xaaaaaa] },
{ type: "setColor", args: [node2, 0x000000] },
{ type: "setEdgeColor", args: [node4, node5, 0xfaa307] },
{ type: "setColor", args: [node5, 0xaaaaaa] },
{ type: "setEdgeColor", args: [node4, node6, 0xfaa307] },
{ type: "setColor", args: [node6, 0xaaaaaa] },
{ type: "setColor", args: [node4, 0x000000] },
{ type: "setColor", args: [node3, 0x000000] },
{ type: "setColor", args: [node5, 0x000000] },
{ type: "setColor", args: [node6, 0x000000] },
];
// Create an OperationButtonPanel to step through the BFS traversal steps
const operationButtonPanel = new OperationButtonPanel(steps);
graphica.addGui(operationButtonPanel);
// Run the graphica instance
graphica.run();
Result:
//1. ADD NECESSARY IMPORTS
import Arc from "./Components/Arc";
import Circle from "./Components/Circle";
import Grid from "./Components/Grid";
import LegendBox from "./Components/LegendBox";
import LegendText from "./Components/LegendText";
import Plot from "./Components/Plot";
import Point from "./Components/Point";
import State from "./Components/State";
import Core from "./Core";
//2. CREATE GRID AND WANTED COMPONENTS, LEGENDTEXTS, STATES AND LEGENDBOX
const grid = new Grid();
//PLOTS
const plot1 = new Plot("x^2");
const plot2 = new Plot("x^3");
const plot3 = new Plot("e^x + 2x + log(x)");
const plot4 = new Plot("-3x+5");
//SHAPES
const circle1 = new Circle(0, 0, 2, { color: 0xaa74b8, segments: 32 });
const arc1 = new Arc([6, 2], [8, 5], [6, 6]);
//POINTS
const point1 = new Point(4, 2, {
customName: "x_1",
showName: true,
draggable: "unrestricted",
color: "#AA74B8",
});
const point2 = new Point(3, 5, {
customName: "X",
showName: false,
legendCoordinates: "x",
});
//LEGENDTEXTS
const text1 = new LegendText("node_1: node", {
color: "#FFFFFF",
shape: "triangle",
useStates: false,
});
const text2 = new LegendText("\\int_{a}^{b} x^2\\,dx", {
color: "#faa307",
shape: "circle",
useStates: true,
});
//STATES WITH OPTION ON WHETHER THEY ARE DISPLAYED IN LEGENDBOX OR NOT
const state1 = new State("a", 5, { inLegend: false });
const state2 = new State("b", 100);
//LEGEND BOX
const legend = new LegendBox([plot1, plot2, plot3, plot4, point1, point2, circle1, arc1, text1, text2, state1, state2]);
//3. CREATE CORE AND ADD GRID AND COMPONENTS (NOTE: LEGENDTEXT AND STATES DO NOT NEED TO BE ADDED TO CORE)
const core = new Core();
core.add(grid);
core.add(plot1);
core.add(plot2);
core.add(plot3);
core.add(plot4);
core.add(point1);
core.add(point2);
core.add(circle1);
core.add(arc1);
core.addGui(legend);
//4. RUN THE CORE (EXAMPLE OF 3 DIFFERENT WAYS)
//4A RUN CORE NORMALLY
core.run();
//4B RUN CORE WITH A CHANGING FUNCTION
core.run((t) => {
plot1.setExpression(`x^2+${(t / 10).toFixed(2)}`);
});
//4C RUN CORE WITH STATE
core.run((t) => {
state1.setState(state1.getState() + t / 100);
state2.setState(state2.getState() + t / 100);
});
Scrolled down in LegendBox:
Minimize LegendBox:
