 |
Author |
Topic: P5 vs Eclipse (Read 30329 times) |
|
toxi
|
P5 vs Eclipse
« on: Dec 29th, 2003, 7:31pm » |
|
certainly intended for the more experienced users, but as a lot of us have started writing more complicated code, often using multiple classes, the internal P5 editor is becoming increasingly un-userfriendly being still limited to only a single source file per sketch. so until that situation is rectified, for a new project i've started recently i decided to use another existing IDE, namely eclipse. this open source environment has all sorts of luxurious features like code hints and completion, error checking as you type, intelligent refactoring (renaming), javadoc generation etc. it's all quite heavyweight, but in short, it just ROCKS and above all, once setup correctly it works like a charm with the Processing libraries (as expected : ) !
so if you feel you have slightly outgrown the PDE and are interested to check out eclipse, below are the steps to set you all up & running...
1) if you haven't done so yet, download and install a recent version of the JavaSDK (v1.3.x or newer) from Sun's website
2) go to the eclipse download page and select latest stable built (2.1.2 as at time of writing). on the next page select "eclipse SDK" (including the Java Development Tools). you'll need them as eclipse itself is a very flexible IDE and is using plugins to handle various development types. the JDT plugins are needed for using eclipse with java.
3) once installed (for windows i recommend directly into C:\eclipse) - launch eclipse and select "new project" from the "file" menu. select "java" and then "next". now give a name to the project, eg. "HelloP5" and click on "next" again. in the new dialog, click on the "libraries" tab. you should see a list of installed JREs. however we need to manually add the Processing libraries. so select "add external JARs" and open the "lib" folder of your processing application (eg. C:\processing-0067\lib). select both "pde.jar" and "comm.jar". press "finish" to setup the project folders and confirm that this project will use the "java perspective".
4) by now you should see the interface has changed to the java perspective, with the "package explorer" on the left. for some good housekeeping, lets create a subfolder for storing all source files independently from the exported classes. select "file menu > new > source folder" and use "src" as the folder name. click "ok" to confirm. a new icon for that folder should now appear in the package explorer. please select it.
5) in order to write some code we first need to create a new class, so select "file menu > new > class" and name give it a name, eg. "HelloP5". (note: for the later parts of this tutorial to work, you should name this class like your project name). Ignore the other options in that dialog for now and just press "ok". You'll see eclipse opened the new source file for you and has filled in some basic default class definition code already.
6) if you ever had a look at the exported java file the Processing PDE is generating, you'll have seen that all your sketches are implemented as sub-class of the almighty BApplet. eclipse can't know about that fact, so we'll have to tell it the compiler ourselves by adding "extends BApplet" to the class definition. here's some example code:
Code:public class HelloP5 extends BApplet {
void setup() {
size(200, 200);
}
void loop() {
fill(random(255),50);
noStroke();
rect(random(width), random(height), random(100), random(100));
}
} |
|
7) save the changes to the file and select "Run..." from the "Run" menu. Choose "java applet" and press "new" to create a new setting. the wizard will fill in all the necessary fields apart from the window dimensions, which default to 200 x 200 pixels. if your sketch is using anything different, you'll need to edit the settings under the "parameters" tab. click "apply" and then "run". btw. this step is only needed once per sketch, you can also run the currently selected sketch by pressing CTRL+F11.
8 ) if everything's setup correctly, you should now see your sketch in the java applet viewer.
|
| « Last Edit: Dec 30th, 2003, 8:07pm by toxi » |
|
http://toxi.co.uk/
|
|
|
toxi
|
Re: P5 vs Eclipse
« Reply #1 on: Dec 29th, 2003, 7:31pm » |
|
working with multiple classes
_________________________________________________
so far, so good - but there's no point using eclipse if we're only going to write simple code as above. the next example will demonstrate how to split your sketch into separate class files and arising issues with doing such a thing.
1) replace the existing code with the following:
Code:public class HelloP5 extends BApplet {
Particle[] particles;
int numParticles=100;
void setup() {
size(200, 200);
noStroke();
fill(0,50);
particles=new Particle[numParticles];
for(int i=0; i<numParticles; i++) particles[i]=new Particle(random(width),random(height),random(-2,2),random(-2,2), width, height);
}
void loop() {
background(200,255,0);
for(int i=0; i<numParticles; i++) {
particles[i].update();
ellipse(particles[i].xpos,particles[i].ypos,5,5);
}
}
} |
|
2) save the changes and you should see a few dangerous looking icons at the left of your editor pane as well as for the file "HelloP5.java" in the package explorer. this all is caused by eclipse's fabulous error checking the source. if you rollover one of those icons, a short description of the error or warning should appear. in our case this obviously is caused by the lack of the "Particle" class we're referring to in the code.
3) so let's create this missing class by choosing "file menu > new > class" and "Particle" (capital P!!) as name, click "finish" and then paste in the following code:
Code:public class Particle {
float xpos,ypos;
float xspeed,yspeed;
int width, height;
Particle(float x, float y, float xs, float ys, int w, int h) {
xpos=x;
ypos=y;
xspeed=xs;
yspeed=ys;
width=w;
height=h;
}
void update() {
xpos+=xspeed;
ypos+=yspeed;
if (xpos<0) xpos+=width;
else if (xpos>=width) xpos-=width;
if (ypos<0) ypos+=height;
else if (ypos>=height) ypos-=height;
}
} |
|
save the changes to this file. as a result you should see all warning icons disappear. press CTRL+F11 to run the new sketch/applet and enjoy.
misc pointers:
_________________________________________________
* setting up the data folder for a sketch
select the project node in the package explorer and then choose "file menu > new > folder". expand the project root node by clicking and select the "bin" folder as the parent for the new folder. type in "data" and press "finish". note: the /bin folder will only exist if you have created a source folder (step 4 above). if no source folder is specified, all source files will be stored in the project's root folder and hence the "data" folder has to be created at this level too.
more to come, feel free to add tips & tricks yourselves...
|
| « Last Edit: Dec 30th, 2003, 8:36pm by toxi » |
|
http://toxi.co.uk/
|
|
|
toxi
|
Re: P5 vs Eclipse
« Reply #2 on: Dec 30th, 2003, 8:04pm » |
|
exporting applets
_____________________________________
building applets is (initially) not as straight forward as with the PDE. instead we'll use Ant (included in the eclipse installation) to export our project as applet. this gives us much more flexibility, but we need to set up a few more preferences first:
1) open "window menu > preferences" and expand "ant > runtime". In the "classpaths" tab, select "add JARs.." and choose both "pde.jar" and "comm.jar" from the Processing "/lib" folder (same as in step 3 above). click "apply".
2) now select the "properties" tab in the same dialog and choose "add". use "java.home" as name (without the quotes) and for the value type in the path to where you have installed your Java SDK in the beginning. Eg. C:\j2sdk142. again "apply" and then press "ok" to close the preferences dialog box.
3) download this ant build file and copy it into your eclipse project folder.
4) now open "run menu > external tools > external tools..." and select "ant build". click "new" to create a new setting. give the setting a name, eg. "P5 export". then, in the "main" tab, the location of the build file should already be filled in automatically. Eg. "${workspace_loc:/HelloP5/build.xml}". we also need to set the base directory to the location of our project. to do this, click "browse workspace" and select the current project. the base directory value should be something like that: "${workspace_loc:/HelloP5}". there's one more little change needed here, though, in order to use the correct naming for the generated .jar file and its HTML wrapper file. copy the following into the "arguments" textbox:
Code:| -Dproject_name=${project_name} |
|
click "apply" to activate these settings.
5) next, select the "properties" tab, where we will define 3 more parameters for the HTML file generation. for each property click "add..." and use the following value pairs:
name: applet.width
value: the width of your sketch, as used in the size() statement of your sketch.
name: applet.height
value: the height of your sketch
name: classpath.processing.export
value: the path Processing's /lib/export folder (eg. C:\processing-0067\lib\export )
there's another optional property to add some comments for the applet, which will appear in the HTML file:
name: applet.comments
value: whatever you want users to know about your work (can contain html)
you should now see all the properties in the list. click "apply" once more.
6) press "run" to export the applet. the build script will now do the following:
* create a new folder /applet within your project root
* compile the sketch as java1.1 compatible applet
* build a jar file incl. all Bagel classes and contents of the /data folder (if present)
* create a zip file of all files in the /src folder
* generate a validating XHTML1.0 wrapper file which is compatible with the upcoming IE (vs. Eola) security update
now, that you have a working Ant export setting, you can run it via "run menu > external tools > p5 export".
an example of this all is here: http://www.toxi.co.uk/p5/eclipse/hello/
have fun & a happy new 2004!
|
| « Last Edit: Dec 31st, 2003, 1:13pm by toxi » |
|
http://toxi.co.uk/
|
|
|
Martin
    
|
Re: P5 vs Eclipse
« Reply #3 on: Jan 1st, 2004, 5:48pm » |
|
Ah, impressive guide.  Thanks for posting this.
|
|
|
|
|
fry
|
Re: P5 vs Eclipse
« Reply #4 on: Jan 4th, 2004, 9:16pm » |
|
this cool.. a few thoughts re: how this fits into things:
it'd be nice to eventually set up a semi-official (is anything official?) p5 + eclipse tutorial so that the advanced users can migrate up to that. the next version of p5 will be able to deal with multiple files/larger projects, but i want to have a clear delineation between the simpler p5 environment and when people are ready to move up to a more advanced ide: we don't want p5 to be the ultimate ide.. just something for making sketch-type work of 1-4 files or so.
in the past, i had hoped that the dividing line would be between single file projects done in the p5 environment, and once you need to move past that, you learn an ide. but experience has shown (feedback we've received from people teaching with and using p5) that an ide is still too much of a jump, so we need to support multiple files (and perhaps a few other ide-like things) from within p5. the holdup on rev 68 is the amount of reworking and head-scratching that goes into making a decision into how to
prepare such a setup, without just turning the environment into something as complicated as flash or codewarrior or eclipse.
|
|
|
|
|
arielm
|
Re: P5 vs Eclipse
« Reply #5 on: Jan 4th, 2004, 11:22pm » |
|
to my opinion, the p5 environment should stay very minimalistic (i.e. accessible to a majority), almost as it is now, with only a few enhancements:
1) better file management (ability to create / delete sketch folders, to save anywhere, etc.)
2) better java error handling (for now, it's very hard for beginners to understand what's going on when their code is not compiling.)
3) killer feature: real-time compilation-while-typing-with-textual-hints (a la eclipse), which is really an incredible mean for beginners to understand what's going on, and to make progress.
note: point 3 can help to make point 2 irrelevant (with real-time compilation, the "focus-point" of receiving eventual errors is not occuring anymore when pressing the "run" button).
(a bit out of topic but still relevant) i think there's an obvious lack of tutorials for real-beginners (i.e. the reference is too "advanced"), but hey, that's up to us (the "educators")!
|
Ariel Malka | www.chronotext.org
|
|
|
jmbara
|
Re: P5 vs Eclipse -- on a Mac[2]
« Reply #6 on: Jan 5th, 2004, 8:27am » |
|
after i wrote the previous note i saw the thread "Processing in Eclipse" (nov 10). i followed ben fry's suggestions (pack classes in P5's export folder into a jar file and import the jar file into the project as a library). i do get BApplet to be recognized by the project. however the compiler complains that it does not see BConstants (i assume BConstants is referenced by BApplet). i used "export.jar" as the name for jar file and eclipse automatically imports the class files into a package called "export". perhaps the name is the problem?
appreciate any pointers.
thanks
jm
|
|
|
|
|
fry
|
Re: P5 vs Eclipse
« Reply #7 on: Jan 5th, 2004, 5:51pm » |
|
re: arielm's post..
#1 is coming in the next release, this is the holdup i ramblingly (is that a word?) described.
#2 and #3 would be super cool, but i'm guessing they'd be post-1.0, unless someone were to jump in and do the work.
and for the tutorials, you're exactly right. we're slowly getting more contributions for the easy stuff as people volunteer them, but the process is slow.
|
|
|
|
|
TomC
|
Re: P5 vs Eclipse
« Reply #8 on: Jan 5th, 2004, 6:17pm » |
|
For arielm's #2/#3, a good step forward would be like the way VRMLpad (don't laugh) handles it. I've not used many IDEs so I'm not sure how standard it is.
There are indicator icons for syntactic and semantic errors, and an extra one for non-matching braces. The latter would be the easiest one to add to Processing, I'd guess.
Incidentally, VRMLpad also has great (visual studio-style) tooltips for function arguments, and keyword completion. When using keyword completion for functions, it adds a comment inside the function with sample arguments. Is anyone working on this kind of thing? I'd be happy to take a look at it, though I can't pronise anything.
(Oh, and well done on getting Eclipse to work toxi!)
|
| « Last Edit: Jan 5th, 2004, 6:18pm by TomC » |
|
|
|
|
pyson
|
Re: P5 vs Eclipse
« Reply #9 on: Jan 5th, 2004, 11:16pm » |
|
I had various problems making eclipse work on my Mac os x 10.2.8. but I find a way to overcome these. Here are the steps that I went through...
1) The lib folder doesn't have the required jar libraries (pde.jar, comm.jar).
2) So I created a jar using the classes included in the export folder. This allowed me to get p55 working inside eclipse.
3) Yet is seems that these classes don't have support for Video which is what I've starting working on so I couldn't get any of my video code working.
4) Yet i found out that the contextual menu on the p55 application has an item called "Show Package Contents". This will open a folder called "contents" and in one of its subfolders are the full jars (pde.jar, comm.jar, RXTXcomm.jar). Apparently that's how Mac is packaging an app. Note: the BApplet.class included in the export folder is smaller than the class included in the pde.jar.
5) I unzipped the pde.jar and created a new jar using only the B...class files.
6) Now nothing was working 
7) I had to include RXTXcomm.jar which was not mentioned on toxi's tutorial and voila everything was working.
There is great benefit for me to use eclipse as my IDE as p55 crashes constantly when using video. It seems that there is a memory leakage (at least that is what the console reveals).
BTW I want to thank you all for developing a wonderful tool and a wonderful community
petros
|
|
|
|
|
fry
|
Re: P5 vs Eclipse
« Reply #10 on: Jan 5th, 2004, 11:20pm » |
|
re: getting pde.jar from the mac version, you can right-click on Processing.app and use "Show Package Contents" to see the innards. pde.jar will be in there a few levels deep.
as mentioned elsewhere, the difference between that pde.jar and the .class files in 'export' is that the former contains 1.3 code (cursor setting and others) as well as the connections to video and serial. the files in export are 1.1 only, and have no video or serial code connected to them.
|
|
|
|
|
mKoser
|
Re: P5 vs Eclipse
« Reply #11 on: Jan 8th, 2004, 5:42pm » |
|
argh... i really wanted to figure this one out and not have to ask here, but i just can't get my head around it!
i've followed toxi's setup instructions to the point and I am using the latest build.xml file, but when i try to export via the 'P5_export' ant setup, I get this error:
Code:
Buildfile: C:\eclipse\workspace\HelloP5\build.xml
init:
[delete] Deleting directory C:\eclipse\workspace\HelloP5\build
[mkdir] Created dir: C:\eclipse\workspace\HelloP5\build
compile:
[javac] Compiling 2 source files to C:\eclipse\workspace\HelloP5\build
[javac] BUILD FAILED: file:C:/eclipse/workspace/HelloP5/build.xml:38: Error running javac.exe compiler
Total time: 280 milliseconds
|
|
I've got java installed at "C:\j2sdk1.4.2" I am wondering if the "."'s in the address are bugging Eclipse?
Help is much appriciated!
+ mikkel
|
mikkel crone koser | www.beyondthree.com | http://processing.beyondthree.com
|
|
|
fry
|
Re: P5 vs Eclipse
« Reply #12 on: Jan 8th, 2004, 6:12pm » |
|
on Jan 8th, 2004, 5:42pm, mKoser wrote:| argh... i really wanted to figure this one out and not have to ask here, but i just can't get my head around it! |
|
that's the processing environment calling you. "come back! come back! it's safe here."
|
|
|
|
|
michael05
|
Re: P5 vs Eclipse
« Reply #14 on: Jan 23rd, 2004, 10:41am » |
|
i have a problem using functions like rect, point and loadFont in external classes. BImage imageprocesssing without drawing (with return to main class) works fine. but as soon as i load a font it throws a nullpointer exception. drawing a rect freezes the applet.
i think the reason could be that the two BApplets do not draw on the same frame or something like this.
any hints?
thanks
michael05
here is the code:
the external class Visualization.java
public class Visualizations extends BApplet
{
public BFont univers57;
public void Initialize()
{
univers57 = loadFont("Univers57.vlw.gz");
}
BImage imgAufteilung(BImage img, int [] statValues, int [] statColors, String [] statDefs)
{
// verhältnis prozent / pixel errechnen
BImage statOverlay = new BImage(img.width, img.height);
statOverlay.format = RGBA;
int statCnt = 0;
int lastHeight = 0;
...
and the call from the main class in setup():
Visualizationsv = new Visualizations();
v.Initialize();
the function imgAufteilung() is called fromm loop(). here the loadFont function works fine. drwaing a rect freezes the applet.
|
°°°°°°°°°°°°°°°°°°°°
http://www.m05.de
|
|
|
|
