P5Drawing
INSTRUCTIONS
Use full screen to see the entire canvas. The color picker is in the bottom left corner.
There are 3 brush options:
Brush 1 - Blend Brush
Use the color picker to choose colors
Hold 'o' and click a pixel to store its color value as color 1
Hold 'p' and click a pixel to store its color value as color 2
Hold 'i' and drag on the screen to paint a blended color between
color 1 and color 2
Brush 2 - Text Brush
Press 'y' to cycle through text styles
Hold 't' and click the screen to paste text
Brush 3 - Polygon Brush
Double click the screen in 4 different places
Press '3' to make the polygon appear
Since my embedded version of this is poor, you can also go to p5.jsand paste this source code:
let brush = 0;
let lastX = 0;
let lastY = 0;
let buttonOne;
var queue = [];
let count = 0;
let colorPicker;
var c1 = null;
var c2 = null;
var activeColor = null;
var c1Active = false;
var c2Active = false;
var textActive = false;
//{0 = NORMAL, 1 = ITALIC, 2 = BOLD, 3 = BOLDITALIC}
var styleFont = 0;
function setup() {
createCanvas(600, 620);
updateUI(3);
colorPicker = createColorPicker("#ed225d");
colorPicker.position(0, height + 5);
}
//copy and paste the coloring done here
function updateUI(brushNumber) {
if (brushNumber == 1) {
//brush symbol 1
selectedColor = color(120, 30, 40, 200);
textColor = color(0, 0, 0, 255);
boxColor = color(255, 255, 255, 255);
//UI brush symbol 1
fill(selectedColor);
rect(20, 20, 20, 20);
fill(boxColor);
text("1", 26, 33);
//UI brush symbol 2
fill(boxColor);
rect(40, 20, 20, 20);
fill(textColor);
text("2", 46, 33);
//UI brush symbol 3
fill(boxColor);
rect(60, 20, 20, 20);
fill(textColor);
text("3", 66, 33);
} else if (brushNumber == 2) {
selectedColor = color(120, 30, 40, 200);
textColor = color(0, 0, 0, 255);
boxColor = color(255, 255, 255, 255);
//UI brush symbol 1
fill(boxColor);
rect(20, 20, 20, 20);
fill(textColor);
text("1", 26, 33);
//UI brush symbol 2
fill(selectedColor);
rect(40, 20, 20, 20);
fill(boxColor);
text("2", 46, 33);
//UI brush symbol 3
fill(boxColor);
rect(60, 20, 20, 20);
fill(textColor);
text("3", 66, 33);
} else if (brushNumber == 3) {
selectedColor = color(120, 30, 40, 200);
textColor = color(0, 0, 0, 255);
boxColor = color(255, 255, 255, 255);
//UI brush symbol 1
fill(boxColor);
rect(20, 20, 20, 20);
fill(textColor);
text("1", 26, 33);
//UI brush symbol 2
fill(boxColor);
rect(40, 20, 20, 20);
fill(textColor);
text("2", 46, 33);
//UI brush symbol 3
fill(selectedColor);
rect(60, 20, 20, 20);
fill(boxColor);
text("3", 66, 33);
} else if (brushNumber == 9) {
selectedColor = color(120, 30, 40, 200);
textColor = color(0, 0, 0, 255);
boxColor = color(255, 255, 255, 255);
//UI brush symbol 1
fill(boxColor);
rect(20, 20, 20, 20);
fill(textColor);
text("1", 26, 33);
//UI brush symbol 2
fill(boxColor);
rect(40, 20, 20, 20);
fill(textColor);
text("2", 46, 33);
//UI brush symbol 3
fill(boxColor);
rect(60, 20, 20, 20);
fill(textColor);
text("3", 66, 33);
}
}
function draw() {
if (brush == 0) {
console.log("To use the blend brush, hold 'i'\n\n");
brush = 9;
} else if (brush == 1) {
console.log("To use the text brush, hold 't' and click");
console.log("Cycle through styles by pressing 'y\n\n");
brush = 9;
} else if (brush == 2) {
console.log("Double click to set points of quadrilateral");
console.log("Press '3' to paste quadrilateral\n\n");
brush = 9;
if (keyPressed) {
polygonBrush();
}
}
if (keyIsDown(80)) {
c1Active = false;
c2Active = true;
} else if (keyIsDown(79)) {
c1Active = true;
c2Active = false;
} else if (keyIsDown(73)) {
blendBrush();
} else if (keyIsDown(84)) {
textActive = true;
} else {
c1Active = false;
c2Active = false;
textActive = false;
activeColor = colorPicker.color();
}
}
function keyPressed() {
if (key == "1") {
brush = 0;
updateUI(1);
} else if (key == "2") {
brush = 1;
updateUI(2);
} else if (key == "3") {
brush = 2;
updateUI(3);
} else if (key == "y") {
styleFont = (styleFont + 1) % 4;
if (styleFont == 0) {
console.log("Style: Normal\n");
} else if (styleFont == 1) {
console.log("Style: Italic\n");
} else if (styleFont == 2) {
console.log("Style: BOLD\n");
} else if (styleFont == 3) {
console.log("Style: BOLDITALIC\n");
}
}
}
function polygonBrush() {
if (count == 4) {
fill(activeColor);
quad(
queue[0][0],
queue[0][1],
queue[1][0],
queue[1][1],
queue[2][0],
queue[2][1],
queue[3][0],
queue[3][1]
);
//clear the queue, reset the brush, and the count
queue = [];
count = 0;
brush = 9;
} else {
console.log("Double click to set the points of the quadrilateral");
brush = 9;
}
}
function doubleClicked() {
console.log("Clicked!");
console.log([mouseX, mouseY]);
count++;
queue.push([mouseX, mouseY]);
}
/*COLOR BRUSH*/
function mouseDragged() {
noStroke();
fill(activeColor);
ellipse(mouseX, mouseY, 50, 50);
}
function mouseClicked() {
if (c1Active) {
c1 = get(mouseX, mouseY);
console.log("Color 1 is stored as: " + c1);
} else if (c2Active) {
c2 = get(mouseX, mouseY);
console.log("Color 2 is stored as: " + c2);
} else if (textActive && styleFont == 0) {
strokeWeight(0);
fill(activeColor);
textSize(30);
textStyle(NORMAL);
text("Text", mouseX, mouseY);
} else if (textActive && styleFont == 1) {
strokeWeight(0);
fill(activeColor);
textSize(30);
textStyle(ITALIC);
text("Text", mouseX, mouseY);
} else if (textActive && styleFont == 2) {
strokeWeight(0);
fill(activeColor);
textSize(30);
textStyle(BOLD);
text("Text", mouseX, mouseY);
} else if (textActive && styleFont == 3) {
strokeWeight(0);
fill(activeColor);
textSize(30);
textStyle(BOLDITALIC);
text("Text", mouseX, mouseY);
}
}
function blendBrush() {
if (c1 && c2 != null) {
let number = random(0.4, 0.7);
activeColor = lerpColor(color(c1), color(c2), number);
} else {
console.log(
"Pick a color 1 and color 2 by holding 'o' or 'p' and clicking a pixel on the screen"
);
}
}
Leave a comment
Log in with itch.io to leave a comment.