DEV Community

Cover image for A Paint App In 25 Written Js Lines
Abdur-Rahmaan Janhangeer
Abdur-Rahmaan Janhangeer

Posted on

A Paint App In 25 Written Js Lines

A paint app easily, using p5js. And some p5js info in case you are new to it!

Explaining The Title

Well why i put written ?

Simply because In 25 JS Lines is not true as you'd say well, p5js has 1000+ lines, so your whole program is 1000+ lines.

Why i put Js ?

That's because it's in an HtML page, and ... i specify we're talking about Js.

Let us begin!

The Skeleton To Set You Up

<!DOCTYPE html>
<html>
    <head>
        <title>Paint App</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
        <script>
            // we'll write our codes here
        </script>
    </head>
    <body>
    </body>
</html>

some info for you

alt text

Processing Intro

Processing has two main functions, the setup and the draw function

The setup function contains initialisations and the draw function contains what we'd like to update

...
<script>
function setup(){

}

function draw(){

}
</script>
...

Size and Background

...
<script>
function setup(){
    createCanvas(windowWidth-50, windowHeight-50);
    background(200);
}
function draw(){

}
</script>
...

gives us this

alt text

the two arrows are showing us that some spaces were left out due to us specifying -50. I did that so that the page does not scroll

background(200); actually tells to colour the background gray. 0 for black, 255 for white, 200 is somewhere in between

the real way is

background(200, 200, 200);

which stands for red blue green in the same amount

Colours And Global Variable

let us add our two global variables, selectedColour before draw

var colours = ['red', 'blue', 'yellow', 'green', '#fdf'];
var selectedColour = 'red';

specifying an array allows us to change available options easily. notice that we can pass in normal css colours here (#fdf)

selectedColour means that as we draw, we draw in only one colour. changing that colour changes brush colour. we need only to change that variable on button click.

The Trick We'll Be Using

let us add those in our draw function

function draw(){
    fill(selectedColour);
    ellipse(mouseX, mouseY, 30, 30);
}

we get
alt text

that's because there are no background in our draw function

Our Display Button Function

add the display button function before the setup function

function displayButton(col, x, y){
    noStroke();
    fill(col);
    ellipseMode(CENTER);
    ellipse(x, y, 40, 40);
    if(dist(x, y, mouseX, mouseY) < 40/2 && mouseIsPressed){
        selectedColour = col;
    }
}

one usage of it in the draw function

displayButton('orange', 100, 100);

gives us

alt text

here's some explanations

alt text

Displaying Buttons

in the draw function

    for (var i = colours.length - 1; i >= 0; i--) {
        var colour = colours[i];
        displayButton(colour, 30+i*50, 50);
    }

some annotations

alt text

which gives us

alt text

Now Drawing

drawing is achieved using (in our draw function)

    if(mouseIsPressed){
        fill(selectedColour);
        ellipse(mouseX, mouseY, 20, 20);
    }

Our Full Code

<!DOCTYPE html>
<html>
    <head>
        <title>Paint App</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
        <script>
function displayButton(col, x, y){
    noStroke();
    fill(col);
    ellipseMode(CENTER);
    ellipse(x, y, 40, 40);
    if(dist(x, y, mouseX, mouseY) < 40/2 && mouseIsPressed){
        selectedColour = col;
    }
}
function setup(){
    createCanvas(windowWidth-50, windowHeight-50);
    background(200);
}
var colours = ['red', 'blue', 'yellow', 'green', '#fdf'];
var selectedColour = 'red';
function draw(){
    for (var i = colours.length - 1; i >= 0; i--) {
        var colour = colours[i];
        displayButton(colour, 30+i*50, 50);
    }
    if(mouseIsPressed){
        fill(selectedColour);
        ellipse(mouseX, mouseY, 20, 20);
    }
}
        </script>
    </head>
    <body>
    </body>
</html>

In Action

alt text

Wrapping Up

Processing is easy, Any question just ping!

img credit: David Pisnoy on Unsplash

Discussion (8)

Collapse
jameslivesey profile image
James Livesey

Great program in such a small amount of code! What would be nicer is to have less lag when drawing stuff! Maybe make it so that there is a line connecting the dots so if you draw really fast it still looks okay.

Collapse
abdurrahmaanj profile image
Abdur-Rahmaan Janhangeer Author

you can do it with line(prevMouseX, prevMouseY, mouseX, mouseY)

Collapse
jameslivesey profile image
James Livesey

Yeah, that'd make it work much nicer! 😉

Collapse
vitalipom profile image
Vitali Pomanitski

Thanks, thank you Abdur. I liked the simplicity, I wanted to make a paint app with a storage wall-kind of sql which will show what kind of stuff users made and I saw in your post what I wanted.

Collapse
abdurrahmaanj profile image
Abdur-Rahmaan Janhangeer Author

glad you liked it. ah that's a nice idea! if i remember i'll do a follow up post to add some functionalities to it.

Collapse
vitalipom profile image
Vitali Pomanitski

It's 100% great now, just for you to know. I wouldn't even bother :)

Collapse
leonthelion profile image
leon-thelion • Edited on

I followed all the steps but all I get is a gray screen...and since I had other lines in the html tab (I'm using p5.js), I deleted the other script lines that weren't on your image and now it says create canvas has no reference.

Collapse
abdurrahmaanj profile image
Abdur-Rahmaan Janhangeer Author

Hum a long time i've not used p5js since sometimes, maybe some update ...