Please be patient if this question resembles several similar ones, but I do not seem to adapt the answers to my problem, for example Accessing Files with p5.js in Visual Studio Code.
The following sketch.js example works in https://editor.p5js.org/:
function setup() {
createCanvas(700, 700);
noFill();
console.log("Hello World!");
}
function draw() {
ellipse(mouseX, mouseY, 40, 80);
}
I would like to use Visual Studio Code to go ahead with p5.js.
The following index.html is given by the tutors of the example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../libraries/p5/p5.min.js" type="text/javascript"></script>
<script src="../../libraries/generative-design-library/generative-design-library.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<link href="../../styles/main.css" rel="stylesheet" type="text/css">
<!-- help tooltip start -->
<script src="../../libraries/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="../../libraries/tooltipster/tooltipster.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="../../libraries/tooltipster/tooltipster.bundle.css" />
<link rel="stylesheet" type="text/css" href="../../libraries/tooltipster/tooltipster-sideTip-noir.min.css" />
<script src="../../libraries/help-tooltip.js" type="text/javascript"></script>
<!-- help tooltip end -->
</head>
<body>
<span id="help" data-tooltip-content="#help-content">?</span>
</body>
</html>
The relative paths are fine with respect to the folder structure (downloaded from https://github.com/generative-design/Code-Package-p5.js/releases/tag/v1.3.2):
Code-Package-p5.js-1.3.2
libraries
01_P
P_1_0_01
index.html
sketch.js
I tried both extensions p5 Server and p5.vscode which result in the same behaviour: Only the question mark is shown, not, however, the canvas created in sketch.js. It seems that sketch.js is simply not found. What is the reason for this? What needs to be done in order to use p5.js in VS Code?
Do you have sketch.js in the same folder as your html file?
- main
- libraries
- p5 and stuff
- page0
- maybe assets
- code
- index.html
- sketch.js ???
You could also replace
<script src="sketch.js" type="text/javascript"></script>
with:
<script>
function setup() {
createCanvas(700, 700);
noFill();
console.log("Hello World!");
}
function draw() {
ellipse(mouseX, mouseY, 40, 80);
}
</script>
And also you might be able to put the sketch.js in <body>, I don't think that really helps, but it might, dunno.
To get p5.js working on your local computer:
You should have 1,(2,3)+ files:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
You can also store the p5.js library on your own computer, It's just a JavaScript file, but I copied this from editor.p5js.org.
sketch.js:
function setup(){
// use p5.js stuff here
}
// use everything else here it's all a starting point!
style.css:
body {
background-color: #111;
}
button {
width: 100vw;
height: 2px;
}
This is completely optional, just like .js file, you can use <style> </style> instead.
After you have all these files (currently) in a single folder. Just open the index.html file.
Related
I'm trying to work with three.js and really just html and js in general for the first time. I'm playing around with the example code and I found that even if I import the three.js file from the script tag in my Main.js file, it doesn't work unless I uncomment the script tag currently commented out. Why is this the case? Is there anyway i can run it in just my Main.js file without the first script tag?
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="utf-8"> -->
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<!-- <script src="node_modules\three\build\three.js"></script> -->
<script src="js/Main.js"></script>
</body>
</html>
please try this option: in your main html page <script type="module" src="js/Main.js"></script> and in your main.js page import other js pages
Try replacing
<script src="node_module/three/build/three.js"></script>
with
<script type="module" src="node_module/three/build/three.module.js"></script>
If you are importing module functions, it should be declared as a module.
(Not sure why type="module" should be part of the tag
<script src="js/Main.js"></script>
unless Main.js is exporting functions to be used outside of it.)
I am trying to learn about p5 and have been going through the tutorials (https://p5js.org/reference/#/p5.SoundFile).
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound('assets/cam.mp3');
}
function setup() {
mySound.setVolume(0.1);
mySound.play();
}
I have followed the documentation verbatim, except for the fact that I switched in my own test song. When I run this on my repl.it https://repl.it/#JacksonEnnis/Coloquial I get an error stating "ReferenceError: soundFormats is not defined". However, I know that this function IS defined, because it is from the documentation. I have googled the problem, but it does not seem like it is a common issue to experience.
If anyone understands why this is happening, please explain it to me so I may learn.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script language="javascript" type="text/javascript" src="path/to/p5.sound.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<script src="script.js"></script>
</body>
</html>
Just to sum up the comments.
Here's the solution that works:
<!doctype HTML>
<html>
<head>
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.sound.js"></script>
</head>
<body>
<script>
function preload() {
soundFormats('ogg', 'mp3');
mySound = loadSound('https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3');
}
function setup() {
mySound.setVolume(1);
// mySound.play();
mySound.loop();
}
</script>
</body>
</html>
as you can see: the p5.sound.js file has to be included as well. It has to be a valid path and it has to be loaded after the p5.js.
soundFormats is a function defined in p5.sound.js. And if this javascript file has not been loaded properly, an error message "soundFormats is not defined" comes up.
I am creating a jQuery Plugin for building a form builder. The code is going to be very lengthy. I don't wanna keep everything in just one file.
To achieve this I am trying to break everything into ES6 modules but JS is throwing a Syntax error.
Uncaught SyntaxError: Unexpected identifier
Uncaught TypeError: $(...).formBuilder is not a function
Here's my code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Form Builder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<!-- <script src="functions.js"></script> -->
<script src="index.js"></script>
</head>
<body>
<div id="form-builder"></div>
</body>
</html>
<script type="text/javascript">
$("#form-builder").formBuilder();
</script>
index.js
import formBuilder from './functions.js'
(function($){
$.fn.formBuilder = function(){
formBuilder()
}
}(jQuery))
functions.js
export default function formBuilder(){
$.get('template.mst', function(template) {
let rendered = Mustache.render(template, fieldsData);
$('#form-builder').html(rendered);
});
}
I had to make two changes to get your code to run (in Chrome/Firefox):
First, from MDN
The import statement cannot be used in embedded scripts unless such script has a type="module".
This is a little misleading: "embedded script" sounds like it wouldn't include a src= script...but in practice it doesn't seem to work without it.
<script type="module" src="index.js"></script>
Second, module scripts are lazy-loaded, which means your final script tag will be executed before index.js is actually loaded/parsed. You can change this by using the jQuery ready callback.
<script>
$(() => {
$("#form-builder").formBuilder();
});
</script>
I have a project written in C# ASP.net. jQuery have worked well before format computer. I have reinstall windows 7 on pc then install VS 2012 again. I run project then give this error
JavaScript runtime error '$' is undefined
I don't change anything. I referenced jQuery top of aspx file.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<link rel="stylesheet" href="Content/themes/base/jquery-ui.css"/>
<style>
.ui-datepicker-trigger { position:relative;top:0px ;left:2px ; height:16px;width:16px;vertical-align:middle; }
/* {} is the value according to your need */
</style>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.12.0.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SOLUTION
I have found solution like this
Please check with your physical location of jQuery file.
or try to add CDN of jQuery as below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You should change the path of the jquery libs to relative like this:
<script type="text/javascript" src="~/Scripts/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="~/Scripts/js/jquery-ui-1.12.0.js"></script>
<script type="text/javascript" src="~/Scripts/js/jquery.maskedinput.min.js"></script>
You then will have to make a folder(if it doesn't exist) named Scripts and subfolder(if it doesn't exist) named js and place your jquery libs inside.
I am having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!