p5js has a clear() function which clears everything from the screen. I want to keep the canvas created by createCanvas() but clear the createGraphics() one only. How can I do this ?
//something like this
var canvas2;
function setup() {
createCanvas(400, 400);
canvas2 = createGraphics(400,400);
canvas2.clear()
noLoop()
}
function draw() {
fill(255,0,0)
rect(60,60,40,40)
canvas2.fill(20,44,240);
canvas2.rect(20,20,40,40);
image(canvas2,0,0)
}
function mousePressed() {
//something which clears the createGraphics() canvas only and keeps the createCanvas() one
}
You can clear the content of a graphics object using its clear() function. Here's an example:
var canvas2;
function setup() {
createCanvas(400, 400);
canvas2 = createGraphics(400,400);
canvas2.fill(20,44,240);
canvas2.rect(20,20,40,40);
}
function draw() {
background(255);
fill(255,0,0)
rect(60,60,40,40)
image(canvas2,0,0)
}
function mousePressed() {
canvas2.clear();
}
I moved the canvas2.rect(20, 20, 40, 40) call to be inside the setup() function, because otherwise you're redrawing to the canvas even after you clear it. I also removed your noLoop() call so that you could see the result of clearing the canvas.
Related
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();
}
}
I am drawing a scatterplot with p5.js and want to access the x and y points from inside the setup() function for use with mouseovers in the draw() function. How can I make the x and y point variables globally accessible? I'm afraid I don't understand scoping well enough yet. Do they need to be initialized as arrays...?
function setup() {
//create canvas
createCanvas(windowWidth, windowHeight);
//loop through the videoDatatwo array of objects and get xpoints and ypoints
for (var i = 0; i < videoDatatwo.length; i++) {
videoDatatwo[i].xpoint = map(videoDatatwo[i].Reach, 0, 47674, 150, width - 400);
videoDatatwo[i].ypoint = map(videoDatatwo[i].Views, 0, 9248, height - 150, 150);
}
}
If you want a variable to be available in both the setup() and draw() functions, then you need to declare it outside of those functions. Here's an example:
var message;
function setup() {
createCanvas(500, 500);
message = 'hello world';
}
function draw() {
text(message, 100, 100);
}
This code declares the message variable at the top of the sketch, then it initializes it in the setup() function, and finally it references it in the draw() function.
The same concept would apply to arrays.
In p5 I have a code with mouseClicked() function.
I want this function to be called only when the canvas is clicked.
Any idea ?
I found the answer. When creating the canvas, link it to a function like this:
function setup() {
var canvas = createCanvas(width, height);
canvas.mouseClicked(my_function);
...
}
function my_function(){
...
}
I know how to save the canvas using p5.js. However I want to save the canvas as a very large png (for example 8000x8000) so that I can use it in Photoshop and scale down the image to the appropriate size. Is there a simple way of doing this besides creating a new canvas behind the scenes that is too large for the browser window?
You could use the createGraphics() function to create an off-screen buffer. Then you can draw it to the screen using the image() function, or you can call its save() function to store it as a file. Here's an example:
let pg;
function setup() {
createCanvas(400, 400);
pg = createGraphics(4000, 4000);
pg.background(32);
}
function draw() {
pg.ellipse(random(pg.width), random(pg.height), 100, 100);
image(pg, 0, 0, width, height);
}
function mousePressed(){
pg.save("pg.png");
}
Draw everything into a pGraphics object.
Normally you draw this "output" just as an image to the canvas.
But if you want to export a high-res version of it, you scale it up first.
let scaleOutput = 1;
let output;
let canvas;
// setup
function setup() {
// other stuff...
output = createGraphics(1000, 640);
canvas = createCanvas(1000, 640);
}
// the draw loop
function draw() {
// Clear Canvas
background(255);
output.clear();
// Set scale
output.push();
output.scale(scaleOutput);
// Draw to your output here...
output.pop();
// Show on canvas
image(output, 0, 0);
}
// Scale up graphics before exporting
function exportHighRes() {
// HighRes Export
scaleOutput = 5;
output = createGraphics(scaleOutput * 1000, scaleOutput * 640);
draw();
save(output, "filename", 'png');
// Reset Default
scaleOutput = 1;
output = createGraphics(1000, 640);
draw();
}
// Export when key is pressed
function keyReleased() {
if (key == 'e' || key == 'E') exportHighRes();
}
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.