Added whiteboard app
This commit is contained in:
parent
088e6a24e3
commit
965879f699
0
Todo-app/index.html
Normal file → Executable file
0
Todo-app/index.html
Normal file → Executable file
0
Todo-app/index.js
Normal file → Executable file
0
Todo-app/index.js
Normal file → Executable file
0
Todo-app/style.css
Normal file → Executable file
0
Todo-app/style.css
Normal file → Executable file
13
Whiteboard/index.html
Executable file
13
Whiteboard/index.html
Executable file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Whiteboard app</title>
|
||||
<script src="p5.min.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
82
Whiteboard/index.js
Executable file
82
Whiteboard/index.js
Executable file
@ -0,0 +1,82 @@
|
||||
let slider, clearButton;
|
||||
|
||||
function setup(){
|
||||
createCanvas(windowWidth-20,windowHeight-20);
|
||||
background(200);
|
||||
|
||||
slider = createSlider(1,50,1);
|
||||
slider.position(10,15);
|
||||
slider.style('width', '80px');
|
||||
|
||||
clearButton = createButton('Clear');
|
||||
clearButton.position(width - 50, 10);
|
||||
clearButton.mousePressed(clearBoard)
|
||||
|
||||
|
||||
}
|
||||
|
||||
function draw(){
|
||||
let val = slider.value();
|
||||
|
||||
fill(240);
|
||||
strokeWeight(0);
|
||||
rect(0,0,width,60);
|
||||
|
||||
fill(0);
|
||||
text(val, 100, 22.5);
|
||||
|
||||
//colors
|
||||
fill(255,0,0);
|
||||
rect(120,5,50,50);
|
||||
|
||||
fill(0,255,0);
|
||||
rect(170,5,50,50);
|
||||
|
||||
fill(0,0,255);
|
||||
rect(220,5,50,50);
|
||||
|
||||
fill(255,255,0);
|
||||
rect(270,5,50,50);
|
||||
|
||||
fill(0);
|
||||
rect(320,5,50,50);
|
||||
|
||||
fill(255);
|
||||
rect(370,5,50,50);
|
||||
|
||||
if (mouseIsPressed === true) {
|
||||
if(mouseY <= 50){
|
||||
//not on whiteboard
|
||||
|
||||
switch(true){
|
||||
case (mouseX > 120 && mouseX < 170):
|
||||
stroke(255,0,0)
|
||||
break;
|
||||
case (mouseX > 170 && mouseX < 220):
|
||||
stroke(0,255,0)
|
||||
break;
|
||||
case (mouseX > 220 && mouseX < 270):
|
||||
stroke(0,0,255)
|
||||
break;
|
||||
case (mouseX > 270 && mouseX < 320):
|
||||
stroke(255,255,0)
|
||||
break;
|
||||
case (mouseX > 320 && mouseX < 370):
|
||||
stroke(0,0,0)
|
||||
break;
|
||||
case (mouseX > 370 && mouseX < 420):
|
||||
stroke(200)
|
||||
break;
|
||||
}
|
||||
|
||||
} else {
|
||||
//onwhiteboard
|
||||
strokeWeight(val);
|
||||
line(mouseX, mouseY, pmouseX, pmouseY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clearBoard(){
|
||||
background(200);
|
||||
}
|
3
Whiteboard/p5.min.js
vendored
Executable file
3
Whiteboard/p5.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user