Not Working

[MLUY]

Thanks Garrit
Thanks for your respond on Twitter!, my problem is I am complete novice on Javascript.
I was looking for a good coding environment for my 9 year old Son, who is wants to learn a scripting languege after being on Scratch (MIT) for years. He really likes https://p5js.org/ and the examples on https://thecodingtrain.com/ But there is no intellisense and debugging so I was looking for something better. Then I found Visual Studio Code, everybody seems very positive about. So I downloaded it and installed P5 and your P5Canvas but it did not work, I got the error messages as I send on twitter and they dissapeared after I put your suggested /* jslint esversion: 6 */ into the sketch. (I changed 6 to 7)

But its still not working :(, I dont know how to put this on Github except typing.....

Simple code example:

---

/* jslint esversion: 7 /
/

• @name Simple Shapes

• @description This examples includes a circle, square, triangle, and a flower.
  */
  function setup() {
  // Create the canvas
  createCanvas(720, 700);
  background(200);

  // Set colors
  fill(204, 101, 192, 127);
  stroke(127, 63, 120);

  // A rectangle
  rect(40, 120, 120, 40);
  // An ellipse
  ellipse(240, 240, 80, 80);
  // A triangle
  triangle(300, 100, 320, 100, 310, 80);

  // A design for a simple flower
  translate(580, 200);
  noStroke();
  for (let i = 0; i < 10; i ++) {
  ellipse(0, 30, 20, 80);
  rotate(PI/5);
  }
  }

First I click on P5Canvas in the bottom left corner when I am in the Sketch and then the P5Canvas pops up and I run the code but nothing happens...screen remains black non responsive...

Output Code:

[Running] node "c:\Users\Luijken Family\Documents\JOHN\Visual Studio\CodingChallenges\CC_007_SolarSystemGenerator\P5\testing.js"

[Done] exited with code=0 in 0.209 seconds

---

Output P5Canvas is empty, so I guess there are no more errors

---

[pixelkind]

Hej,

here is a working version of your code.

It's a bit tricky, because p5canvas uses the p5js setup function internally, so you can not override it and you don't have to create your own canvas (I removed createCanvas(720, 700); in the working example) and you should use the draw function instead of the setup. Actually in p5canvas it would also work to not write the code in any function (but that is not recommended). I also fixed a small bug with the multiline comments.

I have some code snippets for my students to integrate their examples into html, I will share that too in one of the next updates.

I hope that helps your son 😃

PS: One of my first tasks for the students is always to draw some emoji with ellipse, rect, line, fill, etc...

/* jslint esversion: 6 */
/*

@name Simple Shapes

@description This examples includes a circle, square, triangle, and a flower.
*/

function draw() {
  // Create the canvas
  background(200);

  // Set colors
  fill(204, 101, 192, 127);
  stroke(127, 63, 120);

  // A rectangle
  rect(40, 120, 120, 40);
  // An ellipse
  ellipse(240, 240, 80, 80);
  // A triangle
  triangle(300, 100, 320, 100, 310, 80);

  // A design for a simple flower
  translate(580, 200);
  noStroke();
  for (let i = 0; i < 10; i++) {
    ellipse(0, 30, 20, 80);
    rotate(PI / 5);
  }
}

[MLUY]

Thanks very much, it works now