Example of importing classes from external file

[zunaidFarouque]

What is the proper way to import custom classes from external js/ts files, and use the object in Sketch?

example that creates problem, looks like this:

(+page.svelte)

<script lang="ts">
	import P5, { type Sketch } from 'p5-svelte';

	const sketch: Sketch = async (p5) => {
		let pLoc: Vector;
		let cnv;
		let walker = (await import('./walker')).walker;
		let walker1 = new walker({ x: 0, y: 0, size: $opts.strokeWeight });

		p5.setup = async () => {
			p5.createCanvas(400, 400);
		};

		p5.draw = () => {
			p5.background(0);
			walker1.walk();
			walker1.draw();
		};
	};
</script>

<P5 {sketch} />

and
(walker.ts)

import type P5 from 'p5'; // <==================== importing p5 in external file

export class walker {
	y: number;
	x: number;
	speed: number;
	size: number;

	constructor({ x = 0, y = 0, speed = 5, size = 5 } = {}) {
		this.x = x;
		this.y = y;
		this.speed = speed;
		this.size = size;
	}

	walk() {
		this.x += Math.random() * this.speed - this.speed / 2;
		this.y += Math.random() * this.speed - this.speed / 2;
	}

	draw() {
                // HERE IS THE MAIN PROBLEM..... HOW TO DRAW?
		p5.stroke('orange');
		p5.strokeWeight(this.size);
		p5.point(this.x, this.y);
	}
}

as i cannot access the p5 functions, i cannot draw.

I tried to import p5 from 'p5' in 'walker.ts' file. it makes another problem. the

		p5.setup = async () => {
			p5.createCanvas(400, 400);
		};

have no effect then. a small p5 canvas is shown in the place. It does not work properly.

---

How it is solved:

(+page.svelte)

<script lang="ts">
	import P5, { type Sketch } from 'p5-svelte';

	const sketch: Sketch = async (p5) => {
		let pLoc: Vector;
		let cnv;
		let walker = (await import('./walker')).walker;
		let walker1 = new walker({ x: 0, y: 0, size: $opts.strokeWeight });

		p5.setup = async () => {
			p5.createCanvas(1000, 1000);
		};

		p5.draw = () => {
			p5.background(0);
			walker1.walk();
			walker1.draw(p5);     // <========================= p5 added here
		};
	};
</script>

<P5 {sketch} />

and
(walker.ts)

import type P5 from 'p5'; // <============================ importing type for autocompletion

export class walker {
	y: number;
	x: number;
	speed: number;
	size: number;

	constructor({ x = 0, y = 0, speed = 5, size = 5 } = {}) {
		this.x = x;
		this.y = y;
		this.speed = speed;
		this.size = size;
	}

	walk() {
		this.x += Math.random() * this.speed - this.speed / 2;
		this.y += Math.random() * this.speed - this.speed / 2;
	}

	draw(p5: P5) { // <=============================== p5 added here
		p5.stroke('orange');
		p5.strokeWeight(this.size);
		p5.point(this.x, this.y);
	}
}

what i don't like about this solution is to use any function that will use p5.js things, I will have to pass it when calling.

I believe there should be a better way to do it.

---

I may be doing things in the wrong way, please correct me learn if that is the case, like

• importing classes that use p5 functions,
• creating object from the class in the sketch,
• calling functions on those objects etc.

A clear example on how to do these in the documentation page for can be very helpful.