Answered step by step
Verified Expert Solution
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
Im making a drawing app via pjs 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.floorcanvasContainersizewidth
Math.floorcanvasContainersizeheight
;
cparentcontent;
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.addToolnew FreehandTool;
toolbox.addToolnew LineToTool;
toolbox.addToolnew SprayCanTool;
toolbox.addToolnew eraserTool;
toolbox.addToolnew mirrorDrawTool;
toolbox.addToolnew shapeTool;
toolbox.addToolnew bucketTool;
background;
noFill;
set the stroke weight to the value in the strokeWeightSlider element
strokeWeightgetStrokeWeight;
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 toolboxselectedTool.hasOwnPropertydraw
toolbox.selectedTool.draw;
else
alertit doesn't look like your tool has a draw method!";
function mouseReleased
saveState;
function keyPressede
Undo with CtrlZ or CmdZ
if ekeyCode && ectrlKey emetaKey
undo;
Redo with CtrlY or CmdShiftZ
else if
ekeyCode && ectrlKey
ekeyCode && emetaKey && eshiftKey
redo;
function isMouseInsideCanvas
return mouseX && mouseY && mouseX width && mouseY height;
document.addEventListenerDOMContentLoaded function
document.getElementByIdundoButtonaddEventListenerclick window.undo;
document.getElementByIdredoButtonaddEventListenerclick 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...Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started