New user, I want to get some insight creating text blocks

edited September 2015 in JavaScript Mode

Hi !

It is my first post here, I have been using Unity3D a lot. But, I have a project that must run as a html5 canvas. Im thinking about learning processing and processingjs to do this:

I would like to create a tool that lets the user type in a sentence in a text input field (must support french characters like éàô). The text could also be pasted into that text input field.

Then the sentence entered will have to be converted to a long text block that we can cut between words. I basically want to slice the sentence between words. Just like in fruit ninga game. And be able to add other sentences and slice them. Then I could connect two sliced blocks from different sentences to make new sentences. I would like to have a blue rectangle arround every text block.

Example: My dad loves to run outside. This cat always sleep in the morning.

We could could then cut those sentences and create things like: [My dad ] [always sleep in the morning.] [This cat] [loves to run outside.]

Is processing/processingjs a good set of tools to do that type of work ?

Thank you very much!


  • edited September 2015

    Choose a symbol of your own as a delimiter and use the command split() to create unit in a string Array.

  • Thank you for your answer. Split() will definetly be very useful. I just read about it and its fantastic. But do you think this whole project can be done? I mean: -Input from paste with èà characters -Slice between words like in fruit ninja -Display rectangles around text -Connect blocks by moving them near one and other -Export the whole project as html5 and windows .exe

    Thank you

  • @jbeausej
    Every part of your list will be a challenge. But the first step in programming is the ability to breakdown the task to smaller one, well, small enough that you can grasp every aspect step by step and clearly understand what you are doing. But be aware that when you see a nice idea on professional level (fruit ninja), there is a whole team behind.

  • edited September 2015

    For web deployment w/ Processing there are 2 framework paths: pjs & p5js:


    If we're comfortable w/ JS language, p5js is a no brainer.
    Otherwise, developing under Java Mode is much easier to debug.
    And once we've got the basics working, we can easily deploy under JS Mode w/ few modifications.

  • So if I understand well, processing can be a good tool to do the work. Right ?

    @morpholux : I am familiar with Csharp and js scripting. I have done many projects in Unity 3D with thousands of lines of code. I am still evaluating tools to create the next html5 project so thats why I am asking this. I am also considering Cocos2d, but for now processing seems to be the most interesting environnement.

    @GoToLoop : Is there any comparative between p5js and processingJS ? I see that p5js is bêta so for me going with processingjs seems to be the best option for now since I want this project to be used by many clients.

  • edited September 2015 Answer ✓
  • @GoToLoop Thank you very much for all your help! Very nice info ! What is Java mode and js mode ? Is it processing vs processingjs ?

    I still have another concern about resolution. I want the canvas to take all the availiable screen space in the browser and be fullscreen when run as a .exe under Windows. But, I see that the processsing units are pixels in processing (Im used to units then converted to pixels in Unity) How does processingjs deal with multiresolution so it can be cross platform ?

  • edited September 2015

    Java Mode is PDE's default mode. We can install some few more modes by clicking at top-right button and choosing "Add Mode...".

    For fullscreen, we can get desktop screen's dimensions via displayWidth & displayHeight:

    And @Override sketchFullScreen() in order to return true:

    void setup() {
      size(displayWidth, displayHeight, JAVA2D);
    @ Override boolean sketchFullScreen() {
      return true;

    But don't use Processing 3 for the code above! It won't work b/c sketchFullScreen() is final! L-)
    Besides still being beta, it has introduced some new syntaxes & obstacles which ends up distancing itself even more from JS Mode & Processing 2! :-& Get version 2.2.1 or at most 3.0a5:

  • @GoToLoop Thank you again ! And do you know if processingjs can handle multiresolution ?

  • @GoToLoop If runned in the browser does processingjs screen.width works and would be the actual width of the page in pixels ? If this works I think I have chosen the environnement I will use and start learning/developping now ! :)

  • edited September 2015
  • @ GoToLoop So is there any way I can get to know the browser window page size that host the canvas if those refer only to the screen size?

  • edited September 2015
    • If you need to get more control over the web page, p5js is more indicated for that since it's JS syntax.
    • Even though pjs can do the same, you're gonna mix Java & JS syntaxes.
    • Doing so breaks Java/JS cross-mode compatibility of course.
    • My advice is that you 1st learn what is Processing:
    • Only then decide your strategy for web deployment.
  • @GoToLoop Thank you very much for all your answers.

  • My advice is that you 1st learn what is Processing


    It's worth making clear that using p5js you won't have the option to directly export to an .exe file: in principle it's web only. But ProcessingJS might require a library to take user input in Java mode; which will mean maintaining two versions anyway. I'd personally concentrate on the web output first...

    It's also probably only a matter of time before it's possible to directly convert html+JS to a Windows exe. In fact the convergence between mobile and desktop OS would suggest it's inevitable (see phonegap).

  • Thank you for your comments, are there any projects made with processing that you guys know of that are actually licenced to consumers with serial registration or online membership fee ? Im just curious...

Sign In or Register to comment.