Teaching p5.js with observable, a possible new take?

Community Help
1

Hi there,

The overarching goal I have is to teach p5.js during a women’s hackathon at my university using Observable. I feel like it’s a great way for attendees to have a portfolio like set of their work to share and collaborate with.

There’s many examples of the instanced sketch methods for p5 on observable, https://observablehq.com/@tmcw/p5 … which require putting code inside a p5 function call, and prepending sketch. in front of all predefined p5 functions. See the following as an example

p5(sketch => {
  let system;
  const c = sketch.color('#DC3F74');
  sketch.setup = function() {
    sketch.createCanvas(640, 300);
    sketch.textAlign(sketch.CENTER);
    sketch.textFont('sans-serif');
    sketch.textStyle(sketch.BOLD);
  };
  sketch.draw = function() {
    sketch.translate(sketch.millis() / 10 % sketch.width, sketch.height / 2);
    sketch.background(viewof background.valueAsNumber);
    sketch.fill(c).textSize(100);
    sketch.text('p5.js', 0, 0);
  };
})

but for students that haven’t done much/any coding I want what they write to be as similar to the p5 reference/documentation/quickstarts as possible.

Therefore, I have experimented with https://observablehq.com/@devinbayly/processing-p5-js-iframe-technique, where standard p5.js can be typed into the textarea, and it will get run in an iframe above. The problem here is that the work is not retained.

image
image2385×2046 296 KB

My question is therefore, can anyone suggest a way that contents provided to the textarea can be retained? Or… is there a totally separate approach which still allows for users to supply p5 code as it is written in the reference to create visuals?

I’m aware this is a bit of a niche case, so if its just a little too much to pull off then the next best thing is to fall back to the instanced sketch methods linked above. Thanks so much!

2

with would have been the closest thing to a solution, but it isn’t supported in strict mode.

I also wonder:

  • Is there any merit in teaching a Javascript programming style that cannot be applied anywhere else?
  • Have you considered just shortening sketch. to, e.g., s.?
  • Why would you want to use Observable in this particular scenario when there’s a fully functional p5js web editor?
3

Thanks for the reply! Yea I think this attempt is a little bit too square peg round hole, and that other resources might be preferable.

Just to be clear, there’s no straightforward way I can programmatically set the contents of a cell from another cell right? I think if I had that I’d be set.

4

You can declare a cell as mutable:

Just to emphasize my opinion: if you introduce your students to Observable, you might as well introduce them to the proper syntax (instead of creating an artificial abstraction which they have to unlearn later on). :slight_smile:

5

That notebook link looks like it will come in handy in the future.

I think your opinion makes plenty of sense, and I’ll be certain to factor it into account when making my decisions about what tools to use to teach this workshop.

Thanks so much!