I've been playing around with ChatGPT to see what it can do. In this experiment I asked it to draw me a smiley face using the p5.js library - a creative coding javascript library I've used in many of my creative code experiments.

Draw a smiley face

Me: draw a smiley face with p5.js

ChatGPT: Sure! Here's an example code for drawing a smiley face with p5.js:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // draw the head
  fill(255, 255, 0);
  stroke(0);
  ellipse(200, 200, 200);
  
  // draw the eyes
  fill(0);
  noStroke();
  ellipse(150, 150, 30);
  ellipse(250, 150, 30);
  
  // draw the pupils
  fill(255);
  ellipse(145, 145, 10);
  ellipse(245, 145, 10);
  
  // draw the mouth
  stroke(0);
  strokeWeight(3);
  arc(200, 250, 80, 60, 0, PI);
}

This code creates a canvas with a size of 400x400 pixels and then draws a yellow circle at the center of the canvas to represent the head of the smiley face. Then, it draws two black circles for the eyes, with smaller white circles for the pupils. Finally, it draws a smiley mouth using the arc function.

Results:

When we copy this code in to OpenProcessing's P5js editor we get a smiley face - not the prettiest smiley face but still a smiley face.

See sketch on OpenProcessing

ChatGPT draws a smiley face

Draw a smiley face (with horns!)

Next I wanted to see if it could modify existing code with new context.

Me: Now give it horns

ChatGPT: Sure! Here's an updated version of the code with horns added to the smiley face:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // draw the head
  fill(255, 255, 0);
  stroke(0);
  ellipse(200, 200, 200);
  
  // draw the eyes
  fill(0);
  noStroke();
  ellipse(150, 150, 30);
  ellipse(250, 150, 30);
  
  // draw the pupils
  fill(255);
  ellipse(145, 145, 10);
  ellipse(245, 145, 10);
  
  // draw the mouth
  stroke(0);
  strokeWeight(3);
  arc(200, 250, 80, 60, 0, PI);
  
  // draw the horns
  fill(255, 0, 0);
  noStroke();
  triangle(130, 100, 160, 50, 190, 100);
  triangle(210, 100, 240, 50, 270, 100);
}

This code is similar to the previous example, but it adds two triangles to represent the horns. The fill function is used to set the color of the horns to red, and the noStroke function is used to remove the outline. The triangle function is used to draw the shape of the horns by specifying the x and y coordinates of the three points.

Results: When we run this in the online p5.js web editor, we get a smiley face with kind of horns? A bow? It's like right but not right.

ChatGPT draws a smiley face with horns in p5.js

Conclusion

It's pretty impressive that ChatGPT can make edits to code in context that is still runnable. This is obviously a pretty simple piece of code but the idea that we can make an abstract representation of something (horns) in a specific language (javascript in p5js which requires triangles) and modify an existing piece of code is pretty cool.