{"action":"created","issue":{"url":"https://api.github.com/repos/processing/p5.js/issues/2182","repository_url":"https://api.github.com/repos/processing/p5.js","labels_url":"https://api.github.com/repos/processing/p5.js/issues/2182/labels{/name}","comments_url":"https://api.github.com/repos/processing/p5.js/issues/2182/comments","events_url":"https://api.github.com/repos/processing/p5.js/issues/2182/events","html_url":"https://github.com/processing/p5.js/issues/2182","id":259335510,"number":2182,"title":"Implement image() for webgl mode","user":{"login":"kjhollen","id":78966,"avatar_url":"https://avatars0.githubusercontent.com/u/78966?v=4","gravatar_id":"","url":"https://api.github.com/users/kjhollen","html_url":"https://github.com/kjhollen","followers_url":"https://api.github.com/users/kjhollen/followers","following_url":"https://api.github.com/users/kjhollen/following{/other_user}","gists_url":"https://api.github.com/users/kjhollen/gists{/gist_id}","starred_url":"https://api.github.com/users/kjhollen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kjhollen/subscriptions","organizations_url":"https://api.github.com/users/kjhollen/orgs","repos_url":"https://api.github.com/users/kjhollen/repos","events_url":"https://api.github.com/users/kjhollen/events{/privacy}","received_events_url":"https://api.github.com/users/kjhollen/received_events","type":"User","site_admin":false},"labels":[{"id":218243056,"url":"https://api.github.com/repos/processing/p5.js/labels/area:webgl","name":"area:webgl","color":"009800","default":false},{"id":216508614,"url":"https://api.github.com/repos/processing/p5.js/labels/level:beginner","name":"level:beginner","color":"bfd4f2","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2017-09-20T23:49:14Z","updated_at":"2017-09-25T06:51:18Z","closed_at":null,"author_association":"MEMBER","body":"<!--\r\nHi there! If you are here to report a bug, or to discuss a feature (new or existing), you can use the below template to get started quickly. Fill out all those parts which you're comfortable with, and delete the remaining ones.\r\n\r\nTo check any option, replace the \"[ ]\" with a \"[x]\". Be sure to check out how it looks in the Preview tab!\r\n\r\nFeel free to remove any portion of the template that is not relevant for your issue.\r\n-->\r\n\r\n#### Nature of issue?\r\n\r\n- [ ] Found a bug\r\n- [ ] Existing feature enhancement\r\n- [x] New feature request\r\n\r\n#### Most appropriate sub-area of p5.js?\r\n\r\n- [ ] Color\r\n- [ ] Core\r\n- [ ] Data\r\n- [ ] Events\r\n- [ ] Image\r\n- [ ] IO\r\n- [ ] Math\r\n- [ ] Typography\r\n- [ ] Utilities\r\n- [x] WebGL\r\n- [ ] Other (specify if possible)\r\n\r\n#### Feature enhancement details:\r\n\r\nimage() only works in 2D mode currently, but it would be great for WEBGL mode, too. I think it could be implemented in a pretty straightforward way using other parts of the API: begin/endShape with vertex, and the p5.Texture cache in the renderer. \r\n\r\nthis is a nice self-contained issue and would be great for a new contributor who wants to write some webgl code. see: [WebGL Module Architecture](https://github.com/processing/p5.js/wiki/WebGL-Module-Architecture) for relevant documentation.\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/processing/p5.js/issues/comments/331791876","html_url":"https://github.com/processing/p5.js/issues/2182#issuecomment-331791876","issue_url":"https://api.github.com/repos/processing/p5.js/issues/2182","id":331791876,"user":{"login":"bomoko","id":297936,"avatar_url":"https://avatars1.githubusercontent.com/u/297936?v=4","gravatar_id":"","url":"https://api.github.com/users/bomoko","html_url":"https://github.com/bomoko","followers_url":"https://api.github.com/users/bomoko/followers","following_url":"https://api.github.com/users/bomoko/following{/other_user}","gists_url":"https://api.github.com/users/bomoko/gists{/gist_id}","starred_url":"https://api.github.com/users/bomoko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bomoko/subscriptions","organizations_url":"https://api.github.com/users/bomoko/orgs","repos_url":"https://api.github.com/users/bomoko/repos","events_url":"https://api.github.com/users/bomoko/events{/privacy}","received_events_url":"https://api.github.com/users/bomoko/received_events","type":"User","site_admin":false},"created_at":"2017-09-25T06:51:18Z","updated_at":"2017-09-25T06:51:18Z","author_association":"CONTRIBUTOR","body":"@kjhollen I've managed to get a sense of what's involved here, and have even managed to bang up a working version (totally throwaway, pasted below) - I was hoping you could point me in the right direction with the texture though.\r\n\r\n```\r\np5.RendererGL.prototype.image = function(image, sx, sy, sw, sh, dx, dy, w, h) {\r\n  texture(image); //  <-- presumably I should be doing this some other way ...\r\n  var iWidth = image.width;\r\n  var iHeight = image.height;\r\n\r\n  var sxPerc = sx / iWidth; //TODO: rework var names\r\n  var syPerc = sy / iHeight;\r\n  var sx1Perc = (sx + sw) / iWidth;\r\n  var sy1Perc = (sy + sh) / iHeight;\r\n\r\n  this.beginShape();\r\n  this.vertex(dx, dy, 0, sxPerc, syPerc);\r\n  this.vertex(dx + w, dy, 0, sx1Perc, syPerc);\r\n  this.vertex(dx + w, dy + h,0, sx1Perc, sy1Perc);\r\n  this.vertex(dx, dy + h,0, sxPerc, sy1Perc);\r\n  this.endShape(CLOSE);\r\n  return this;\r\n}\r\n```\r\nYou'll see that I'm calling `texture()` in the first line of my function to load up the image that gets passed through from the `image()` function in  `src/image/loading_displaying.js`.\r\n\r\nI'm pretty sure this isn't the right way of doing this - I was hoping you could give me an idea of what you had in mind in terms of actually loading up the texture here?\r\nI'm not sure where the appropriate place to do it is, I'm sure it's not where I'm currently doing it.\r\n\r\nTo my mind, it would be good for the image function to behave the same in P2D and WEBGL (as it does with my hack above) - but then, where to load the texture (and how)?\r\n\r\nI'm going to carry on digging through the p5.js source to try work it out - but any guidance you could give would be awesome.\r\nThanks!"}}
{"actor":{"display_login":"bomoko"}}