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>
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 have a main canvas where i have text..
I want to add a drop shadow to this text... So i created a createGraphics image.. where i paint the same text
In this new createGraphics image i want to add a blur.. and then copy this blured image to my main canvas....
But when i try to apply the blur.. i get this error: Cannot read property 'getContext' of undefined
In this sketch in line 75..(I have simplified so its easier to debug) if you uncomment thte line where i add the blur.. it get the error.. : https://codepen.io/giorgiomartini/pen/LzQeGQ?editors=0010
This is how the code looks:
function setup(){
colorMode(HSB, 360)
createCanvas(canvasX,canvasY)
textShadow = createGraphics(canvasX, canvasY)
}
function mouseClicked(){
wordsUppercase = textArray.map(function(x){ return x.toUpperCase()})
const someWord = returnRandomFromArray(wordsUppercase)
blendMode(BLEND)
const colsArray = randomColor({luminosity: 'light', format: 'hsl',count: 5})
background(colsArray[0])
translate(width/2, height/2)
drawTextShadow(someWord)
image(textShadow, -width/2,-height/2);
}
function drawTextShadow(someWord) {
textShadow.clear()
textShadow.translate(width/2,height/2)
textShadow.textSize(60)
textShadow.fill(0)
textShadow.textAlign(CENTER)
textShadow.rectMode(CENTER)
textShadow.textFont('Passion One')
textShadow.strokeWeight(10)
textShadow.text(someWord, 0,canvasY/2.3,canvasX/1.5,canvasY)
textShadow.translate(-width/2,-height/2)
//textShadow.filter(BLUR,3)
}
Any idea what is the problem?
I found a gamecode on github [https://github.com/maryrosecook/retro-games] today. I want to edit it and use png images instead of the draw function, is there anyway I can do it?
Thank you.
BodyBlock.prototype = {
draw: function(screen) {
drawRect(screen, this, "black");
}
drawRect() was custom, from scratch function.
var drawRect = function(screen, body, color) {
screen.fillStyle = color;
screen.fillRect();
};
What you are looking for is standard javascript canvas Method.
http://www.w3schools.com/tags/canvas_fillrect.asp
Tutorial : http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/
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.