Processing sketch does not work in Browser - javascript

I created a sketch in Processing and I would like to put it on a website using Processing.js. I created an html page to put the sketch in and tested it out, but all I see is white screen. The sketch doesn't work.
I've read through the Processing.js Quick Start and as far as I can tell, I've resolved any problems with my sketch and processing.js. My next thought was that there was something wrong with the way I wrote the HTML page, or maybe my browser, but when I tested it with a simpler sketch, that sketch worked just fine. So there has to be something wrong with the sketch itself, but I can't figure out what it is.
For reference, here is the link to where the sketch is supposed to be and the source code of my sketch.
Site
Code
Thanks for any help you can provide.
Edit: Here's the error recieved in the console:uncaught exception: Processing.js: Unable to load pjs sketch files: WarefareBeta1_3/WarefareBeta1_3.pde ==> Invalid XHR status 404

Use an absolute URL in your data-processing-sources (something like http://krotalov.net/NonJoomla/WarefareBeta1_3/WarefareBeta1_3.pde).
Because the file you mention
there now, WarefareBeta1_3/WarefareBeta1_3.pde does not seem to be on the server. Or at least not in that directory.

Related

"SecurityError: The operation is insecure." when trying to include JS file

I have a remote HTTPS-server on which I published my website.
This site is being displayed in Chrome as it should, but in Firefox or IE it is not.
(Click image to enlarge)
I got a security error in my console. I have googled this problem, but still have no correct answer. Maybe someone here has encountered a problem like this. I'd be very appreciative if someone helped me to find out what's wrong.
The problem is not related to your vendor.js. It is auto-builded script and it contains all the code from the Vue components.
As #KevinB said, inside the generated file vendor.js your code probably deals with http://website.com link. So you gotta check out your Vue components on such links and change them to SSL-certificated.
Wish it helps.

JavaScript doesn't work on localhost

First, excuse me if my English is not completely right, as I am Dutch.
I'm busy working on a project. Since a short time, I get some errors in my console when I'm checking the website on my localhost. I'm using USB Webserver, but I had the same problem when I was using WAMP.
The strangest thing is, that the website is working on my live server, without errors.
The errors I get in my console on localhost are:
Uncaught SyntaxError: Invalid or unexpected token
Uncaught ReferenceError: jQuery is not defined
I know that, according to the second error, it might be a problem with the order in which the files are placed, but I have done that in the way it was done by the creators of my template.
The only thing I have done, is combining all the JavaScript files and minify them.
When I go to the source code on my live server, there's nothing wrong with the JavaScript code. But when I open the source code on my localhost, I get wrong symbols in the code, that's breaking up the actual code.
One line:
retÀ‚ã����À‚ã��������������������P‡Ê������������`ŸÊ����(ƒã������������à‚ã�����#������à‚ã������������idden"
The charset in my html is set to utf-8. I hope you guys can help me out! :)
If you need more information, just let me know.
Well,the first error in your console is exactly indicating that somewhere in your code has a syntax error.
You said your "html is set to utf-8",you might put the javascript code in the html.Make a try to separate it into a single file.

Processing.js FloatList doesn't work on web

My processing.js sketch uses FloatList and it works when I build it with Sublime. However, when I try to run it on a web page, the sketch doesn't load and I get Uncaught Processing.js: Unable to execute pjs sketch: ReferenceError: FloatList is not defined from the javascript console. Why is this happening and how can I fix it?
Any suggestions and help would be gratefully appreciated.
Well, the error says it all: Processing.js does not have a FloatList class. You can confirm this by checking out the Processing.js reference.
I'm not sure why Processing.js didn't implement the FloatList class. Maybe because JavaScript arrays are so different than Java arrays. That's just a guess though. Here is an open issue about this on Processing.js's GitHub page. Here is another issue that shows which classes have been implemented. FloatList is indeed not yet implemented.
In any case, you're going to have to modify your code to get rid of the FloatList class.
Of course, Processing.js is open source. So you could always add the FloatList class yourself! You might even be able to copy much of the source directly.

Renaming root folder in Three.JS project causes weird aliasing bug

I hate to be the guy who makes a stackoverflow account just to ask a question (I owe a lot to stackoverflow), but this really has me utterly stumped.
For months I've been plagued with a mysterious bug that causes a bizarre rendering error in my three.js VR projects when running on Android.
I've always been able to solve it by basically rebuilding everything from scratch virtually line-by-line to see what causes the problem. I've never had any luck pinpointing the cause however.
Today, I found a way to reproduce the problem - I took google's Google Cardboard three.js example (which you can find at vr.chromeexperiments.com (I'm not allowed more than two links until I get my 10 reputation)), added in some spheres (so that there was something to watch for in regards to the aliasing) and found that it was running fine.
Renaming the root folder from 'WTF' (can you tell this is frustrating me? :P)to 'WTFF' will result in the rendering error appearing. Copying the folder, renaming the original 'WTFF' and naming the copy 'WTF' will result in the original displaying the rendering error, and the copy displaying correctly. That is, the error is caused by the project's root folder not having the name it had when the project was first created. I'm editing everything in notepad++.
Am I missing something here? The only files here are plaintext .js and .html, and a few images. Why does the root folder's name have any influence at all on how WebGL content is rendered? Is there some way around this error? Does anybody know what's causing it? I'm pretty familiar with three.js, but I've never done anything directly in WebGL, so there might be something under the hood that I'm not aware of perhaps that involves the folder structure?
I didn't include any code since the problem doesn't seem to have anything to do with the actual code within the file (this problem has cropped up in every three.js project I've worked on). But let me know if you think it might help.
Thanks so much in advance! :)
Update: I went away for half an hour and came back - now the original WTF-named folder structure is also displaying the error. I'm forcing a reload with window.location.reload(true);, so I have absolutely no idea what is going on anymore.
So I think I may have found the solution:
While I'm not sure of the exact underlying causes, it seems the problem lies within Chrome for Android, and not within WebGL or Three.js.
It seems that Chrome for Android is caching the WebGL content and doing something with it that causes this error to crop up if the folder structure changes.
The problem can be fixed by clearing the Chrome cache (Settings -> Application Manager -> Chrome -> Clear Cache).
I hope this helps anyone who encounters this problem in the future!

wierd js / canvas issue - code example doesn't work locally

Here is the best js graph drawing thing - http://thejit.org/static/v20/Jit/Examples/Other/example2.html
It is so impressive, that I wanted to play with it a bit, but after downloading all the files, it isn't working.
So I did put this html (with all other files) page on web server (jetty) but still no result:
Opening file with Chrome, with properly added --allow-file-access-from-file doesn't fix the issue either
Obviously I am doing something wrong, but I have no idea what, so I will be very grateful for any input.
Somehow html file provided in .zip download from download page is different than html file downloaded directly from online example page (this one uses obfuscated (sic!) javascript file named jit-yc.js in place of 'normal' and WELL DOCUMENTED jit.js:) ).
So, if anyone would like to try JIT (there ins't much competition in good graph drawing tools - http://arborjs.org/ seems the only one)- using official download link is the only valid way ;)

Categories

Resources