A Paint App In 25 Written Js Lines
Tags: p5js, javascript, canvastheory, processinglanguage
Published: 2019-02-16 11:35:41

---
title: A Paint App In 25 Written Js Lines
published: true
description: a p5js exploration
tags: p5js, javascript, canvastheory, processinglanguage
cover_image: https://i.ibb.co/T4cN17Q/david-pisnoy-660309-unsplash.jpg
---

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

```html
<!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](https://thepracticaldev.s3.amazonaws.com/i/j3xlpjloa549axoxvyhs.png)

## 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


```html
...
<script>
function setup(){

}

function draw(){

}
</script>
...

```

## Size and Background

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

}
</script>
...

```
gives us this

![alt text](https://thepracticaldev.s3.amazonaws.com/i/1yl8j9r64w407529e5t3.png)

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 

```javascript
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
```javascript
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

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

```
we get
![alt text](https://thepracticaldev.s3.amazonaws.com/i/zs5xaebzv9j1hffgsog5.png)

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

## Our Display Button Function

add the display button function before the setup function

```javascript
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
```javascript
displayButton('orange', 100, 100);

```
gives us

![alt text](https://thepracticaldev.s3.amazonaws.com/i/1ak3kwxivq6qvakrkpl9.png)

here's some explanations

![alt text](https://thepracticaldev.s3.amazonaws.com/i/nbyxtdw6e7554myohptm.png)

## Displaying Buttons

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

```
some annotations

![alt text](https://thepracticaldev.s3.amazonaws.com/i/m3d81xqc9pr1pv59dobe.png)

which gives us

![alt text](https://thepracticaldev.s3.amazonaws.com/i/fe5kpfmawrbggfx9f6ux.png)

## Now Drawing

drawing is achieved using (in our draw function)

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

```
## Our Full Code

```html
<!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](https://thepracticaldev.s3.amazonaws.com/i/cczo7xh4n0psrxlxyonr.gif)

## Wrapping Up

Processing is easy, Any question just ping!

img credit: David Pisnoy on Unsplash