search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.59k stars 3.31k forks source link

p5.Renderer is missing methods #3916

Open osresearch opened 5 years ago

osresearch commented 5 years ago

Nature of issue?

Most appropriate sub-area of p5.js?

Which platform were you using when you encountered this?

Details about the bug:

Trying to call some methods on the p5.Renderer returned from createCanvas() doesn't work. For instance:

let p5

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

function draw() {
  p5.background(220);
  p5.strokeWeight(10)
  p5.stroke(0)
  p5.circle(width/2, height/2, 100, 100);
}

results in the error (on the javascript console) that p5.circle is not a function. similar results for noStroke and other methods that are in the documentation. Some methods, like line() and stroke() work, while others like ellipse() are defined but don't seem to produce any output.

Feature enhancement details:

All these methods do work for the p5.Graphics context returned by createGraphics(), so it would be nice if they were consistent between the graphics and renderer objects.

let p5

function setup() {
  createCanvas(400, 400);
  p5 = createGraphics(400,400)
}

function draw() {
  p5.background(220);
  p5.noStroke()
  p5.fill(0)
  p5.circle(width/2, height/2, 100, 100);

  image(p5, 0, 0)
}

An alternate way to solve it would be if it were possible to create a graphics context from a renderer, although I don't see any methods currently for doing so.

welcome[bot] commented 5 years ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

AnuragGupta93 commented 4 years ago

@osresearch The p5.renderer has access to only the main graphics and rendering methods.

But, it is extended to p5.renderer2D or p5.rendererGL (depends) and thus have the methods background(), noStroke() and fill(). However, circle() is a method of core/Shape and thus can't be implemented using p5.renderer.

AnuragGupta93 commented 4 years ago

However, I do feel that p5.renderer should have proper documentation which includes its methods just like p5.Element.

Also, I found out that there is no documentation for p5.renderer2D and p5.rendererGL and thinking of implementing the same.

What are your views @lmccart @stalgiag ?

DivyamAhuja commented 4 years ago

p5._pInst.circle() should work