Building a translator for Processing for my Masters dissertation

Processing
1

Hello everyone, this is the first time i post here and i would like to ask for help.

My objective is to make the task of learning Processing more interactive and easier. To do that, I am developing an educational program simulation tool. My question is how could i do this integration of my code with the Processing IDE.
I’m doing a translator for Processing as the title suggests. And my goal is to integrate it in the Processing IDE with a few extras. One extra would make it possible to stop, pause and run my code step by step while the graphics appear and disappear in relation to the current line of code. To give you a visual idea of what it may look like please check this website: https://visualgo.net/en. Other extra is to make the graphics interactive and non-static so we can see them being draw like, for example, turtle framework from python.

Any tips are appreciated.

Here’s my code so far: GitHub.

Thank you all.
Duarte “IReback” Carvalho

2

maybe you want to make a Tool, it can be integrated in the IDE

see Tool Overview · processing/processing Wiki · GitHub

see Tools \ Processing.org

1 Like
3

What do you mean by translator?

One idea that comes to mind is implementing a Processing IDE Tool or extension to the Debugger that spawns a “debug” PApplet which renders one drawing instruction at a time based on the debugger step

(from Processing: disable double buffering in debug mode - Stack Overflow)

1 Like
4

I’m not sure if a tool would fulfil the objetives expected.

1 Like
5

That Stack Overflow’s question is exactly one of the extras that I’m looking for. I’ll will study this option tomorrow, thank you.

6

hmm I’m not sure if this stackoverflow actually gives any information as it’s just an idea.

One thing comes to my mind is Tweak Mode:
http://galsasson.com/tweakmode/

I don’t know if this still works with the current IDE, but it’s a great way to interactively edit a sketch.

1 Like
7

I guess it still work on this IDE but again, not sure if it’s what i’m looking for. Tweak mode it is indeed interactive but in this mode i can’t just pause ou go step by step like the Visualgo i referenced earlier.

8

maybe using reflections in a custom class might work. I created a sketch where you are able to call functions within said custom class with a string, including all parameters.

void workflow(String[] a){
    if(update&&a!=null){
      String[] s = a;
      
      for(int i=0;i<s.length;i++){
        String s1 = s[i];
        if(s[i].length()>0){
        int [] pIndex = strIndex1(s1,"(",")");
        String function = s1.substring(0,pIndex[0]);
        
        String[]parameters = splitTokens(s[i].substring(pIndex[0]+1,pIndex[1]),",");
        print("p",function +"(");
        String s2 = "";
        Class<?>[] parameterClasses = new Class<?>[parameters.length];
        Object[] parsedParameters = new Object[parameters.length];
        for(int j=0;j<parameters.length;j++){
          //print(parameters[j]);
          
          parameterClasses[j] = getParameterClass(parameters[j]);
          parsedParameters[j] = parseParameter(parameters[j]);
          // s2+=parameterClasses[j]+" "+parameters[j];
          s2 += parameters[j];
          if(j<parameters.length-1)s2+=",";
        }
        println(s2+")");
        
        update = true;
        try {
            Method method = this.getClass().getMethod(function, parameterClasses);
            method.invoke(this, parsedParameters);
          } catch (NoSuchMethodException e){println("nsm",function,"...Check Params?");}
            catch(IllegalAccessException e){println("ia") ;}
            catch( InvocationTargetException e){println("it","This function is missing an image...");}
    }}
    update = false;
  }else if(a==null)update = false;
  
  if(keyPressed&&key =='r')update = true;
      
  };

Class<?> getParameterClass(String parameter) {
      try {
          Integer.parseInt(parameter);
          return int.class;
      } catch(NumberFormatException e) {
          try {
              Float.parseFloat(parameter);
              return float.class;
          } catch(NumberFormatException e1) {
              
              if(parameter!=null)return PImage.class;
              else return null;
          }
      }
  };

this is very basic but it allows you to call each function with a string such as this.

String []wf = {"sobelSP(20.0,150.0,blur(5))"};

here functions are separated by strings like in normal code. This code wouldn’t do everything but perhaps it could be combined with something else to get the desired effect. Ie visualizing code written in a sketch captured by a text input field. You could bind the input window to one PApplet and have the output on another PApplet I suppose this could only be used for basic things but I could be wrong, as my coding knowledge is still extremely limited, but you would then need to implement something else to account for logical statements conditions, for loops etc.