Concept: The concept comes from my favourite childhood cartoon Masha and Bear. I always loved how the bear’s room looked so cozy and peaceful in the cartoon. As I grew older, I noticed my younger brothers acting mischievously, much like Masha. In response, I found myself playing a protective role similar to the Bear’s in the series. So, I choose the bear as my concept for this assignment and tried to create a stylized portrait of the bear using basic 2D shapes in P5.js. While the result may not be an exact replica of the Bear, I tried to capture the essence of his character as seen in cartoon.
Highlight Code: One part of the code that I’m particularly proud of is the drawing of the bookshelf. It’s my first time working with Java and doing a full sketch on P5.js, so I had to go through quite a few tutorials from this channel to understand basics of the drawings. I tried to code the bookself using loops technique from this video. I calculated the positions of the shelves and books using variables and loops. This method allowed me to place multiple shelves and books at regular interval but I had to go through a lot of trials and errors so took me quite some time to figure out how to work with the perspective drawing in P5.js. On my first try, I tried to make a 2D bookshelf, but that didn’t look satisfactory so I added some depth in the drawing using beginShape(), vertex(), and endShape() functions to add some thickness on the sides and changed the fill() to create a contrast on the shadow and lighting. To express what I meant to portray I added one line of quote about books, I achieved this by using textStyle()and textAlign() functions.
Code:
function setup() {
createCanvas(600, 500);
setGradient(0, 0, width, height, color(255, 182, 193), color(255, 228, 225)); // Gradient background
drawHelloKitty(); //function that I am using to draw the main character
drawBookshelf();
}
function drawHelloKitty() {
noLoop();
noStroke();
// Draw face
stroke(0);
strokeWeight(0.2);
fill("rgb(252,245,225)");
ellipse(200, 200, 180, 180);
// Draw ears
fill('rgb(244,230,215)');
ellipse(120, 130, 70, 70); // Left ear
ellipse(280, 130, 70, 70); // Right ear
//inner ear color
fill(160, 82, 45); // Medium brown
ellipse(120, 130, 50, 50); // Left inner ear
ellipse(280, 130, 50, 50); // Right inner ear
// eyes
fill(0);
ellipse(170, 200, 22, 22); // Left eye
ellipse(230, 200, 22, 22); // Right eye
// Draw nose
fill(160, 82, 45); // Medium brown
ellipse(200, 230, 22, 18); // Nose
// Draw mouth
stroke(0);
strokeWeight(2);
noFill();
arc(200, 245, 50, 25, 0, PI); // Mouth
// Draw whiskers
stroke(0);
strokeWeight(2);
line(100, 200, 50, 190); // Left whisker 1
line(100, 210, 50, 210); //2
line(100, 220, 50, 230); //3
line(300, 200, 350, 190); // Right whisker 1
line(300, 210, 350, 210); //2
line(300, 220, 350, 230); //3
// Drawing body
fill(255, 0, 0);
stroke(0);
strokeWeight(2);
fill(160, 82, 45);
ellipse(200, 480, 260, 400);
stroke(0);
strokeWeight(2);
fill("rgb(250,204,109)")
rect(155, 270, 90, 100);
// hand details
fill('rgb(252,245,225)');
ellipse(140, 300, 70, 40); // Left hand
ellipse(260, 300, 70, 40); // Right hand
stroke(0);
strokeWeight(2);
// lines for left hand
line(140, 295, 170, 290); // First finger
line(140, 305, 173, 305);
line(140, 315, 165, 315);
// lines for right hand
line(228, 295, 265, 297); // First finger
line(225, 305, 265, 305);
line(240, 315, 266, 315);
}
function drawBookshelf() {
// Adjusted position of the bookshelf
const shelfX = 400;
const shelfY = 150;
const shelfWidth = 160;
const shelfHeight = 360;
const shelfThickness = 19;
// Draw the bookshelf
fill(150, 75, 0); // Wood color
rect(shelfX, shelfY, shelfWidth, shelfHeight); // Main body of the bookshelf
// Draw the shelves
fill(120, 60, 0); // Slightly darker wood color
for (let i = 1; i <= 5; i++) { // Adjusted to have more shelves
rect(shelfX, shelfY + i * 60, shelfWidth, shelfThickness); // Horizontal shelves
}
// Draw the sides for depth
fill(100, 50, 0); // Darker wood color for sides
beginShape();
vertex(shelfX, shelfY); // Top left corner
vertex(shelfX + 10, shelfY - 10); // Slightly to the right and up
vertex(shelfX + 10, shelfY + shelfHeight - 10); // Down to the bottom
vertex(shelfX, shelfY + shelfHeight); // Back to the bottom left corner
endShape(CLOSE);
beginShape();
vertex(shelfX + shelfWidth, shelfY); // Top right corner
vertex(shelfX + shelfWidth + 10, shelfY - 10); // Slightly to the right and up
vertex(shelfX + shelfWidth + 10, shelfY + shelfHeight - 10); // Down to the bottom
vertex(shelfX + shelfWidth, shelfY + shelfHeight); // Back to the bottom right corner
endShape(CLOSE);
// Draw the books
fill(200, 0, 0); // first row
drawBook(shelfX + 10, shelfY + 60, 40, 80);
drawBook(shelfX + 60, shelfY + 60, 40, 80);
drawBook(shelfX + 110, shelfY + 60, 40, 80);
fill(0, 200, 0); // second row
drawBook(shelfX + 10, shelfY + 130, 40, 80);
drawBook(shelfX + 60, shelfY + 130, 40, 80);
drawBook(shelfX + 110, shelfY + 130, 40, 80);
// a quote below the bookshelf
fill(0);
textSize(18);
stroke(0);
strokeWeight(0);
textFont('Arial');
textStyle(NORMAL);
textAlign(CENTER);
// Text lines
let line1 = "Read,";
let line2 = "Masha!";
// position of the quote
text(line1, width / 3, 320);
text(line2, width / 3, 340);
}
function drawBook(x, y, w, h) {
fill(255);
rect(x, y, w, h);
fill(0);
rect(x + 10, y, 20, h); //the book spine
}
function setGradient(x, y, w, h, c1, c2) {
noFill();
for (let i = y; i <= y + h; i++) {
let inter = map(i, y, y + h, 0, 1);
let c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x + w, i);
}
}
P5.js Sketch:
Reflection and ideas for future work or improvements:
I felt as a beginner I learnt a lot while doing this basic shape based portrait. From brainstorming to implementing, I changed some ideas, colors and techniques but at the end, I am pretty happy with this little drawing. However, there are areas for improvement and future exploration.
The bear doesn’t look or match with the bear color from the cartoon, so it can be enhanced by using different color pallets from rgb colors. The face shape of the bear can be refined a bit more with some curves to give a bear like feature. Interactivity can be added into this portrait to make it more appealing and fun. The color combination makes the brown color heavy on eyesight, it can be changed as well.