I am trying to lighten a PGraphic being rendered using image(), (fade to white, essentially). I was trying to do it with the tint() function, but it does not seem to be possible as tint(255) basically does nothing. The image I am trying to lighten has transparency in it and is layered on top of other images, so reducing the opacity wields undesirable results. Does anyone know what I could do?
Here is a screenshot. Each ring and its protruding polygons are an individual PGraphic. I am trying to Lighten the smallest (farthest) PGraphics to give the illusion of visibility distance, reducing the tint as it approaches the front.
I am trying to export a sketch as an applet so it will run in the browser (so I can use the netscape javascript library), but when I run the applet in the browser I get this error (twitterarduino is the name of the sketch):
I wrote a dummy program as a test with no libraries and it worked fine as an embedded applet. However, once I included any library I got that same error. Many people seem to have gotten this error, but I haven't been able to fix it with any of the discussions I found on the forum thus far. Has anyone found a solution for this problem yet?
I am using Processing 204 (built from source) on a Mac OS 10.7.3. The sketch specifically uses the Ardunio, Serial, and Tweet Stream libraries.
While looking at examples of processing.js on the web, I have noticed that both .pde and .pjs file formats have been used for processing sketches. Could someone please explain the difference to me between using these two formats? Are there pros and cons to each? I have been developing in the javascript mode of the processing IDE, which defaults to .pde. If I were to change to .pjs, would I no longer be able to run from the processing IDE? Is it possible to call straight javascript functions when using .pjs? I have seen people call functions like window.innerWidth in pjs files, but am not sure how much javascript can be used.
I am writing a program that involves a 2D array of points. Each point in the array needs to check the distance between itself and all the other points during the draw loop. The problem is I'm trying to order the resulting array so I can know the order of neighboring points from closest to farthest. The problematic code goes something like this:
//Float array to store points and their properties
float[][] e = new float[count][4];
int count = 20;
void setup(){
//initialize point array
for(int i =0; i< count; i++){
e[i][0] = random(width); //x
e[i][1] = random(height); //y
e[i][2] = random(width); //targetX
e[i][3] = random(height); //targetY
}
}
void draw(){
background(0,0);
for(int i =0; i< e.length; i++){
//sortByDist should pass in x, y, and the array of points
//returns a 2D array where each row contains distance and the index of point in e
So basically I need to write the sortByDist() function to behave as it should in this code segment. The catch is that this will be converted to a processing.js project, so I can't use any complicated java functions that won't carry over. Any help would be appreciated, thanks so much!
So I've been using illustrator SVGs to do the graphics for my project since I figured PShape's ability to scale vectors would give a huge advantage over scaling and skewing PNGs. Unfortunately, the outlines don't seem to be scaling evenly.
Here's an example of my project sizing the shape directly
//width is tracked by the PVector mSize and the shape is scaled while drawn
Here's an example of using PShape's scale function. Tested using the example in Processing's example book
void draw() {
background(102);
translate(width/2, height/2);
float zoom = map(mouseX, 0, width, 0.1, 4.5);
bot.disableStyle();
scale(zoom, 1);
stroke(0);
strokeWeight(8);
shape(bot, -140, -140);
}
If you follow the outline, you can see where it thins and thickens. It seems to me like the stroke is being applied before the shape is scaled. Is there a way to scale the vector itself and THEN apply the stroke so that it will be even? Really appreciate any help, thanks! :)
I am trying to port a small game I made in processing to processing.js so I can use and expand upon it for mobile devices. The graphics are mostly SVG based. I'm planning on pretty much rewriting it from the ground up in hopes of making it more efficient, but just to test it out I decided I'd benchmark the framerate of the current build.
My results:
Chrome (desktop): 60fps consistently
Android default browser (2.3 on droidX): 10-12. Started around 24, but dropped down over about 30 seconds.
Safari (iPhone 4): Pretty much the same situation as android.
I knew it would be slower on mobile, but I wasn't expecting it to be this slow. Is this the standard experience with PJS on mobile? Am I doing something particularly wrong that makes it very inefficient? Would it be better to calculate the animation speeds based on current framerate or a timer in order to guarantee consistent animation across platform? Any help of advice would be appreciated.
