Problem Statement : How can I change the value of myText in dessin.js from the Nombres.vue file?
I'm trying to use p5.js in a Quasar project and I'm having trouble to interact from vues with my sketch.
Following the instance mode technique explained here, I've succeeded in having my sketch displayed in my page so far.
My page is Nombre.vue (and it is inserted in a MainLayout.vue parent page...) and its contents is :
<template>
<q-page padding class="bg-primary">
<div class="row items-center justify-center">
<div id="p5Canvas" container class="col justify-center"></div>
</div>
</q-page>
</template>
<script>
const P5 = require("p5");
const dessin = require("../js/dessin.js");
export default {
name: "Nombres",
mounted() {
// NOTE: Use p5 as an instance mode
new P5(dessin.main);
},
};
</script>In a dessin.js file, I have all the code for the sketch in a main function :
let p5;
let myText = "foo"
export function main(_p5) {
p5 = _p5;
let fontFixed,
tailleFonte = 120,
couleurFond = 0,
xText = 0;
p5.preload = () => {
fontFixed = p5.loadFont("/fonts/manti_fixed.otf");
};
p5.setup = () => {
let canvas = p5.createCanvas(p5.windowWidth * 0.9, 500);
canvas.parent("p5Canvas");
// Set text characteristics
p5.textFont(fontFixed);
p5.textSize(tailleFonte);
p5.textAlign(p5.CENTER, p5.CENTER);
xText = (p5.windowWidth * 0.9) / 2;
};
p5.draw = () => {
p5.background(couleurFond);
p5.fill(250);
p5.text(myText, xText, 250);
};
}You can give the vue variables as a parameter to your function. I've solved this by importing the js files, and not require them.
Like this:
import P5 from 'p5';
import { fromCenter } from '../scripts/algorithms/fromCenter';
import { circlePacking } from '../scripts/algorithms/circlePacking';
import { mazeGenerator } from '../scripts/algorithms/mazeGenerator';
import { colorDistance } from '../scripts/algorithms/colorDistance';
import { shrinkingCircles } from '../scripts/algorithms/shrinkingCircles';
import { randomOpacity } from '../scripts/algorithms/randomOpacity';
export default {
name: 'Game',
data() {
return {
averageColor: {},
method: 5,
image: 'src/components/icons/koe.jpg',
};
},
mounted() {
let p5;
let game = document.getElementById('game');
switch (this.method) {
case 0:
p5 = new P5(fromCenter(game, this.image));
break;
case 1:
p5 = new P5(circlePacking(game, this.image));
break;
case 2:
p5 = new P5(mazeGenerator(game, this.image));
break;
case 3:
p5 = new P5(colorDistance(game, this.image));
break;
case 4:
p5 = new P5(shrinkingCircles(game, this.image));
break;
case 5:
p5 = new P5(randomOpacity(game, this.image));
break;
Then in your dessin.js file you can get those variables like:
export function randomOpacity(element, imageToShow) {
return function (p) {
const p5Canvas = element;
Hope this helps.