How can a [pde-processing] file work with [html-webpage] - javascript

I am trying to load a pde (processing) file with an html webpage so that they can work together.
In the main folder of the website there are the pde file and the processing.js library file.
I wrote this string of code in the "head":
<script type="text/javascript" src="/scripts/processing.js"></script>
Then at the end of "body" I wrote the "canvas" string:
<canvas id="your-id-here" data-processing-sources="file1.pde"></canvas>
The webpage that I am working on is really simple, there is only a text link list. When I test the index.html the webpage is displayed correctly but the pde doesn't work. I also noticed that because of the "canvas" string the last link doesn't work anymore.
The pde code is a sample copied from the Processing website, basically is drawing with the mouse just when you press the mouse button.
Thank you for your help in advice!

Make sure you're checking the developer tools for errors. Specifically, look at your JavaScript console and the networking tab.
Like you've discovered, you can use Processing.js to deploy simple Processing sketches to the web. Note that Processing.js is pretty old now, so you should only use it if you really need to. If deploying to the web is a priority, you should consider switching to P5.js.
Shameless self-promotion: here is a guide on using Processing.js to deploy a Processing sketch.
If you still can't get it working, please provide the full text of any errors you're receiving, as well as a MCVE that demonstrates exactly what you're doing.

Related

How do i enable javascript in a .html document?

I wanted to learn a lil bit of website coding so I decided I want to see how a website is written. I used HTTrack Website Copier to copy a website and then i opend the index.html document. Now I saw a row where it says "-- Please enable Javascript --</p". How do I enable javascript to see what normaly would stand in that row? Also i dont have any html oder css file in the folder where HTTrack put the index.html into. Is that normal?
I dont know what to do about this cause i started 2days ago^^
Chances are, that page you copied is referencing a JavaScript file that you didn't download with the HTML file. Look through your HTML for a <script src="...">...</script> tag or something similar; that's the missing file. Same goes for the CSS, except that will be near the top with <link rel="stylesheet" href="styles.css">.
HTML is how the page is laid out. CSS is how the page looks (font sizes, colors, etc). JavaScript is how the page works (interactive features). I'd start with just basic HTML, you're kind of jumping in on the deep end. Codecademy has great (and free) introductory courses that should help you understand what you're looking at better.

Debugging iframe in Readymag

I want to embed an interactive diagram in my Readymag page via iframe, but the diagram won't show up. I performed a test in JSFiddle: https://jsfiddle.net/TheFelipeGarcia/2p3aguck/, and it works there.
First, I exported my infographic as HTML + JavaScript from Adobe Animate. Then, I used Readymag's Widget Code to add the code to my page. A side note: originally the HTML had a link to the JS file
<script src="infographic.js?1578942235513"></script>
but I pasted the JS inline (it's very long so I won't repaste here).
Does anyone have experience with Readymag or a similar issue of embedding iframes, that might have ideas what I could be doing wrong?

Getting the ocrad.js demo to work?

I am trying to get this: https://github.com/antimatter15/ocrad.js demo to work for me. Some of the elements will show up and function correctly when I download the files and open up the .html on my home machine. Some of them will not--I can draw and upload pictures, but the text recognition script features do not run. Has anyone been successful in recreating an ocr javascript demo? I am using the code from the github link above.

How to setup Three.js?

Hello!
I started learning three.js a few days ago, and I cannot find any information online that works about how you run a html file with three.js javascript coding.
This is how I have done:
I have a folder on my desktop named Threegame. Inside I have two files:
My html file with all my code, and the Three.min.js file
When I open my html file in my browser using Notepad++ ("run < launch in crome") nothing happens. And I dont think there is something wrong with my html code because when I use my code on Codecademy.com's code editor in their exercises it works and displays a three.mesh as a floor and the movements of the camera is working.
Here is my code.
Feel free to change the code as you are trying to help me :)
Tnx!

PhoneGap Javascript code is not displaying

I am developing an app using the PhoneGap/Cordova development framework. I am attempting to get the first portion of my app done, which simply outputs the time it takes for the mobile device to compute a million math functions (I'm analyzing the performance of the application). The issue is though that nothing seems to be printing out and all I have is a white screen. Here is my code:
https://github.com/messichess77/Phonegap-Processing
The specific js file that I call in the index.html is located here:
https://github.com/messichess77/Phonegap-Processing/blob/master/assets/www/processing.js
Thank you very much to anyone who can help! Sorry for being such a noob :)
Not entirely sure but it could be something along the lines of app.initalize(); not being completed before it starts your processing.js.
Instead, why don't you try something along the lines of first wrapping your processing.js into a function, for example let's say doTheMath(){...}. Then, move the processing.js file into the js/ folder just to keep the structure of files within PhoneGap.
Then, in your index.html, do something along the lines of:
<script type="text/javascript" src="js/processing.js"></script>
<script type="text/javascript">
app.initialize();
document.addEventListener("deviceready", doTheMath, false);
</script>
Also, for starters, just try a small number of calculations to make sure the app actually works, then you can adjust it to a ridiculous amount like a million. I say this because it's possible that it could just be taking forever to do those million calculations and just shows a white screen during that.

Categories

Resources