How to install P5js on windows? - p5.js

I have downloaded the p5js file on my windows computer but can't find a way to install it
Have you installed p5js on your pc if yes then please help me
It's a zip file so I extracted it using Winrar but in the extracted files there is one called MacOSX and i suppose that's for mac users even though I clicked on download for Windows button on the official website

p5js does not require an install. The javascript libraries can be downloaded and accessed locally or can be pulled in from a CDN.
The question mentions the MacOSX folder that is included with the source. You can ignore or even delete this folder. The MacOSX folder contains a _DS_Store file which helps Mac operating systems know how to display folder contents. See the DS_Store wiki article for more info.
p5js get-started has a nice introduction and some minimal examples.
function setup() {
}
function draw() {
ellipse(50, 50, 80, 80);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
If you downloaded a copy of p5.js the complete HTML of the example could look like this
<html>
<body>
<script src='p5.js'></script>
<script>
function setup(){}
function draw(){
ellipse(50,50,80,80);
}
</script>
</body>
</html>
A sketch like the one above can be simply saved with an html extension in the same folder as the p5.js file and opened with a web browser.
One thing to note is that as you write more complex sketches that require resources such as images or data files you may need to host your projects on a server. This is also very simple to do. Get more information on simple web servers here: local-server

In order to use P5js include CDN
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js">
</script>
</head>
<body>
</body>
</html>

As others have said, p5.js is a JavaScript library, so you don't really have to install anything for it to work.
If you're looking for a p5.js editor, I recommend using the p5.js web editor which handles everything for you.
Shameless self-promotion: here is a tutorial on using p5.js in various editors, and here is a tutorial on including the script in an HTML file.

We don’t need to install anything, just use the CDN…
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>

You don't need to install anything, as you can use the web editor or you can install the processing editor and add p5.js mode, and it will conveniently set up everything for you.

My recommendation is to use an IDE with P5.JS
https://code.visualstudio.com/
after that install the extension
and then create a folder and name it what ever you want
then hit CTRL SHIFT P and type
"Create p5.js Project"
then select your folder and click on
Sketch.js

Related

Generic open of files on netwok drives

How to open a generic file (Word, Excel, PDF, txt, or ?) from a network drive using Windows?
I had assumed that an html file with the following content would have solved the issue for a Word file:
<script type="text/javascript" language="javascript">
let q = "\\serverName\PathToFile\NewestFile.docx"
window.open("ms-word:ofe|u|"q)
</script>
Basic idea is to link create a link to the latest file, that then can be refered as a link, that do not change despite the file versions change. url to file works, but is extracted (link inside file is taken), when applying this in a mail in Outlook :-(
Any great ideas?

p5js with Jekyll

I am quite new to Jekyll and I am not sure how I can go about creating a website with p5.js sketches embedded into it for a project that I am working on.
I suspect it has something to do with dependencies and I would much appreciate any help/pointers I can get!
There is nothing special about the combination of Jekyll and P5.js.
The important thing to understand is that the output of Jekyll is "just" regular HTML. You can include a P5.js sketch inside any HTML page. So you can include P5.js in Jekyll just fine.
Here is an example page that embeds a P5.js sketch in a website created using Jekyll. Here is the source markdown of that page. Jekyll takes that markdown and outputs HTML.
It's going to be hard to be more specific than that, but the general answer to your question is to focus on the HTML and focus on any errors you're getting.
If you still can't get it figured out, please post new question that includes a link to an example Jekyll repo that shows the error, and include the full error in your post.
I wondered the same and #Kevin Workman's examples worked. Note that you don't need to add the entire javascript code in a script object, you can point to it (I for one didn't know any of this until an hour ago)
You can add something like this in your post's .md file to reference a file called "myjavascriptfile.js". Note you can also use a hosted version of the p5.js file
<div id="sketch-holder"></div>
<script src="https://cdn.jsdelivr.net/npm/p5#1.1.9/lib/p5.js"></script>
<script src="myjavascriptfile.js"></script>
The "sketch-holder" thing gives you a bit more control over the sketch and requires you to add this to the setup() function:
function setup() {
....
const canvas = createCanvas(something, something)
canvas.parent('sketch-holder')
....
}

YUI on Windows 8 Metro App: YUI is not recognized

I am trying to create a Hello World JS Metro app on Visual Studio 2011, using YUI3.
I´ve grabbed a local copy of YUI, added to a subfolder in the solution, and added a reference to yui-min.js on my default.html page:
<!-- TodoJS references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js"></script>
<script src="js/yui/build/yui/yui.js"></script>
and then at the bottom of the page I´ve added the following code:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
YUI().use("event", function () {
//some code will go here..
});
}, false);
</script>
When I run the code, I get a null ref error on YUI(). I do get intelissense working in Visual Studio (e.g YUI().add), so the reference seems to be OK, but YUI is not found on run time. Any tips?
I would try the steps outlined in How To: Create a Windows 8 Metro App with JS and YUI 3
I take it that you've got the issue fixed. However if you'd like to use the YUI components such as "calendar", "tabview" etc, you'll have to modify a few files that include innerHTML calls and wrap the added html content with toStaticHTML.
There were only a couple of files(dom-base.js, yui.js) that needed to be modified and most of the components worked fine(including the "datatable" and "charts" widgets), with the exception of the rich text editor. The nice thing about YUI is that it supports touch gestures for a majority of the components, for example panning "datatable" works correctly.

Trying to get Javascript music player to work on external website

I was using the SCM music player for my tumblr page and a couple of other pages on the internet. But the SCM website went down. I found the player source files and loaded them onto my server. The script works fine on the website that the files are hosted on, but when I try to use the script on web pages that aren't on my server it seems that it just won't work.
I tried looking in the script file to see if there was something I could fix, but no luck. Is there something wrong with the code below?
<script type="text/javascript" src="http://www.itsnotch.com/tumblr/SCMmusic/script.php" ><!--
//--></script>
<script type="text/javascript"><!--
SCMMusicPlayer.init("{'skin':'http://itsnotch.com/tumblr/SCMmusic/skins/cyber/skin.css','playback':{'autostart':'true','shuffle':'true','volume':'50'},'playlist':[{'title':'Dam-Funk','url':'http://itsnotch.com/music/10_west.mp3'}],'placement':'bottom','showplaylist':'false'}");
//--></script>
I figured it out. For anybody who would still like to use the SCM music player.
You will have to download the files from a site (forgot which one, just google it). Then you'll have edit the script.php file.
There a line of code that reads like this.
"this.url =" and then a php method follows it. Erase the and everything between it and replace it with the actual container.php url path.
ANd it should work

AbcPdf - document not applying CSS

This may be more of a tech support issue, but I'm wondering if any other developers have come across this:
I'm using Abcpdf in my ASP.NET code to generate a PDF from HTML. It works fine, but one user is generating PDFs that don't have the CSS applied (IE8, Adobe Acrobat latest version - same as everyone else). Since this is the only user complaining, I'm sure it's a local setting, but I can't figure out what would prevent the css from loading - a browser setting? An Acrobat setting?
Does anyone have any suggestions?
Perhaps an issue with different versions of Acrobat reader? I'd look into this.
This doesn't make a lot of sense because AbcPdf uses service side logic to create the PDF based on what methods you are using to create the document (ex. AddImageUrl vs drawing out the document manually, etc.).
For what it's worth the staff at WebSuperGoo (the vendor of AbcPdf) is great with replying to support questions such as this. I've run across a few edge cases with their product that they've always followed up with workarounds or alternatives to address in a timely manner.
make sure you have media="print" for the CSS style sheet! Just spent ages looking at this pulling my hair out and was about to email WebSuperGoo then that thought came to me.
just about to back out all the changes I've made to my code and test again but it looks like with EngineType.Gecko it needs to be media="print" where as with EngineType.MSHtml it can be media="screen".....
very odd but hope that helps someone!
Make sure that the CSS is an absolute URL rather than relative, or add a base tag to the header of the HTML
For example, rather than
<style type="text/css" href="/styles/somecss.css" rel="stylesheet" />
use
<style type="text/css" href="http://myserver.com/styles/somecss.css" rel="stylesheet" />
Also if you site is SSL or authenticated then you will have to either make the area with the stylesheet un-authenticated, or, set the password and username attributes of the PDF object so that ABCPdf can authenticate
You can try the following in version 9
doc.HtmlOptions.PageLoadMethod =
PageLoadMethodType.WebBrowserNavigate;
I am using Version 10 of ABCpdf and I found that the style sheet path should be absolute instead of relative.
I changed the stylesheet path from "C:\MyProject\Resources\Styles.css" to "http:\www.MyDomain.com\Resources\Styles.css" and it worked.
Although, version 6 seems to be working with relative paths. I didnot check it with other versions
As per WebSuperGoo support:
(Query # : 6.17)
HTML does not exist within a file and so it does not have a location.
External stylesheets and images are often referenced via relative URLs. Because the HTML has no location it is impossible to resolve
these relative references.
So you need to provide your stylesheet and image links as absolute references. Or you may be able to use the HTML BASE element to specify
an appropriate base location. Or you can save your HTML to file in an
appropriate location and then use AddImageUrl.
Have you tried;
theDoc.HtmlOptions.DoMarkup = true;
This forces the engine to process the HTML before rendering.

Resources