Can i import my stuff into wallpaper engine?

Processing Coding Questions
1

**Welcome :slight_smile: **

My name is Luc(16) and last week I installed processing. the past week I have been making quite some stuff with processing already. I showed what I made to a couple of friends and asked me if I would be so kind to get the application running in wallpaper engine. processing is able to make .exe files as most of you may already know. however, when I try to open up the .exe file in wallpaper engine it just opens the application instead of setting it as background. Does anyone know some more about this?

In case this is not possible I would like to learn p5.js. wallpaper engine is able to load stuff from the internet and I have my own host for this. I just don’t know if what I made in processing will work in p5. Just in case here is my code(not that great XD) and a gif of what the application actually is.

//rain (main tab)
Population test;

void setup()
{
    size(1280,720);
    background(0);
    test = new Population(500);
}

void draw()
{
  background(0);
  test.show();
  test.move();
}

//Dot (class)
class Dot
{
  float x = random(width);
  float y = random(height);
  float speedX = 4;
  float speedY = 4;
  float mass;
  boolean calcmass = true;
  float sidespeed;
  float vertispeed;
  int partTimer;
  float dropx;
  float myHeight;
  
  void show(float size)
  {
    if (calcmass)
    {
     mass = size;
     calcmass = false;
    }
    fill(random(255),random(255),255);
    noStroke();
    rect(x,y,2*mass,10*mass);
  }
  
  void move()
  {
    if (y > height)
    {
     dropx = x;
     partTimer = 10;
     y = -10;
     x = random(width);
    }
    else if (y < -15)
    {
     y = height; 
    }
    if (x > width+5)
    {
     x = -2; 
    }
    else if (x <-5)
    {
     x = width; 
    }
 
    sidespeed = mouseX - width/2;
    x += sidespeed/120*mass;
    
    vertispeed = mouseY - height/2;
    y += vertispeed/60*mass;
    
    if (partTimer > 0)
    {
     partTimer --;
     for (int i = 0; i < random(5,10); i ++)
     {
     fill(random(255),255,random(255));
     myHeight = random(10);
     rect(dropx+random(-5,5),height-myHeight,random(2)/mass,myHeight);
     }
    }
    print(partTimer);
  }
}

//population (class)
class Population
{
  Dot[] dots;
  
  Population(int size)
  {
    dots = new Dot[size];
    for(int i = 0; i < size; i ++)
    {
      dots[i] = new Dot();
    }
  }
  
  void show()
  {
    for (int i = 0; i < dots.length; i++)
    {
      dots[i].show(random(2)); 
    }
    dots[0].show(random(2));
  }
  
  void move()
  {
    for (int i = 0; i < dots.length; i++)
    {
      dots[i].move(); 
    }
    dots[0].move();
  }
}

Neon%20Shooter
Neon Shooter.gif1278Ă—717 2.1 MB

1 Like
2

It may work for Processing.js (Pjs): http://ProcessingJS.org/reference/

For p5.js, you’re gonna need to convert the Java syntax to JS (or some other language which transpiles to JS like TypeScript or CoffeeScript).

But you’re lucky, your sketch is transpilable to Pjs! :star_struck:

  • Simply copy and paste your whole code to My Sketch - OpenProcessing
  • Comment out this print(partTimer); statement from within your Dot::move() method.
  • Switch its mode from P5js to Processing.js.
  • Click at its Play icon.
3

thanks! apreciate the help :smiley:

4

There is just one bit left now. Will i be able to get this to run on my own server?

5

This is the most basic “index.html” template for running “.pde” sketches under Pjs:

<script defer src=http://CDN.JSDelivr.net/processing.js/latest></script>
<canvas data-processing-sources=sketch.pde></canvas>

Just replace the “sketch.pde” w/ the actual name of your “.pde” file.
Here’s an online example: :angel:
https://GoSubRoutine.GitHub.io/Grumbo/Grumbo_Adventure_OOP/Grumbo_Adventure/

And its corresponding “index.html” file:

For multiple “.pde” files for the same sketch, just place them all after data-processing-sources=", separating each 1 w/ a space: :sunglasses:

And its corresponding multiple “.pde” sketch:
https://GoSubRoutine.GitHub.io/Grumbo/Grumbo_Adventure_OOP/

1 Like
6

thanks a bunch :smiley: apreciate it!

7

Exporting / converting Processing(Java) into an HTML+JavaScript form is one way to get it to work with Wallpaper Engine, which displays HTML+Javascript

You get HTML+JS from Processing sketches by converting to Processing.js (older, semi-automatic conversion of Java syntax) or by rewriting in p5.js (newer, requires more syntax revision). You can install these modes through the Processing PDE editor app.

The other way is to use your Processing sketch to output a looped movie, then loading the movie file into Wallpaper Engine, e.g. with the built-in Movie Maker tool or by using SaveFrame and then compiling the saved frame series into a movie file using a third-party tool such as ffmpeg, Quicktime, or VLC et cetera. A disadvantage of this approach is that the resulting movie file may be more static, BUT one advantage of this approach is that you can use any native Java libraries to make it, regardless of how difficult a sketch would be to convert to JavaScript.

2 Likes
8

We can also pre-transpile a sketch’s “.pde” files as 1 “.js” file by pasting them all below: :smirk_cat:
http://ProcessingJS.org/tools/processing-helper.html

For example, if you paste this sample sketch there:

void setup() {
  size(200, 200);
  background(100);
  stroke(255);
  ellipse(50, 50, 25, 25);
  println("hello web!");
}

It’s gonna output the following JS code after we click at “Convert to JS” button:

// this code was autogenerated from PJS
(function($p) {

    function setup() {
        $p.size(200, 200);
        $p.background(100);
        $p.stroke(255);
        $p.ellipse(50, 50, 25, 25);
        $p.println("hello web!");
    }
    $p.setup = setup;
    setup = setup.bind($p);
})

However, we need to slightly modify its 1st output statement line:
Instead of (function($p) {, replace it w/ new Processing(pjs, $p => {:

// this code was autogenerated from PJS
// (function($p) {
new Processing(pjs, $p => {

    function setup() {
        $p.size(200, 200);
        $p.background(100);
        $p.stroke(255);
        $p.ellipse(50, 50, 25, 25);
        $p.println("hello web!");
    }
    $p.setup = setup;
    setup = setup.bind($p);
})

Save it as “sketch.js” or some other name you choose.
But keep it in mind to change the “index.html” accordingly if you pick another name!

Notice its 1st passed argument is called pjs.
That’s gonna be our <canvas>'s id attribute name for our new “index.html” file:

<script defer src=http://CDN.JSDelivr.net/processing.js/latest></script>
<script defer src=sketch.js></script>
<canvas id=pjs></canvas>

For more details, go to: http://ProcessingJS.org/articles/jsQuickStart.html

1 Like