Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

I ' m making a drawing app via p 5 . js with undo redo functionality. The functions work when using keyboard input & the

I'm making a drawing app via p5.js with undo redo functionality. The functions work when using keyboard input & the undo works when i click the button however redo does not redo when i click it (console log & alerts still trigger for it) but it doesn't redo.
Sketch.js:
//global variables that will store the toolbox colour palette
//and the helper functions
var toolbox = null;
var colourP = null;
var helpers = null;
function setup(){
//create a canvas to fill the content div from index.html
canvasContainer = select('#content');
var c = createCanvas(
Math.floor(canvasContainer.size().width *0.95),
Math.floor(canvasContainer.size().height *0.95)
);
c.parent('content');
//create helper functions and the colour palette
helpers = new HelperFunctions();
colourP = new ColourPalette();
//create a toolbox for storing the tools
toolbox = new Toolbox();
//add the tools to the toolbox.
toolbox.addTool(new FreehandTool());
toolbox.addTool(new LineToTool());
toolbox.addTool(new SprayCanTool());
toolbox.addTool(new eraserTool());
toolbox.addTool(new mirrorDrawTool());
toolbox.addTool(new shapeTool());
toolbox.addTool(new bucketTool());
background(255);
noFill();
//set the stroke weight to the value in the strokeWeightSlider element
strokeWeight(getStrokeWeight());
saveState();
}
function draw(){
//call the draw function from the selected tool.
//hasOwnProperty is a javascript function that tests
//if an object contains a particular method or property
//if there isn't a draw method the app will alert the user
if (toolbox.selectedTool.hasOwnProperty('draw')){
toolbox.selectedTool.draw();
} else {
alert("it doesn't look like your tool has a draw method!");
}
}
function mouseReleased(){
saveState();
}
function keyPressed(e){
// Undo with Ctrl+Z or Cmd+Z
if (e.keyCode ===90 && (e.ctrlKey || e.metaKey)){
undo();
}
// Redo with Ctrl+Y or Cmd+Shift+Z
else if (
(e.keyCode ===89 && e.ctrlKey)||
(e.keyCode ===90 && e.metaKey && e.shiftKey)
){
redo();
}
}
function isMouseInsideCanvas(){
return mouseX >=0 && mouseY >=0 && mouseX <= width && mouseY <= height;
}
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('undoButton').addEventListener('click', window.undo);
document.getElementById('redoButton').addEventListener('click', window.redo);
});
index.html

Step by Step Solution

3.39 Rating (155 Votes )

There are 3 Steps involved in it

Step: 1

To implement undo and redo functionality in your drawing app using p5js you can follow these steps a... blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Introduction to Algorithms

Authors: Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest

3rd edition

978-0262033848

More Books

Students also viewed these Programming questions

Question

Why do bars offer free peanuts?

Answered: 1 week ago