var boat,groundImage; //variables declared
function preload(){
boat = loadAnimation("b2.png"); //loading animation
groundImage = loadImage("b1.jpg");
}
function setup() {
createCanvas(600, 400); //draw canvas
}
function draw()
{
background(180);
image(groundImage,0,0);
animation(boat,0,0); //locate animation
}
here is a simple code for using animation in p5.js editor. But I got an error as: ReferenceError: loadAnimation is not defined at /sketch.js:6:3
The loadAnimation() function is not part of p5.js. It is added by the p5.play add-on. I can only assume that you have forgotten to add a reference to p5.play in your index.html because you did not include a minimal, reproducible example.
<script src="https://molleindustria.github.io/p5.play/lib/p5.play.js"></script>
Related
I was getting started with the p5js library and I was trying to play an audio file on mouse click but I keep on getting error Cannot read property 'isPlaying' of undefined. I have defined variable song in the global scope and ```isPlaying is an p5js synatax that returns a boolean which I have imported as cdn in my HTML file. I cant figure out where I went wrong. Any help is appreciated. Thanks in advance.
var song;
function preLoad() {
song = loadSound('pathToAudio')
}
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(0)
}
function mouseClicked() {
if (song.isPlaying()) { //error initiate here
song.pause()
} else {
song.play()
}
}
<!--CDN for p5js library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I am trying to get background music playing behind my game using p5.js.
However, I have tried every variation I can possibly think of, trying new Audio, not having preLoad, etc. And whatever I do I still get the
Uncaught TypeError: Cannot read property 'play' of undefined" on my backgroundMusic.play();
I have tried to follow what the p5.js reference says to do.
let backgroundMusic;
function preLoad(){
backgroundMusic = loadSound("music.mp3");
}
function setup() {
createCanvas(600, 360);
backgroundMusic.play();
backgroundMusic.setVolume(10);
}
Here are few things i would like to add
You don't have to call the preload inside the setup, as mentioned in the above answer, because the setup is called by p5 after the preload, and if you will call the preload inside then p5 will again will call the setup and it will become a loop that will cause the stack to get overflow, you can read more about stack overflow here at this article
And here is what you should do to tackle this issue
Add p5 sound and p5 both because the loadSound is inside the p5 sound.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Play the music</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
<script>
let mySound;
function preload() {
mySound = loadSound("./yourfile.mp3");
// Todo : Add the path to your file above
}
function setup() {
let cnv = createCanvas(100, 100);
cnv.mousePressed(canvasPressed);
background(220);
text("tap here to play", 10, 20);
}
function canvasPressed() {
mySound.play();
}
</script>
</body>
</html>
Run the Above Code
you need to call preLoad() method inside the setup() to assign backGroundMusic.
let backgroundMusic;
function preLoad(){
backgroundMusic = loadSound("music.mp3");
}
function setup() {
createCanvas(600, 360);
preLoad(); //added
backgroundMusic.play();
backgroundMusic.setVolume(10);
}
So I'm doing the obvious...
var font;
function preload() {
font = loadFont('assets/text/riffic.ttf');
}
function setup() {
createCanvas(600, 600);
}
and then to call it I use...
function draw() {
textFont(font);
text("Hello", 100, 100);
}
When I try to use this font, the console tells me this...
Uncaught TypeError: Cannot read property 'length' of undefined
at Substitution.getDefaultScriptName (p5.js:31993)
at Font.stringToGlyphs (p5.js:27954)
at Font.forEachGlyph (p5.js:28069)
at Font.getAdvanceWidth (p5.js:28144)
at p5.Font._textWidth (p5.js:63498)
at p5.Font._handleAlignment (p5.js:63523)
at p5.Font._getPath (p5.js:63339)
at p5.Font._renderPath (p5.js:63458)
at p5.Renderer2D._renderText (p5.js:48828)
at p5.Renderer2D.text (p5.js:48788)
but no matter where I get it from the font style "Riffic free-bold just will not work with p5.js for me! Is there some kind of reason for this? Is riffic free-bold different from other fonts? If so, how? (I REQUIRE riffic free-bold, so I can't just use another font.)
Using JS, on a canvas, I have a ball moving across the canvas. It works fine.
I have created a button element in HTML and I want the function, "changeBallDirection()" to be called onclick.
changeBallDirection() should change the variable xBallDirection, which should change the direction of the ball.
The variable xBallDirection doesn't change. I printed xBallDirection on the canvas to confirm it wasn't changing. Code is below. First time posting, so please let me know any basic breaches in etiquette I may have committed. Thanks.
<script type="application/processing" data-processing-target="pjs">
void setup() {
size(400, 400);
};
frameRate(20);
var r=0;
var xBallDirection = 1;
var changeBallDirection = function (direction) {
xBallDirection = direction;
};
//draw ball on canvas and move to the right
void draw() {
fill(45, 56, 99);
ellipse(100+r, 34, 34, 34);
r=r+xBallDirection;
//I printed xBallDirection here so that I could see if it changed when the button was pushed
text(xBallDirection,50,50);
};
</script>
<button style="width: 100px; height: 100px; background:blue" onclick="changeBallDirection(-10)">Ball Left</button>
<canvas id="pjs"> </canvas>
changeBallDirection is not in the global namespace and therefore cannot be called within the onclick event.
You should get something like ReferenceError: changeBallDirection is not defined in your console when you click the button.
Move the function outside of the draw() portion of your script and everything should work fine.
How can I change the font in p5.js? It does not recognize the Processing term "loadFont," does not carry over a font from CSS, nor does it let me put in a .vlw file or link to a GoogleFont. At least, not in any way I have tried.
The references page only contains "text" and "textFont" options (in the Typography section at the end of the p5.js references page), neither of which allow for actually specifying a font.
I have also tried the
text.style('font-family', 'Walter Turncoat');
option listed here (https://github.com/lmccart/p5.js/wiki/Beyond-the-canvas) to no avail. It actually broke the whole page. In CSS:
#font-face {
font-family: 'Walter Turncoat';
src: url('http://fonts.googleapis.com/css?family=Walter+Turncoat');
}
Processing version did not work:
var type = loadFont("AmericanTypewriter-48.vlw");
var smallType = loadFont("AmericanTypewriter-14.vlw");
Also,
var type = "Helvetica";
which they have in the examples for text and textFont does not work.
There has to be a way to have another font. Please help!
The examples given in the reference work fine. Run code snippet below for results. What do you mean when you say it doesn't work for you?
function setup() {
createCanvas(640, 480);
}
function draw() {
fill(0);
textSize(36);
textFont("Georgia");
text("Hello World! in Georgia.", 12, 40);
textFont("Arial");
text("Hello World! in Arial.", 12, 100);
textFont("Walter Turncoat");
text("Hello World! in Walter Turncoat.", 12, 160);
}
<link href="http://fonts.googleapis.com/css?family=Walter+Turncoat&.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/p5.js/0.3.8/p5.min.js"></script>
To load a font in p5.js you need a .ttf or .otf file, p5 doesn't work with .vlw files. So to use a font in p5 you need to:
Get a .ttf or .otf font file. This font file will be loaded on execution time to your app.
Declare a global variable to keep the font.
Load the font with loadFont in a preload function.
After the font is loaded you must use textFont() to tell p5 that this is the font to be used.
Print someting with text().
Here is an example:
var myFont, fontReady = false;
function fontRead(){
fontReady = true;
}
function preload() {
myFont = loadFont("./fonts/MyfontFile.ttf", fontRead);
}
function setup() {
createCanvas(720, 400);
doyourSetup();
}
function draw() {
background(255);
if (fontReady) {
textFont(myFont);
text("Hello World!", 10, 30);
}
}
You need to load the font in preload:
var font;
function preload() {
font = loadFont('thefont.ttf');
}
function setup() {
createCanvas(600, 400);
textFont(font);
}
function draw() {
background(255);
text('The Text', 280, 300);
}
According to the docs, if you have a font file that p5 recognizes (such as otf, ttf ect...), you can load that font file and than use it with the following 2 lines of code:
var myFont = loadFont('customfont.ttf');
textFont(myFont);
and then write with the font like this:
text('Stack overflow', 2,2);
var myfont;
function preload() {
font = loadFont('font.ttf)
}
function setup{
createCanvas(400, 400)
}
function draw{
textFont(myfont)
text("Hello", 200, 200)
}
There is no need for a ready function because newer versions of
p5.js will not display the project until it is finshed loading if it is in the preload function.