Launching AI-AppBuilder | Create and Edit P5JS Apps With ChatGPT

Teaching
1

Strive Editor lets you create, run and edit p5js projects with a ChatGPT-like interface.

1_new

The chat keeps the context of the previous messages and the code generated so you can iteratively improve the project.

Here, I ask “Change the colour of the cubes with the position of my mouse.”
2_new

“When I click change the cubes to spheres”
3_new

Oh, and it works on mobile as well.

mobile_screenshot
mobile_screenshot828×1792 188 KB

You can continue my chat by following this link: Strive Editor

We created AI-AppBuilder as an educational tool to teach students about prompt engineering and to inspire more students to learn coding by lowering the barrier of entry to creating cool animations/games.

With this tool, any 9-year-old with no coding experience can create pretty sophisticated apps just using natural language.

We recently ran a coding competition with 80+ students worldwide where they were tasked to create a game/animation using nothing but prompting on AI-AppBuilder. The things these students (younger than 16) made are breathtaking.

You can see all the submissions and students’ video presentations here: Airtable - AI Challenge Gallery

We’re looking to work with educators to improve this tool and reach & inspire as many students as possible. If you’re interested in giving feedback or helping, please reach out to us at hello@strivemath.com or fill out this feedback form: https://forms.gle/E4PJbLy35ibsVTvk6

2

Feel free to leave feedback and questions here in the comments as well, looking forward to hearing from the community :raised_hands:

3

I did a quick run by just clicking at an already existing prompt for making a double-pendulum, then improved it a little w/ the 4 remaining prompts:

const R1 = 100, R2 = 100, M1 = 10, M2 = 10, G = 1;
let a1 = 0, a2 = 0;
let a1_v=0, a2_v=0;
let cx, cy;

function setup() {
  createCanvas(365, 365).mousePressed(reset);
  reset();
}

function draw() {
  background(51);
  stroke(255);

  const num1 = -G * (2 * M1 + M2) * sin(a1);
  const num2 = -M2 * G * sin(a1 - 2 * a2);
  const num3 = -2 * sin(a1 - a2) * M2;
  const num4 = a2_v * a2_v * R2 + a1_v * a1_v * R1 * cos(a1 - a2);
  const den = R1 * (2 * M1 + M2 - M2 * cos(2 * a1 - 2 * a2));
  let a1_a = (num1 + num2 + num3 * num4) / den;

  const num1_2 = 2 * sin(a1 - a2);
  const num2_2 = a1_v * a1_v * R1 * (M1 + M2);
  const num3_2 = G * (M1 + M2) * cos(a1);
  const num4_2 = a2_v * a2_v * R2 * M2 * cos(a1 - a2);
  const den2 = R2 * (2 * M1 + M2 - M2 * cos(2 * a1 - 2 * a2));
  let a2_a = (num1_2 * (num2_2 + num3_2 + num4_2)) / den2;

  translate(cx, cy);
  const x1 = R1 * sin(a1);
  const y1 = R1 * cos(a1);

  const x2 = x1 + R2 * sin(a2);
  const y2 = y1 + R2 * cos(a2);
  
  line(0, 0, x1, y1);
  fill(0);
  ellipse(x1, y1, M1, M1);

  line(x1, y1, x2, y2);
  ellipse(x2, y2, M2, M2);

  a1_v += a1_a;
  a2_v += a2_a;

  a1 += a1_v;
  a2 += a2_v;
  
  a1_v *= 0.99;
  a2_v *= 0.99;
}

function reset() {
  a1 = PI / 2;
  a2 = PI / 2;
  a1_v = 0;
  a2_v = 0;
  cx = width / 2;
  cy = 200;
  background(51);
}
4

Awesome stuff :clap: any ideas on things we could do to improve it?

5

I didn’t check for it but I guess libraries aren’t allowed for the sketches?

Another important issue is that I had to spend all my remaining prompts attempting to “refine” the code.

For example, I wanted the AI chat to find all variables which were eligible to be declared using const.

But the bot has failed to recognize variables a1_a & a2_a could use const.

Then I decided to use the “Edit Code” feature and fix that myself.

However, for the PoV of the AI, the current code was still the 1 provided by the bot, w/o my manual fix!

It’d be very nice to allow manual editing of the generated code, so we could save our prompts.

6

Great Tool! One can now let the computer debug its own code and iterate before giving an output with a silly mistake.