# Trying to generate Processing (the P5.js version)
**URL:** https://community.openai.com/t/trying-to-generate-processing-the-p5-js-version/8103
**Category:** API
**Tags:** codex
**Created:** [August 20, 2021, 9:54pm UTC](https://community.openai.com/t/trying-to-generate-processing-the-p5-js-version/8103 "2021-08-20T21:54:27Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@metaphorz](https://community.openai.com/u/metaphorz)
#### Post date: [August 20, 2021, 9:54pm UTC](https://community.openai.com/t/trying-to-generate-processing-the-p5-js-version/8103/1 "2021-08-20T21:54:27Z")
P5.js is the language Processing in pure Javascript: [https://p5js.org/](https://p5js.org/)
I have been unsuccessful in figuring out the right prompting text to have this generated. This is an example from that web page:
I cannot get anything working as both the Javascript CODEX and the GPT-3 Playground, where one specifies one of 2 Codices, want to generate either 1) pure HTML5/Javscript (not Processing or P5.js) or 2) Python code.
Processing and P5.js are widely used in creative coding for designers and
artists. We use P5.js in teaching basic programming since the original implementation
of Processing was in Java, and P5.js is web-friendly since it is JS.
Let me know if there are any Processing/P5.js users out there.
---
### Author:  [@metaphorz](https://community.openai.com/u/metaphorz)
#### Post date: [August 21, 2021, 6:51pm UTC](https://community.openai.com/t/trying-to-generate-processing-the-p5-js-version/8103/3 "2021-08-21T18:51:18Z")
I appreciate this – it seems a step in the right direction. I entered the following prompting text
but it did not do the trick. Is there something I should use instead of the dots? One of the issues about P5.js is that most people use the editor, which hides the HTML.
_/ Use p5.js and draw 5 circles /_
---
### Author:  [@metaphorz](https://community.openai.com/u/metaphorz)
#### Post date: [August 21, 2021, 6:53pm UTC](https://community.openai.com/t/trying-to-generate-processing-the-p5-js-version/8103/4 "2021-08-21T18:53:56Z")
The HTML is not being copied correctly. This web page is interpreting it. Let me try using double quotes:
"
_/ Use p5.js and draw 5 circles /_
"
---
### Author:  [@metaphorz](https://community.openai.com/u/metaphorz)
#### Post date: [August 21, 2021, 6:55pm UTC](https://community.openai.com/t/trying-to-generate-processing-the-p5-js-version/8103/5 "2021-08-21T18:55:30Z")
Let’s try the old-fashioned way (with an image):
---
### Author:  [@metaphorz](https://community.openai.com/u/metaphorz)
#### Post date: [August 21, 2021, 7:31pm UTC](https://community.openai.com/t/trying-to-generate-processing-the-p5-js-version/8103/6 "2021-08-21T19:31:27Z")
Since yesterday, I have also reflected on Processing’s visibility to Common Crawl, etc. Part of the issue is that the culture of Processing, which is significant, does not unfortunately include using a code repository such as github. The nice thing about Github is that all public code is easily crawled making it accessible for ML training. But how to get to code that is non-centrally stored? I am still hacking away and will report back here.
---
### Author:  [@metaphorz](https://community.openai.com/u/metaphorz)
#### Post date: [August 21, 2021, 8:06pm UTC](https://community.openai.com/t/trying-to-generate-processing-the-p5-js-version/8103/7 "2021-08-21T20:06:05Z")
I’ll use this space for positive results and then will work toward making a movie of those and related results. Adam @ OpenAI suggested a few shot approach, so I now have a more significant prompt and got the Codex to generate something reasonable (my best result so far).
```auto
/* Draw a grey box and 6 white points */
function setup() {
let d = 70;
let p1 = d;
let p2 = p1 + d;
let p3 = p2 + d;
let p4 = p3 + d;
// Sets the screen to be 720 pixels wide and 400 pixels high
createCanvas(720, 400);
background(0);
noSmooth();
translate(140, 0);
// Draw gray box
stroke(153);
line(p3, p3, p2, p3);
line(p2, p3, p2, p2);
line(p2, p2, p3, p2);
line(p3, p2, p3, p3);
// Draw white points
stroke(255);
point(p1, p1);
point(p1, p3);
point(p2, p4);
point(p3, p1);
point(p4, p2);
point(p4, p4);
}
/* end */
"""
/* Draw 3 balls of color blue of different radii, and make them bounce around the screen */
```
[Click on this for output: 3 bouncing balls](https://youtu.be/DToBtRFUSbQ)
Resulting code generated by Codex
```auto
/* Draw 3 balls of color blue of different radii, and make them bounce around the screen */
var ball1 = {
x: 100,
y: 100,
r: 30,
vx: 2,
vy: 1,
ax: 0,
ay: 0,
color: 'blue'
}
var ball2 = {
x: 200,
y: 200,
r: 20,
vx: -1,
vy: -1,
ax: 0,
ay: 0,
color: 'blue'
}
var ball3 = {
x: 300,
y: 300,
r: 10,
vx: 1,
vy: 1,
ax: 0,
ay: 0,
color: 'blue'
}
function setup() {
createCanvas(720, 400);
background(0);
noStroke();
}
function draw() {
background(0);
ball1.x += ball1.vx;
ball1.y += ball1.vy;
ball1.vx += ball1.ax;
ball1.vy += ball1.ay;
ball2.x += ball2.vx;
ball2.y += ball2.vy;
ball2.vx += ball2.ax;
ball2.vy += ball2.ay;
ball3.x += ball3.vx;
ball3.y += ball3.vy;
ball3.vx += ball3.ax;
ball3.vy += ball3.ay;
fill(ball1.color);
ellipse(ball1.x, ball1.y, ball1.r * 2);
fill(ball2.color);
ellipse(ball2.x, ball2.y, ball2.r * 2);
fill(ball3.color);
ellipse(ball3.x, ball3.y, ball3.r * 2);
bounce(ball1);
bounce(ball2);
bounce(ball3);
}
function bounce(ball) {
if (ball.x + ball.r > width || ball.x - ball.r < 0) {
ball.vx = -ball.vx;
ball.ax = 0;
}
if (ball.y + ball.r > height || ball.y - ball.r < 0) {
ball.vy = -ball.vy;
ball.ay = 0;
}
}
```
---
### Author:  [@paul.fishwick](https://community.openai.com/u/paul.fishwick)
#### Post date: [August 22, 2021, 3:35am UTC](https://community.openai.com/t/trying-to-generate-processing-the-p5-js-version/8103/10 "2021-08-22T03:35:42Z")
Yes, makes sense. So far, extending the prompt as was done seems to be solving the problem. I’ll do more to test this.
---
### Author:  [@musingvirtual](https://community.openai.com/u/musingvirtual)
#### Post date: [August 8, 2025, 3:34pm UTC](https://community.openai.com/t/trying-to-generate-processing-the-p5-js-version/8103/11 "2025-08-08T15:34:12Z")
Rolling up here because four years later I’m about to try the same thing and this is surprisingly the only thread on the internet. Did you ever figure it out? I haven’t used processing since school but was recently inspired by another computer artist