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

**URL:** <https://discourse.processing.org/t/launching-ai-appbuilder-create-and-edit-p5js-apps-with-chatgpt/42760>\
**Category:** Teaching\
**Created:** [September 14, 2023, 3:03am UTC](https://discourse.processing.org/t/launching-ai-appbuilder-create-and-edit-p5js-apps-with-chatgpt/42760 "2023-09-14T03:03:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![StriveMath](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/strivemath/32/11141_2.png) [@StriveMath](https://discourse.processing.org/u/StriveMath)\
**Post date:** [September 14, 2023, 3:03am UTC](https://discourse.processing.org/t/launching-ai-appbuilder-create-and-edit-p5js-apps-with-chatgpt/42760/1 "2023-09-14T03:03:10Z")

</div>

[Strive Editor](https://code.strivemath.com/chat) lets you create, run and edit p5js projects with a ChatGPT-like interface.

![1_new](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/1/718420350ddc5a44c572c37768a9b8f30632bc36.gif)

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/9/598c214ecd1ea8507ef2350b70c0a14ee9707e73.gif)

**“When I click change the cubes to spheres”**  
 ![3_new](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/6/468051e44ea997b095f03dd10c77ea4ddac4e600.gif)

**Oh, and it works on mobile as well.**

 ![mobile_screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/3/d3726034191b268ed15e546b673b9d845a066cf4.jpeg)

You can continue my chat by following this link: [Strive Editor](https://code.strivemath.com/chat?id=590afb57-637f-4d59-9e82-03134f352858)

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.

- Sorting algorithm visualiser: [https://code.strivemath.com/view/fd3bdb94-3f7f-4a2f-bb1a-c939aa8f7366](https://code.strivemath.com/view/fd3bdb94-3f7f-4a2f-bb1a-c939aa8f7366)
- Apple Run Platformer Game: [Strive Editor](https://code.strivemath.com/chat?id=aebd38b5-231d-4b6a-9105-fe46d3d930ab)

You can see all the submissions and students’ video presentations here: [Airtable - AI Challenge Gallery](https://airtable.com/app88r7eK0H6WKfiu/shr4OEff126s1CiPD)

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](mailto:hello@strivemath.com) or fill out this feedback form: [https://forms.gle/E4PJbLy35ibsVTvk6](https://forms.gle/E4PJbLy35ibsVTvk6)

---

<div class="post-metadata">

**Author:** ![StriveMath](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/strivemath/32/11141_2.png) [@StriveMath](https://discourse.processing.org/u/StriveMath)\
**Post date:** [September 14, 2023, 3:16am UTC](https://discourse.processing.org/t/launching-ai-appbuilder-create-and-edit-p5js-apps-with-chatgpt/42760/2 "2023-09-14T03:16:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 14, 2023, 5:23am UTC](https://discourse.processing.org/t/launching-ai-appbuilder-create-and-edit-p5js-apps-with-chatgpt/42760/3 "2023-09-14T05:23:11Z")

</div>

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:

> **[Strive Editor](https://code.strivemath.com/chat?id=af15228b-e002-4b83-84ee-02d3478af6d6)**
>
> A free online P5-Python code editor with live edit built in.

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![StriveMath](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/strivemath/32/11141_2.png) [@StriveMath](https://discourse.processing.org/u/StriveMath)\
**Post date:** [September 14, 2023, 5:48am UTC](https://discourse.processing.org/t/launching-ai-appbuilder-create-and-edit-p5js-apps-with-chatgpt/42760/4 "2023-09-14T05:48:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 14, 2023, 6:38am UTC](https://discourse.processing.org/t/launching-ai-appbuilder-create-and-edit-p5js-apps-with-chatgpt/42760/5 "2023-09-14T06:38:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Ibrahim\_17](https://avatars.discourse-cdn.com/v4/letter/i/ea666f/32.png) [@Ibrahim\_17](https://discourse.processing.org/u/Ibrahim_17)\
**Post date:** [September 14, 2023, 9:22am UTC](https://discourse.processing.org/t/launching-ai-appbuilder-create-and-edit-p5js-apps-with-chatgpt/42760/6 "2023-09-14T09:22:36Z")

</div>

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