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

jbeausej

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!

morpholux

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

jbeausej

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

morpholux

@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.

GoToLoop

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

1. http://ProcessingJS.org/reference/
2. http://p5js.org/reference/

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.

jbeausej

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.

GoToLoop

• Indeed pjs is much more mature; and for now it's got better performance too.
• Plus pjs got WebGL already working; while p5js is just starting to implement its own.
• However pjs, which is the base for JS Mode, is more apt to transpile Java Mode into valid JS code.
• That is, we use Java syntax even when coding in JS Mode! :)
• As you requested, you need some input box which accepts UTF charset & CTRL+V too.
• In Java Mode, you're gonna need JOptionPane class:
  http://Forum.Processing.org/two/discussions/tagged/joptionpane
  http://Docs.Oracle.com/javase/8/docs/api/javax/swing/JOptionPane.html
• But when changing to JS Mode, you're gonna need to replace that w/ JS' prompt():
  https://Developer.Mozilla.org/en-US/docs/Web/API/Window/prompt
• Coding a wrapper class for JOptionPane in order to emulate prompt() method is another way. *-:)

GoToLoop

Is there any comparative between p5js and processingJS?

1. https://GitHub.com/processing/p5.js/wiki/Frequently-Asked-Questions#how-is-this-different-than-processingjs
2. https://GitHub.com/processing/p5.js/wiki/Processing-transition

jbeausej

@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 ?

GoToLoop

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:
http://p5js.org/reference/#/p5/displayWidth
http://p5js.org/reference/#/p5/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:
http://download.processing.org/processing-3.0a5-windows64.zip

jbeausej

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

GoToLoop

http://ProcessingJS.org/reference/screen/

jbeausej

@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 ! :)

GoToLoop

• pjs' screen.width is the same as Processing 2's displayWidth.
• We change canvas' size via size(): http://ProcessingJS.org/reference/size_/
• Once set, width & height keep those size()'s dimensions: http://ProcessingJS.org/reference/width/

jbeausej

@ 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?

GoToLoop

• 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: https://Processing.org/tutorials/
• Only then decide your strategy for web deployment.

jbeausej

@GoToLoop Thank you very much for all your answers.

blindfish

My advice is that you 1st learn what is Processing

+1.

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).

jbeausej

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...