I recently discovered Processing and initially it seemed great for my purposes, to wit generating a 3d image and having it respond multifariously to user input.
Everything is working great so far when I run the .pde in the processing environment or as a java applet.
but for my purposes i need to run through a browser and without java dependency.
Processing.js seemed at a glance like a golden solution to this.
but the sketch just doesn't look very nice in the browser.
The three main problems are the following:
-lights() doesn't work. nor does anything lights associated. e.g. calling directionalLight(...,params,...) disappears the entire result of draw() and calling lights() only darkens the result uniformly.
-smooth() doesn't work either. I have maximum anti-aliasing set—smooth(8)— but i see no effect over noSmooth().
-the frame rate is generally pretty bad, so that I have a visible refresh line moving around the object... not good. I'd estimate that frameRate() is capping out at 30ish fps when i embed in html, no visible cap in native Processing environment or java app.
Yet I've seen a lot of beautiful processing.js examples. I feel like I must be missing something, else this would be working better. Any insight into these problems and their solutions or lack thereof would be tremendously appreciated. Or perhaps I should just use WebGL?
Since all my .pde code seems good, I wasn't going to post that.
But for just in case here's the html code (which should be trivial) used to embed the sketch with Processing.js. I am using Processing.js v1.4.8 obtained here: https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.js
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="Processing.js"></script>
</head>
<body>
<canvas data-processing-sources="example.pde"/></canvas>
</body>
</html>
Thanks for your time!
Related
I have this swf of map locations. However, I didn't put the map background inside the swf since it will be too big and I won't be able to convert it. Now the problem is the swiffy background can't be transparent even if I remove the backgroundColor. Replacing the v5.2 to 5.1 making the whole locations icon disappear and the whole thing become black.
I have the same map with different function that I converted in 5.1 and it's still working well. Is there any way to convert my new map using v5.1?
Yeah, relying on a online "compiler" makes large product development and maintenance darn near impossible or at least terribly frustrating. I've asked Google numerous times for a stand alone compiler, and they aren't interested in sharing it right now. We've just got to move along with them and rebuild every file with each update for reasons similar to yours.
Here is a possible work-around for you:
<style type="text/css" media="screen">
#div > *:first-child {
background-color: transparent !important;
}
</style>
According to the HTML5 Boilerplate team (and many other authors, for sure), all JS on a given page should go at the bottom (right before the </body> tag) as far as this is possible, except for Modernizr due to the way it acts during page load.
Given that Google WebFonts Loader works, as far as I can tell, pretty much the same way as Modernizr (by doing #font-face feature-detection and adding classes to the <html> tag), I wonder if the same holds true for this script...
Should this go on the <head> or <body> tag? Does it matter all that much?
Short answer: as much as the pageload speed purists would love to tell you otherwise, the reality is that no, it doesn't actually matter that much. Put it at the top.
The only reason for putting JS includes at the foot of the page is for page loading performance reasons. If putting it at the top does not result in a noticeable performance drop, then it really doesn't matter. Particularly it's just the one or two scripts and you stick to having most of your scripts still at the bottom. The things is: for most sites, the difference it makes is pretty negligible.
I don't really know the answer as it applies specifically to Google Webfonts, as I haven't used that library (yet), but my advice is just stick it at the top with Modernizr, and be done with worrying about it.
I am interested in displaying the following URL in a UIWebView:
https://mlogin.yahoo.com/
The trouble is that this page renders too large on an iPad.
You can try opening the URL in Safari (on an iPad) directly and you will see what I mean.
I want to present the page in a UIWebView so that it looks aesthetically pleasing and not bloated and gigantic.
I tried the following approach (which does help partially)
- (void)webViewDidFinishLoad:(UIWebView *)wView {
[wView stringByEvaluatingJavaScriptFromString:#"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '50%'"];
}
However, this approach only changes the font size. The images still look fugly.
Anybody got any ideas?
Maybe inserting something like:
<meta name="viewport" content="width=320"/>
in the head of the document would help?
If so, can anyone give the code snippet to insert this programmatically (in a similar fashion to changing text size code provided by me).
I eventually used the following which achieves my purpose:
- (void)webViewDidFinishLoad:(UIWebView *)wView {
[wView stringByEvaluatingJavaScriptFromString:#"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '50%'"];
[wView stringByEvaluatingJavaScriptFromString:#"document.getElementsByTagName('body')[0].style.zoom= '0.5'"];
}
I've recently come across Google's Excanvas stuff... It's all very well and good having <canvas> for the turdier browsers out there, but I was wondering how optimised it was; can I use processing.js on it (probably) and get framerates close to those I'd get on a native canvas in something like Chrome/FireFox?
Thanks,
James
This will mostly depend on the sturdiness of the machine your code gets executed on, and the speed of the javascript interpreter that will run your code.
ExtCanvas means extra overhead, and some versions of Chrome and Firefox support hardware acceleration of their canvas rendering.
This makes it unlikely that using ExtCanvas will yield the same results (as far as speed is concerned) as a canvas tag
All I can say is my layout went crazy in IE8 and I cannot see why. Of course, it looks correct in other current browsers. I have spent many hours trying to figure it out but when I make any changes, they do not fix this issue and send everything haywire in the other browsers. Can someone please take a look? This one is beyond me!
The page:
http://www.careersinmusic.com/sell-my-music.aspx
MANY thanks!!!!
Rich
well first of all 'jQuery' is undefined on line 132?
The main issue I can see in debugging your IE8 Compatability Mode On code is your lack of clears on the floats.
You should look into how CSS does floating, you must clear the float afterwards otherwise things can get really janky.
To clear a float you put in:
<div style="clear: both;"></div>
That will clear both left and right float (eg starting a new section). To just clear one of the floats you can do clear: left; or clear: right;
Here's a tutorial on floats with CSS:
http://css.maxdesign.com.au/floatutorial/
Also....honestly....the html and css are a mess. I can barely tell what is going on in some of it....allthough that might just be the asp.net adding in magic to try and 'help' you.