Skip to content

Commit 9ab1087

Browse files
two-tickstwo-ticks
committed
refact!: added sceneVariables and RECT (buggy)
1 parent 1d56702 commit 9ab1087

3 files changed

Lines changed: 244 additions & 0 deletions

File tree

‎src/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,13 @@ global.addDuration = addDuration;
3737
// global.playScene = playScene;
3838
// global.restartScene = restartScene;
3939

40+
import { beginGraph, endGraph, RECT } from './lib/Geometry/beginGraph';
41+
42+
global.beginGraph = beginGraph;
43+
global.endGraph = endGraph;
44+
p5.prototype.rect = RECT;
45+
//global.rect = RECT
46+
4047
import { transform } from './lib/Scene/transform';
4148

4249
global.transform = transform;

‎src/lib/Geometry/beginGraph.ts‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
import anime from 'animejs';
2+
import p5 from 'p5';
3+
import { animationTimeline } from '../Scene/controls';
4+
import { sceneContainer, sceneVariables } from '../Scene/scene';
5+
import { transform } from '../Scene/transform';
6+
import { GObject } from './GObject';
7+
8+
const ULTRAMARINE40 = '#648fff';
9+
const MAGENTA50 = '#dc267f';
10+
const GOLD20 = '#ffb000';
11+
const INDIGO50 = '#785ef0';
12+
const ORANGE40 = '#fe6100';
13+
14+
export class Graph extends GObject {
15+
plotting!: SVGGElement;
16+
coordinate!: SVGGElement;
17+
config: {
18+
//configuration for graph
19+
scaleX: any;
20+
maxX: any;
21+
minX: any;
22+
scaleY: any;
23+
maxY: any;
24+
minY: any;
25+
graphColor: any;
26+
graphStrokeWidth: any;
27+
arrowSize: any;
28+
xAxis: any;
29+
yAxis: any;
30+
axisColor: any;
31+
smallGridColor: any;
32+
gridColor: any;
33+
stepX: any;
34+
stepY: any;
35+
originX: any;
36+
originY: any;
37+
tickX: any;
38+
tickY: any;
39+
tickColor: any;
40+
tickMarginX: any;
41+
tickMarginY: any;
42+
arrowFollowerColor: any;
43+
};
44+
// pathData: any;
45+
// graphObject: any;
46+
// graphContainer: any;
47+
// x: number;
48+
// y: number;
49+
// svgWidth: number;
50+
// svgHeight: number;
51+
// linePath: SVGPathElement;
52+
53+
constructor(
54+
x: number = 10,
55+
y: number = 10,
56+
svgWidth: number = 300,
57+
svgHeight: number = 300
58+
) {
59+
sceneVariables.isGraph = 'true';
60+
//window.isGraph = 'true';
61+
super(x, y, svgWidth, svgHeight);
62+
this.config = {
63+
graphColor: GOLD20,
64+
graphStrokeWidth: 1,
65+
arrowSize: 3,
66+
xAxis: 'true',
67+
yAxis: 'true',
68+
minX: -5,
69+
maxX: 5,
70+
minY: -5,
71+
maxY: 5,
72+
scaleX: 1,
73+
scaleY: 1,
74+
axisColor: INDIGO50,
75+
smallGridColor: MAGENTA50,
76+
gridColor: ORANGE40,
77+
stepX: 1,
78+
stepY: 1,
79+
originX: 0,
80+
originY: 0,
81+
tickX: 'true',
82+
tickY: 'true',
83+
tickColor: ULTRAMARINE40,
84+
tickMarginX: -0.5,
85+
tickMarginY: -0.5,
86+
arrowFollowerColor: MAGENTA50
87+
};
88+
89+
this.config.scaleX = abs(
90+
this.svgWidth / (this.config.maxX - this.config.minX)
91+
);
92+
this.config.scaleY = abs(
93+
this.svgHeight / (this.config.maxY - this.config.minY)
94+
);
95+
// this.x = x;
96+
// this.y = y;
97+
// this.svgWidth = svgWidth;
98+
// this.svgHeight = svgHeight;
99+
//this.pathData = createParametricSVGPath(this.xeqn, this.yeqn, this.parameterRange, this.config);
100+
this.graphContainer = createElement('div');
101+
this.graphContainer.parent(sceneContainer);
102+
this.linePath = document.createElementNS(
103+
'http://www.w3.org/2000/svg',
104+
'path'
105+
);
106+
this.linePath.setAttribute('fill', 'none');
107+
this.linePath.setAttribute('stroke', 'black');
108+
this.linePath.setAttribute(
109+
'stroke-width',
110+
`${this.config.graphStrokeWidth}`
111+
);
112+
this.graphContainer.position(this.x, this.y);
113+
this.graphObject = document.createElementNS(
114+
'http://www.w3.org/2000/svg',
115+
'svg'
116+
);
117+
this.graphObject.setAttribute('width', `${this.svgWidth}`);
118+
this.graphObject.setAttribute('height', `${this.svgHeight}`);
119+
this.graphObject.setAttribute(
120+
'viewBox',
121+
`${-this.svgWidth / 2} ${-this.svgHeight / 2} ${this.svgWidth} ${
122+
this.svgHeight
123+
}`
124+
);
125+
this.graphObject.setAttribute('preserveAspectRatio', 'xMidYMid meet');
126+
this.graphContainer.elt.appendChild(this.graphObject);
127+
sceneVariables.currentSVG = this.graphObject;
128+
//return this;
129+
}
130+
}
131+
132+
export function beginGraph(
133+
x: number = 10,
134+
y: number = 10,
135+
svgWidth: number = 300,
136+
svgHeight: number = 300
137+
) {
138+
const graphTemperoryObject = new Graph(x, y, svgWidth, svgHeight);
139+
return graphTemperoryObject;
140+
}
141+
142+
export function endGraph() {
143+
sceneVariables.isGraph = 'false';
144+
}
145+
146+
const _rect = p5.prototype.rect
147+
148+
export function RECT(this, ...args) {
149+
const p5rect = _rect.prototype.rect;
150+
if (
151+
typeof sceneVariables.isGraph === 'undefined' ||
152+
sceneVariables.isGraph === 'false'
153+
) {
154+
console.log("Called");
155+
_rect(...args)
156+
} else if (sceneVariables.isGraph === 'true') {
157+
console.log('this is called');
158+
const rectangle = document.createElementNS(
159+
'http://www.w3.org/2000/svg',
160+
'rect'
161+
);
162+
const x = arguments[0];
163+
const y = arguments[1];
164+
const w = arguments[2];
165+
const h = arguments[3];
166+
rectangle.setAttribute('x', `${x}`);
167+
rectangle.setAttribute('y', `${y}`);
168+
rectangle.setAttribute('width', `${w}`);
169+
rectangle.setAttribute('height', `${h}`);
170+
rectangle.setAttribute('fill', `${'none'}`);
171+
rectangle.setAttribute(
172+
'stroke',
173+
`${sceneVariables.currStrokeColor.toString()}`
174+
);
175+
rectangle.setAttribute('stroke-width', `${sceneVariables.currStrokeWidth}`);
176+
sceneVariables.currentSVG.appendChild(rectangle);
177+
}
178+
}
179+
180+
// p5.prototype._line = p5.prototype.line
181+
// p5.prototype.line = function() {
182+
// if (typeof isGraph === "undefined" || isGraph === "false") {
183+
// this._line(...arguments)
184+
// } else if (isGraph === "true") {
185+
// const svgLine = document.createElementNS(
186+
// "http://www.w3.org/2000/svg",
187+
// "line"
188+
// )
189+
// const x1 = arguments[0]
190+
// const y1 = arguments[1]
191+
// const x2 = arguments[2]
192+
// const y2 = arguments[3]
193+
// svgLine.setAttribute("x1", `${x1}`)
194+
// svgLine.setAttribute("y1", `${y1}`)
195+
// svgLine.setAttribute("x2", `${x2}`)
196+
// svgLine.setAttribute("y2", `${-y2}`)
197+
// svgLine.setAttribute("fill", `${currFill.toString()}`)
198+
// svgLine.setAttribute("stroke", `${currStrokeColor.toString()}`)
199+
// svgLine.setAttribute('stroke-width', `${currStrokeWidth}`)
200+
// globalThis.graphObject.appendChild(svgLine)
201+
// }
202+
// }
203+
204+
// p5.prototype._fill = p5.prototype.fill
205+
// p5.prototype.fill = function() {
206+
// if (typeof isGraph === "undefined" || isGraph === "false") {
207+
// this._fill(...arguments)
208+
// } else if (isGraph === "true") {
209+
// currFill = arguments[0]
210+
// }
211+
// }
212+
213+
// p5.prototype._stroke = p5.prototype.stroke
214+
// p5.prototype.stroke = function() {
215+
// if (typeof isGraph === "undefined" || isGraph === "false") {
216+
// this._stroke(...arguments)
217+
// } else if (isGraph === "true") {
218+
// currStrokeColor = arguments[0]
219+
// }
220+
// }
221+
222+
// p5.prototype._strokeWeight = p5.prototype.strokeWeight
223+
// p5.prototype.strokeWeight = function() {
224+
// if (typeof isGraph === "undefined" || isGraph === "false") {
225+
// this._strokeWeight(...arguments)
226+
// } else if (isGraph === "true") {
227+
// currStrokeWidth = arguments[0]
228+
// }
229+
// }

‎src/lib/Scene/scene.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
export let sceneContainer: HTMLDivElement;
2+
export let sceneVariables = {
3+
isGraph: 'false',
4+
currentSVG: document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
5+
currStrokeColor: 'black',
6+
currStrokeWidth: '1'
7+
};
8+
//export
9+
210
export class Scene {
311
constructor() {
412
let p5Canvas = document

0 commit comments

Comments
 (0)