Draw transparent colour - p5js
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
Is it possible to draw with transparency like you would draw with any colour?
For example if i'm using a createGraphics() you can use clear() to make the canvas transparent, but what if I wanted to draw a black background with a see-through hole in the middle (draw a "transparent filled" ellipse that cuts through?).
javascript p5.js
edited Nov 29 '18 at 2:04
Kevin Workman
34.4k54273
asked Nov 29 '18 at 1:25
Jared ParkerJared Parker
539
add a comment |
Is it possible to draw with transparency like you would draw with any colour?
For example if i'm using a createGraphics() you can use clear() to make the canvas transparent, but what if I wanted to draw a black background with a see-through hole in the middle (draw a "transparent filled" ellipse that cuts through?).
javascript p5.js
edited Nov 29 '18 at 2:04
Kevin Workman
34.4k54273
asked Nov 29 '18 at 1:25
Jared ParkerJared Parker
539
add a comment |
Is it possible to draw with transparency like you would draw with any colour?
For example if i'm using a createGraphics() you can use clear() to make the canvas transparent, but what if I wanted to draw a black background with a see-through hole in the middle (draw a "transparent filled" ellipse that cuts through?).
javascript p5.js
edited Nov 29 '18 at 2:04
Kevin Workman
34.4k54273
asked Nov 29 '18 at 1:25
Jared ParkerJared Parker
539
Is it possible to draw with transparency like you would draw with any colour?
For example if i'm using a createGraphics() you can use clear() to make the canvas transparent, but what if I wanted to draw a black background with a see-through hole in the middle (draw a "transparent filled" ellipse that cuts through?).
javascript p5.js
javascript p5.js
edited Nov 29 '18 at 2:04
Kevin Workman
34.4k54273
asked Nov 29 '18 at 1:25
Jared ParkerJared Parker
539
edited Nov 29 '18 at 2:04
Kevin Workman
34.4k54273
asked Nov 29 '18 at 1:25
Jared ParkerJared Parker
539
edited Nov 29 '18 at 2:04
Kevin Workman
34.4k54273
edited Nov 29 '18 at 2:04
Kevin Workman
34.4k54273
edited Nov 29 '18 at 2:04
Kevin Workman
34.4k54273
34.4k54273
asked Nov 29 '18 at 1:25
Jared ParkerJared Parker
539
asked Nov 29 '18 at 1:25
Jared ParkerJared Parker
539
asked Nov 29 '18 at 1:25
Jared ParkerJared Parker
539
539
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You could play around with the blendMode() function. Here is the reference for the blendMode() function.
Or you could call the set() function on each pixel. Here is the reference for the set() function.
Or you could look into using an image mask. A simple example is creating an image with a transparent center ahead of time, and then displaying that over top your sketch. A more advanced version of that would be to use the mask() function. Here is the reference for the mask() function.
answered Nov 29 '18 at 2:03
Kevin WorkmanKevin Workman
34.4k54273
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53530540%2fdraw-transparent-colour-p5js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You could play around with the blendMode() function. Here is the reference for the blendMode() function.
Or you could call the set() function on each pixel. Here is the reference for the set() function.
Or you could look into using an image mask. A simple example is creating an image with a transparent center ahead of time, and then displaying that over top your sketch. A more advanced version of that would be to use the mask() function. Here is the reference for the mask() function.
answered Nov 29 '18 at 2:03
Kevin WorkmanKevin Workman
34.4k54273
add a comment |
You could play around with the blendMode() function. Here is the reference for the blendMode() function.
Or you could call the set() function on each pixel. Here is the reference for the set() function.
Or you could look into using an image mask. A simple example is creating an image with a transparent center ahead of time, and then displaying that over top your sketch. A more advanced version of that would be to use the mask() function. Here is the reference for the mask() function.
answered Nov 29 '18 at 2:03
Kevin WorkmanKevin Workman
34.4k54273
add a comment |
You could play around with the blendMode() function. Here is the reference for the blendMode() function.
Or you could call the set() function on each pixel. Here is the reference for the set() function.
Or you could look into using an image mask. A simple example is creating an image with a transparent center ahead of time, and then displaying that over top your sketch. A more advanced version of that would be to use the mask() function. Here is the reference for the mask() function.
answered Nov 29 '18 at 2:03
Kevin WorkmanKevin Workman
34.4k54273
You could play around with the blendMode() function. Here is the reference for the blendMode() function.
Or you could call the set() function on each pixel. Here is the reference for the set() function.
Or you could look into using an image mask. A simple example is creating an image with a transparent center ahead of time, and then displaying that over top your sketch. A more advanced version of that would be to use the mask() function. Here is the reference for the mask() function.
answered Nov 29 '18 at 2:03
Kevin WorkmanKevin Workman
34.4k54273
answered Nov 29 '18 at 2:03
Kevin WorkmanKevin Workman
34.4k54273
answered Nov 29 '18 at 2:03
Kevin WorkmanKevin Workman
34.4k54273
answered Nov 29 '18 at 2:03
Kevin WorkmanKevin Workman
34.4k54273
34.4k54273
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53530540%2fdraw-transparent-colour-p5js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
