How to save graphic from p5js to assets

1

Trying to build a twitter bot using Glitch and p5js. Bot will create a cellular automata graphic then post it on twitter.

Currently, i have the code for creating the graphic working - https://nonstop-turnover.glitch.me/ - was wondering how to save the graphic into my assets folder so i can tweet it out.

Suggestions?

Thanks!

2

Very nice pictures! I like the style. So here’s the deal:

  • The assets folder is just an interface with an API that uploads media to the Glitch CDN.
  • Your application has a working file system that you can use to save these images.
  • Your current application is generating these images in the front end (using p5.js), which means that you are not going to be able to save them to the server or integrate a regular Twitter bot there.

That being said, I recommend you to do the following:

  • Check out this very simple bot for Twitter (tweets text): https://glitch.com/edit/#!/twitterbot, this bot is using a server and a NPM package to connect and tweet simple text.
  • Check out this Twitter bot too, which tweets a random image from the assets folder. This case is different because the intention of this bot is to tweet random images from this folder, not dynamically generated images like you want, but check out how they are tweeting images: https://glitch.com/edit/#!/random-image-twitterbot. You can consider to use this project if you’re not very experienced in the back end, since the other option requires to have more knowledge about this. Simply save a bunch of results from your p5js script and upload them to the asset folder.
  • The other option is to integrate a headless browser like phantomjs or a library that allows you to render your file and convert the result into an cropped image. Then save that to the file system and tweet it. If you want more information about this option, I would love to assist you.

Hope this helps you out!

3

There is also https://glitch.com/~random-image-generator-twitterbot which is similar to what you’re trying to do, but uses github.com/Automattic/node-canvas.

I’d also recommend checking out this video tutorial series that uses Processing:

1 Like
4

thanks for the information. i have some experience using node as a backend, so i’d rather go the automation route and have the app generate the images and send them out rather than creating them on my computer and uploading them to Glitch so the bot can pick and tweet them at random. i’ve done things like that before.

kinduff - i’ve heard a bit about phantomjs, but wasn’t sure i could use that on Glitch. i’d like to hear more about that.

stefan - thanks for telling me about the random-image-generator-bot & the node-canvas module, that is totes similar to my intentions. I’m a big fan of Daniel Shiffman and built my 1st twitter bot based on this tutorial series.

i have a busy few days, but will get back to this soon and will let you know how it goes and hit you up with questions if i have more!

thanks.

1 Like
5

Stefan,

Finally got some time to get back to this. I am completely unfamiliar with headless browsers, so YAY! a challenge.

I did some research into phantomjs and it seems like the way to go is to run it inside a child process and go from there. I found an npm module that is a wrapper for phantomjs - https://www.npmjs.com/package/phantomjs-prebuilt so i installed the pkg and tried to get a simple example running. I’ve been referencing this blog post https://ourcodeworld.com/articles/read/379/how-to-use-phantomjs-with-node-js as well.

not having much luck. two errors:
1)
Error: Cannot find module ‘path’

phantomjs://platform/bootstrap.js:299 in require
phantomjs://platform/bootstrap.js:263 in require
phantomjs://platform/phantomjs.js:100:
–> not sure what this is about.

2 )

404 Not Found

Not Found

The requested URL /post.php was not found on this server.

Apache/2.4.18 (Ubuntu) Server at posttestserver.com Port 80 --> i think that the url in the example is no longer working.

here’s the app link - https://morning-angle.glitch.me - if you have any suggestion or tips. or if you can point me out of this rabbit hole. no hurries, i’m not on a timeline or schedule or anything.

thanks,
Tim

6

About the first error, try also requiring the path module.

var path = require('path')

Abou the second error, well, this page http://posttestserver.com/post.php is returning exactly that, so it’s not available. Try another URL.

7

well, i didn’t need to require path. i had the childprocess setup improperly so phantomjs was getting confused.

then i discovered another npm module that is a wrapper around phantomjs-prebuilt that uses await/async. got that running, so now i can keep hacking at it.

weird.

8

Hey thanks for the encouragement today.

i futzed with phantomjs for a long time and wasn’t able to solve a big issue. no matter what i did when trying to select the canvas element, it always came back null. which is an issue as phantomjs does not use commonjs like nodejs does.

i found work arounds but couldn’t get them to work.

so instead i started playing with puppeteer - which takes a screenshot of the element - and i’m getto\ing a buffer back after the headless loading of the page.

BUT I can’t fs.WriteFile it to the Glitch directory. you said you might be able to give me some tips on that?

Thanks!

9

Hello, for sure, no problem :slight_smile: phantomjs can cause headaches, but I’m glad you were able to use puppeteer to solve this problem.

I was able to run the following script without any issues from a Glitch instance, maybe it can give you some guidance.

var fs = require('fs');
fs.writeFile("/tmp/test", "Hey there!", function(err) {
  if(err) {
    return console.log(err);
  }
  console.log("The file was saved!");
});

Then I jumped into the console and I was able to see the file in the /tmp directory. What are you trying? Maybe I can help you out with your current setup.

10

I’m a dork. I forgot I was working with client-side code in the headless browser and it was actually saving the files once I looked in the console.

anyway, here is the twitterBot if you are interested: https://twitter.com/cellAutobota

Thanks again for all your help!!!

1 Like
11

That’s awesome! Love it! Would love to see the final code tho haha, only if you’re down. I’m glad you got it running!

12

hmmm. isn’t my code viewable by everyone on Glitch?

13

Yes, but we don’t know the project name yet :slight_smile: Also, if you made it private, only you and people you send the join link to can see it.

14

cool. let me clean up the code, it is pretty hacky, and i’ll post the name here.

15

ok. it is still hacky.

this points to my project:

but i just added another option that triples the type of images that the bot will draw so i figure i can share.

TODO list:
mishmash of ES5 & ES6 styles
need to add proper try-catch code to server.js
need to break create-img.js into separate functions and maybe files

maybe TODO list:
add code to reply to twitter follows &/or likes
add code to pin images on pinterest simultaneously

any suggestions, feel free to let me know what ya think.

1 Like