Trying to generate Processing (the P5.js version)

API
1

P5.js is the language Processing in pure Javascript: 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:

image
image809×693 55.7 KB

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.

2 Likes
3

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 /

1 Like
4

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 /

"
5

Let’s try the old-fashioned way (with an image):

Screen Shot 2021-08-21 at 1.54.34 PM
Screen Shot 2021-08-21 at 1.54.34 PM616×722 39.4 KB

6

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.

1 Like
7

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

/* 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

Resulting code generated by Codex

/* 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;
  }
}
1 Like
10

Yes, makes sense. So far, extending the prompt as was done seems to be solving the problem. I’ll do more to test this.

2 Likes