Skip to content

Commit b0b94ae

Browse files
two-tickstwo-ticks
authored
Merge pull request #24 from two-ticks/GObject
Gobject into beginGraph
2 parents 9ab1087 + 608cc00 commit b0b94ae

9 files changed

Lines changed: 414 additions & 409 deletions

File tree

‎api_reference.md‎

Lines changed: 188 additions & 187 deletions
Large diffs are not rendered by default.

‎dist/index.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
<!DOCTYPE html><html lang="en"><head>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
24
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
35
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
4-
<meta charset="utf-8">
6+
<meta charset="utf-8" />
7+
<script src="p5.teach.js"></script>
58
</head>
69
<body>
710
<script src="sketch.js"></script>
8-
<script src="p5.teach.js"></script>
9-
</body></html>
11+
</body>
12+
</html>

‎dist/p5.teach.js‎

Lines changed: 92 additions & 46 deletions
Large diffs are not rendered by default.

‎dist/sketch.js‎

Lines changed: 27 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,45 @@
1-
let freq = 10;
1+
// Parameters for graph of cosine
22
let amp = 4;
3+
let freq = 2;
34

5+
// Color blind safe palette
46
let ULTRAMARINE40 = '#648fff';
57
let MAGENTA50 = '#dc267f';
68
let GOLD20 = '#ffb000';
7-
let parentDiv;
9+
let INDIGO50 = '#785ef0';
10+
let ORANGE40 = '#fe6100';
11+
812
function setup() {
9-
canvas = createCanvas(600, 600);
10-
//canvas.style("z-index", 100)
11-
scene = new Scene();
13+
canvas = createCanvas(400, 400);
14+
//overflow('hidden'); //if you want to stop DOM p5 teach elements from overflowing
1215
background(20);
1316
drawGraph();
1417
}
1518

16-
let g = 0;
17-
function draw() {
18-
// g += 0.2;
19-
// sampler(g);
20-
}
21-
2219
function drawGraph() {
23-
grp = create2DGraph((t) => amp * Math.cos(freq * t));
24-
grp.size(490, 490);
25-
config = {
26-
stepX: 1.5,
27-
stepY: 0.75,
28-
minX: -5,
29-
maxX: 5,
30-
20+
let graph = create2DGraph((t) => amp * cos(freq * t));
21+
graph.size(width, height);
22+
let config = {
23+
stepX: 1,
24+
stepY: 1,
25+
minX: -10,
26+
maxX: 10,
3127
graphColor: GOLD20,
32-
graphStrokeWidth: 1,
33-
tickX: 'false',
34-
tickY: 'false',
35-
tickColor: 'yellow',
28+
graphStrokeWidth: 2,
29+
tickX: 'true',
30+
tickY: 'true',
31+
tickColor: INDIGO50,
3632
smallGridColor: ULTRAMARINE40,
3733
gridColor: MAGENTA50,
3834
originX: 0,
3935
originY: 0
40-
//pathElements: 3000
4136
};
42-
grp.configure(config);
43-
grp.axis();
44-
grp.plot();
45-
//grp.position(5, 5);
46-
}
47-
48-
function sampler(time) {
49-
const gap = 0.5;
50-
const gapWidth = 16;
51-
fill(255, 0, 0);
52-
if (parentDiv) {
53-
parentDiv.remove();
54-
}
55-
parentDiv = createDiv();
56-
parentDiv.position(0, 0);
57-
parentDiv.size(width, height);
58-
parentDiv.style('overflow: hidden');
59-
for (i = 0; i < 10; i++) {
60-
div = createDiv();
61-
div.position(time + (gap + gapWidth) * i, 0);
62-
div.style('width', gapWidth + 'px');
63-
div.style('height', height + 'px');
64-
div.style('background-color: black');
65-
div.style('z-index : 10');
66-
div.parent(parentDiv);
67-
}
37+
graph.configure(config);
38+
graph.axis();
39+
graph.plot();
40+
graph.position(0, 0);
41+
let label = createTeX(`f(t)=${amp}\\cos{${freq}t}`);
42+
label.position(width / 2, height / 12);
43+
label.fill(GOLD20);
44+
label.play();
6845
}

‎src/index.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,11 @@ global.add = add;
1616
import { play } from './lib/Scene/play';
1717
global.play = play;
1818

19-
import { Scene } from './lib/Scene/scene';
20-
global.Scene = Scene;
19+
import { Scene, overflow } from './lib/Scene/scene';
20+
// global.Scene = Scene;
21+
global.overflow = overflow;
22+
23+
global.p5.prototype.registerMethod('init', Scene);
2124

2225
import {
2326
//sceneTime,

‎src/lib/Geometry/parametric.ts‎

Lines changed: 22 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,6 @@ export class GraphParametric2D extends GObject {
231231

232232
//TODO : only update linePath to increase performance
233233
update(xeqn: any, yeqn: any) {
234-
235234
const plot = this.graphObject.getElementById('plot');
236235

237236
this.xeqn = xeqn;
@@ -348,15 +347,11 @@ export class GraphParametric2D extends GObject {
348347
let tick;
349348
//x axis
350349
//+ve axis
351-
for (
352-
let i = 0;
353-
i <
350+
let veEnd =
354351
abs(
355352
int(this.svgWidth / (2 * this.config.scaleX) - this.config.originX)
356-
) /
357-
this.config.stepX;
358-
i++
359-
) {
353+
) / this.config.stepX;
354+
for (let i = 0; i < veEnd; i += 1) {
360355
let x =
361356
this.config.originX * this.config.scaleX +
362357
(i + 1) * this.config.stepX * this.config.scaleX;
@@ -380,13 +375,10 @@ export class GraphParametric2D extends GObject {
380375
//console.log(int(this.svgWidth / (2*this.config.scaleX)) + this.config.originX);
381376

382377
//-ve axis
383-
for (
384-
let i = abs(
385-
int(this.svgWidth / (2 * this.config.scaleX)) + this.config.originX
386-
);
387-
i >= 0;
388-
i--
389-
) {
378+
veEnd = abs(
379+
int(this.svgWidth / (2 * this.config.scaleX)) + this.config.originX
380+
);
381+
for (let i = veEnd; i >= 0; i -= 1) {
390382
let x =
391383
this.config.originX * this.config.scaleX -
392384
(i + 1) * this.config.stepX * this.config.scaleX;
@@ -427,15 +419,10 @@ export class GraphParametric2D extends GObject {
427419
let tick;
428420
//y axis
429421
//+ve axis
430-
for (
431-
let i = 0;
432-
i <=
433-
abs(
434-
-int(this.svgHeight / (2 * this.config.scaleY)) +
435-
this.config.originY
436-
);
437-
i++
438-
) {
422+
let veEnd = abs(
423+
-int(this.svgHeight / (2 * this.config.scaleY)) + this.config.originY
424+
);
425+
for (let i = 0; i <= veEnd; i += 1) {
439426
let y =
440427
-this.config.originY * this.config.scaleY -
441428
(i + 1) * this.config.stepY * this.config.scaleY;
@@ -456,14 +443,10 @@ export class GraphParametric2D extends GObject {
456443
this.coordinate.appendChild(tick);
457444
}
458445
//-ve axis
459-
for (
460-
let i = abs(
461-
-int(this.svgHeight / (2 * this.config.scaleY)) -
462-
this.config.originY
463-
);
464-
i >= 0;
465-
i--
466-
) {
446+
veEnd = abs(
447+
-int(this.svgHeight / (2 * this.config.scaleY)) - this.config.originY
448+
);
449+
for (let i = veEnd; i >= 0; i -= 1) {
467450
let y =
468451
-this.config.originY * this.config.scaleY +
469452
(i + 1) * this.config.stepY * this.config.scaleY;
@@ -588,24 +571,20 @@ export function createParametricSVGPath(
588571
//let minX = parameterRange[0];
589572
// let scaleX = 100;
590573
// let scaleY = 100;
591-
let SVG_path = `M${
574+
let svgPath = `M${
592575
config.scaleX * xeqn(parameterRange[0]) + config.originX * config.scaleX
593576
},${
594577
-config.scaleY * yeqn(parameterRange[0]) - config.originY * config.scaleY
595578
}`;
596-
for (
597-
let parameter = parameterRange[0];
598-
parameter <= parameterRange[1];
599-
parameter += stepSize
600-
) {
601-
// SVG_path = SVG_path.concat(` L${1000*i},${1000*Math.sin(Math.PI / 2 * Math.pow(i, 1.5))/i}`);
602-
SVG_path = SVG_path.concat(
603-
` L${config.scaleX * xeqn(parameter) + config.originX * config.scaleX},${
604-
-config.scaleY * yeqn(parameter) - config.originY * config.scaleY
579+
for (let p = parameterRange[0]; p <= parameterRange[1]; p += stepSize) {
580+
// svgPath = svgPath.concat(` L${1000*i},${1000*Math.sin(Math.PI / 2 * Math.pow(i, 1.5))/i}`);
581+
svgPath = svgPath.concat(
582+
` L${config.scaleX * xeqn(p) + config.originX * config.scaleX},${
583+
-config.scaleY * yeqn(p) - config.originY * config.scaleY
605584
}`
606585
);
607586
}
608-
return SVG_path;
587+
return svgPath;
609588
}
610589

611590
export function create2DParametricGraph(

0 commit comments

Comments
 (0)