I'm making a new painting app for an assignment.
What I want for result is that if a user pressed mouse buttons, then white cream is put on the background images and shapes as permanent afterimage effect, following the movement of the mouse.
However when I pressed the mouse buttons, the background images came out as I intended, but the ones with the white cream didn’t work at all.
My current code is:
function setup() {
createCanvas(600,600);
frameRate(100);
}
function draw() {
background(80,30,0);
var size1 = 500;
fill(255);
noStroke();
ellipse(300, 300, size1, size1);
var size2 = 450;
fill(255,217,102);
noStroke();
ellipse(300, 300, size2, size2);
if (mouseIsPressed) {
fill(255,255,255);
noStroke();
triangle(mouseX,mouseY-28,mouseX-24,mouseY+16,mouseX+24,mouseY+16);
fill(255,255,255);
stroke(121,67,21);
strokeWeight(0.1);
triangle(mouseX-24,mouseY-16,mouseX+24,mouseY-16,mouseX,mouseY+28);
}
}
I don’t know what the problem is, and how to solve it.
Could you help me out?
Thank you.
P5.js link of this app is here : https://editor.p5js.org/jwyoon100/full/Kd4JRk87f
You need to move all the background images code into the setup() function, like this:
function setup() {
createCanvas(600,600);
frameRate(100);
background(80,30,0);
var size1 = 500;
fill(255);
noStroke();
ellipse(300, 300, size1, size1);
var size2 = 450;
fill(255,217,102);
noStroke();
ellipse(300, 300, size2, size2);
}
function draw() {
if (mouseIsPressed) {
fill(255,255,255);
noStroke();
triangle(mouseX,mouseY-28,mouseX-24,mouseY+16,mouseX+24,mouseY+16);
fill(255,255,255);
stroke(121,67,21);
strokeWeight(0.1);
triangle(mouseX-24,mouseY-16,mouseX+24,mouseY-16,mouseX,mouseY+28);
}
}
Related
I would like to paint ellipses over an image when clicking the mouse, and when I press the keyboard, hide and show the underneath image alternatively, without cleaning the ellipses.
I'm using createGraphics() to store the image data, and remove() so when the keyboard is pressed I spect the image disappear but it doesn't work
Here is a sketch of what I trying to do:
let isMouseBeeingPressed = false;
let img;
let isShow = true
let bufferImg;
function preload() {
img = loadImage(
"https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500"
);
}
function setup() {
createCanvas(500, 500);
background(255);
loadImageBuffer();
}
function loadImageBuffer() {
bufferImg = createGraphics(400, 400);
bufferImg.image(img, 0, 0);
image(bufferImg, 0, 0);
}
function draw() {
if(isMouseBeeingPressed) {
stroke(0, 0, 0, 50);
fill(255);
ellipse(mouseX, mouseY, 20);
}
}
function keyPressed() {
if(isShow) {
bufferImg.remove();
} else {
image(bufferImg, 0, 0);
}
console.log('isShow:', isShow);
return isShow = !isShow;
}
function mousePressed() {
isMouseBeeingPressed = true;
}
function mouseReleased() {
isMouseBeeingPressed = false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
Any idea of how to achieve this?
The best approach is probably to draw the ellipses to a separate buffer (p5.Graphics), and then draw that on top of the image or blank background as needed. An alternative approach would be to record the position of each ellipse in an array so that they can be redrawn. However, the latter approach will use more memory and switching the image on and off will have a noticeable delay after many ellipses have been drawn.
Approach #1 (render via p5.Graphics)
let img;
let graphics;
let isShow = true;
function preload() {
img = loadImage(
"https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500"
);
}
function setup() {
createCanvas(500, 500);
background(255);
image(img, 0, 0);
graphics = createGraphics(width, height);
}
function draw() {
if (mouseIsPressed) {
graphics.stroke(0, 0, 0, 50);
graphics.fill(255);
graphics.ellipse(mouseX, mouseY, 20);
background(255);
if (isShow) {
image(img, 0, 0);
}
image(graphics, 0, 0);
}
}
function keyPressed(e) {
isShow = !isShow;
background(255);
if (isShow) {
image(img, 0, 0);
}
image(graphics, 0, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
Update: one thing to note about this approach is that whenever the mouse is pressed, the entire scene must be redrawn (white background, image if applicable, and foreground). The reason for this is antialiasing and transparency. When you draw an ellipse on the graphics buffer the edges will have some partially transparent pixels due to antialiasing. If you repeatedly draw the buffer as an overlay without redrawing what is behind it then the partially transparent pixels will become less and less transparent until they are sold black. This will cause your ellipses to have a slightly thicker and more pixelated outer edge.
Approach #2 (Array of ellipse positions)
let img;
let isShow = true
let positions = [];
function preload() {
img = loadImage(
"https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500"
);
}
function setup() {
createCanvas(500, 500);
background(255);
image(img, 0, 0);
}
function draw() {
if (mouseIsPressed) {
stroke(0, 0, 0, 50);
fill(255);
ellipse(mouseX, mouseY, 20);
positions.push([mouseX, mouseY]);
}
}
function keyPressed() {
isShow = !isShow;
background(255);
if (isShow) {
image(img, 0, 0);
}
stroke(0, 0, 0, 50);
fill(255);
for (const [x, y] of positions) {
ellipse(x, y, 20);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
Currently working on a site that features some line drawing while hovering. How can I make the line recede naturally as you draw more? Right now I've figured out how to draw a continual line.
var canvas;
var button;
function windowResized() {
console.log('resized');
resizeCanvas(windowWidth, windowHeight);
}
function setup () {
canvas = createCanvas(windowWidth, windowHeight);
canvas.position(0,0);
canvas.style('z-index', '-1')
background(175);
// button = createButton("Start Your Walk");
}
function draw () {
strokeWeight(4);
console.log('button')
line(pmouseX, pmouseY, mouseX, mouseY)
}
You may store the values of your mouse position in an array and then draw the points of the array in order. When the array is updated, if it is full, you will have to erase the last point of the array, move all the points one position backwards and add the new point. The following would be an example code. I recomend you to consult this page for documentation and also the p5 reference.
var mousePositions = [];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
v = createVector(mouseX, mouseY);
mousePositions.push(v);
noFill();
beginShape();
for(var i = 0; i < mousePositions.length; i++){
vertex(mousePositions[i].x, mousePositions[i].y);
}
endShape();
if(mousePositions.length > 25){
mousePositions.shift();
}
}
Is it possible to call the function draw(){} in a p5 js sketch when clicking on the canvas?
I would like everything under the draw function to be called when clicking anywhere on the canvas, and not before.
function setup() {
createCanvas(500, 500);
frameRate(65);
background('#ff0a0a');
textSize(60);
text("ART", 370, 250);
};
function draw() {
noFill();
var red = random(100);
var green = random(200);
var blue =random(230);
var h = random(height);
stroke(red,green,blue);
strokeWeight(8);
rect(frameCount,h,300,20+(frameCount));
ellipse(frameCount,h ,300,20+(frameCount));
triangle(frameCount,h ,300,20+(frameCount));
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
This works fine for me:
function setup() {
createCanvas(500, 500);
frameRate(65);
background('#ff0a0a');
textSize(60);
text("ART", 370, 250);
};
function mousePressed() {
noFill();
var red = random(100);
var green = random(200);
var blue =random(230);
var h = random(height);
stroke(red,green,blue);
strokeWeight(8);
rect(frameCount,h,300,20+(frameCount));
ellipse(frameCount,h ,300,20+(frameCount));
triangle(frameCount,h ,300,20+(frameCount));
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
Just to mention another way and to address your question in Kevin's answer above, you can do something like this to draw continuously when the mouse is clicked once and stop when it is clicked again. This would work like a toggle switch for drawing :-
var drawThings;
function setup() {
createCanvas(500, 500);
frameRate(65);
background('#ff0a0a');
textSize(60);
text("ART", 370, 250);
}
function draw() {
if (drawThings) {
noFill();
var red = random(100);
var green = random(200);
var blue = random(230);
var h = random(height);
stroke(red, green, blue);
strokeWeight(8);
rect(frameCount, h, 300, 20 + (frameCount));
ellipse(frameCount, h, 300, 20 + (frameCount));
triangle(frameCount, h, 300, 20 + (frameCount));
}
}
function mouseClicked() {
drawThings = !drawThings;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
So I'm trying to build an animation that I can step through with mouse clicks. Adding individual objects click by click is easy. Sequence I want is as follows:
One object(a) drawn initially.
First mouse click adds an object(b).
Second mouse click adds an object(c).
Third mouse click, object(c) should move across the screen and disappear.
I'm having a problem on the last part of the sequence. I can't figure out how to make the object move and still maintain the static part of the sketch. The normal way of doing movement is to change the coordinates of the object with each loop through the draw() function, and use the background to cover up the previous objects. Can't do that in this case because I need object(a) and object(b) to be persistent.
Code below. Thanks for your help!
var count = 0;
function setup() {
createCanvas(200, 200);
a = new Object1(20, 40);
b = new Object1(20, 85);
c = new Object1(20, 130);
}
function draw() {
background(200);
a.display();
if (count == 1) {
b.display();
}
if (count == 2) {
b.display();
c.display();
}
if (count == 3) { //this is where I have a problem
}
if (count > 3) {
count = 0;
}
}
function Object1(ix, iy, itext) {
this.x = ix;
this.y = iy;
this.text = itext;
this.display = function() {
fill(160);
rect(this.x, this.y, 40, 40);
}
}
function mousePressed() {
count++;
}
Generally how you'd do this is by drawing the static part of your scene to an off-screen buffer, which you can create using the createGraphics() function. From the reference:
var pg;
function setup() {
createCanvas(100, 100);
pg = createGraphics(100, 100);
}
function draw() {
background(200);
pg.background(100);
pg.noStroke();
pg.ellipse(pg.width/2, pg.height/2, 50, 50);
image(pg, 50, 50);
image(pg, 0, 0, 50, 50);
}
You'd draw the static part to the buffer, then draw the buffer to the screen, then draw the dynamic stuff on top of it each frame.
This has been discussed before, so I'd recommend doing a search for stuff like "processing pgraphics" and "p5.js buffer" to find a bunch more information.
I'm trying to add animation in my code. What I have so far is an object that can be changed by pressing a button. So every time you press the button, the object changes (it is a tree and I'm changing its branches). Is it possible to add some kind of animation like snow? The problem with that is that I have to put it inside the draw method so it will be called automatically and make us think that it is animation. Thus, I also have to add the background / button and everything all the time. But I can't do that with my main object (tree) as I want to change it only when you press the button.
Is there any solution to that?
Thanks in advance
To persist some objects while refreshing others, you either:
Refresh only part of the screen. Like, draw a shape (rect or whatever) with background colour erasing only part of screen
Conditionally draw selected objects. Use flags to selective draw what you need, every draw, and use background() to clear the whole screen every draw cycle.
Use layers. Erase one layer and not other as you need, display all them in draw. This is usually done with PGraphics objects. Search processing + layers to see samples. Here and/or in processing forum.
EDIT:
Here some simple examples of each approach:
1.
/**
* A very simple example of erasing just part of the screen to
* selective persist draws
**/
void setup() {
size(400, 400);
background(0);
noStroke();
}
void draw() {
fill(0);
rect(0, 0, width/2, height);
fill(120);
ellipse(width/4, frameCount%width, 100, 100);
}
void mouseMoved() {
fill(255);
ellipse(mouseX, mouseY, 10, 10);
}
2.
/**
* A very simple example of conditionally draw stuf
* to selective persist draws
**/
ArrayList <PVector> points = new ArrayList <PVector>();
boolean showBalls = true; // any key to toogle
void setup() {
size(400, 400);
background(0);
noStroke();
}
void draw() {
background(0);
fill(30);
rect(frameCount%width, 100, 200, 200);
fill(120);
ellipse(width/2, frameCount%width, 150, 150);
fill(255);
if (showBalls) {
for (PVector p : points) {
ellipse(p.x, p.y, 10, 10);
}
}
if (points.size() > 500) {
points.clear();
}
}
void mouseMoved() {
ellipse(mouseX, mouseY, 10, 10);
points.add(new PVector(mouseX, mouseY));
}
void keyPressed() {
showBalls = !showBalls;
}
3.
/**
* A very simple example of using PGraphics as layers
* to selective persist draws
**/
PGraphics layer;
void setup() {
size(400, 400);
layer = createGraphics(width, height);
layer.beginDraw();
layer.fill(255);
layer.endDraw();
background(0);
noStroke();
}
void draw() {
background(0);
fill(30);
rect(frameCount%width, 100, 200, 200);
fill(120);
ellipse(width/2, frameCount%width, 150, 150);
image(layer, 0, 0);
}
void mouseMoved() {
layer.beginDraw();
layer.ellipse(mouseX, mouseY, 10, 10);
layer.endDraw();
}