How to create a Sketchbook (Drawing app)?

czelisa

Hi everyone,

I am pretty new to programming and I'm using p5 so it would be amazing if you could help me out. Basically I would like to create a drawing app, I've managed to create really simple drawing functions but I have a few questions and I'm not sure how to go about it. I know my questions aren't that specific yet - If you could just refer me to the right references to look at, that would help me a lot.

1. Would it be possible to have an image of a Sketchbook laying on a desk as my background and only let the user draw on the actual book (not the rest of the background)?

2. How can I create different drawing tools (like pen, pencil etc.) that can be activated by clicking on an icon/image.

3. Is it possible to let someone draw something and then add filters to it. (editing the finished drawing)

4. Is there a way of including buttons, that let someone share what they've drawn on the canvas on Twitter, Facebook etc.

Thanks a lot, Elisa

Chrisir

you need to break this down to single steps.

start by playing with the examples to get a little practice with coding:

https://www.processing.org/examples/pattern.html

https://www.processing.org/examples/continuouslines.html

To your four questions:

1. The Answer is yes

look at loadImage and image in the reference

then check with if if your mouse is inside the canvas part, only then allow drawing:

if (mouseX>canvasX && mouseY> canvasY &&
    mouseX<canvasLowerRightCornerX && mouseY< canvasLowerRightCornerY ) {
        // draw here 
}

2. you need to define clickable buttons like a tool bar

see here

https://www.processing.org/examples/mousefunctions.html

store which is your drawing color and your pen type when a button is pressed with the mouse.

when drawing act accordingly using different drawing colors and techniques as stored

actually, you might want to use a input library for that or you want to define multiple buttons in an array or even with a class.

3. yes. Either make a new sketch for that or invent a different state of the program (instead of stateDraw now stateEdit) that comes with a different tool bar etc.

4. dunno.

Chrisir

jeremydouglass

czelisa --

1. Once you have the continuous lines example as a drawing tool, you could also try line segments. Or brushes, as in this recent discussion of brushes.

2. Yes. The simplest example of a filter would be a button to turn on and off tint().

3. Yes -- see the embedded links example.

Chrisir

I wrote:

actually, you might want .... to define multiple buttons in an array or even with a class.

see

https://processing.org/tutorials/objects/

czelisa

To your four questions: 1. The Answer is yes look at loadImage and image in the reference then check with if if your mouse is inside the canvas part, only then allow drawing: 1 2 3 4 if (mouseX>canvasX && mouseY> canvasY && mouseX<canvasLowerRightCornerX && mouseY< canvasLowerRightCornerY ) { // draw here }<

Thanks for your help guys, I'll try it!

@Chrisir

About my first question. It seems like the mouse is drawing, but behind the background. At least I can't see the lines, once I start loading images as a background. Any ideas how to change that?

jeremydouglass

@czelisa -- from the background() reference

This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the backgound need only be set once.

You probably want to call the background command only once during setup().

czelisa

@jeremydouglass

Thanks a lot for helping me with my beginner questions :) that was the problem! The drawing works now, I have used mouseDragged. Wherever I start do draw (click and drag), it automatically draws a line from where the cursor was when I opened the window too and not just where I started click and drag. Why is that happening?

Chrisir

Can you post your code please

czelisa

Sure:

var img;

function preload(){
img = loadImage ('images/tisch.JPG');

}

function setup() {
    createCanvas(1200, 800);
    background (img);
    noLoop();
}

function draw()
{
}

function mouseDragged() 
{ 
    strokeWeight(10);
    line(mouseX, mouseY, pmouseX, pmouseY);
loop();
}

Chrisir

I guess set a boolean firsttime to false In setup

Set it to true in draw

Exec line21 of nly when the var is true

GoToLoop

http://p5ide.HerokuApp.com/editor#?sketch=5831eb9d67d01b04000f7523

/**
 * Drag Draw (v2.0.2)
 * by czElisa
 * mod GoToLoop (2016-Nov-20)
 *
 * forum.Processing.org/two/discussion/18989/
 * how-to-create-a-sketchbook-drawing-app#Item_10
 *
 * p5ide.HerokuApp.com/editor#?sketch=5831eb9d67d01b04000f7523
 */ 

"use strict";

const BOLD = 10, IMG_PATH = 'images/tisch.jpg';
let img;

function preload() {
  img = loadImage(IMG_PATH);
}

function setup() {
  //createCanvas(800, 600);
  createCanvas(img.width, img.height);

  strokeWeight(BOLD).stroke('red').blendMode(REPLACE);

  //background('black');
  background(img);
}

function mouseDragged() {
  line(mouseX, mouseY, pmouseX, pmouseY);
  return false;
}

czelisa

@Chrisir : Thank you, is this the right reference? https://p5js.org/reference/#/p5/boolean

@GoToLoop: could you please explain what you have done to the code? I am very new to coding. Thank you

Chrisir

Not quite - this is the conversion.

I meant the boolean type itself

Like there is a type int there is one for boolean

It can be true or false only

GoToLoop

Well, mostly nothing! :)) Just some tweaks, like change stroke() color. :\">
You need to be more specific on what exactly you didn't understand.

Remember everything above is found on the online reference: :-B
http://p5js.org/reference/

Chrisir

e.g. gotoloop inserted preload() which is very good.

reference says:

Called directly before setup(), the preload() function is used to handle asynchronous loading of external files. If a preload function is defined, setup() will wait until any load calls within have finished. Nothing besides load calls should be inside preload (loadImage, loadJSON, loadFont, loadStrings, etc).

Chrisir

you wrote:

Wherever I start do draw (click and drag), it automatically draws a line from where the cursor was when I opened the window too and not just where I started click and drag. Why is that happening?

I can't see that behavior when I run gotoloops sketch

http://p5ide.herokuapp.com/editor#?sketch=5831eb9d67d01b04000f7523

GoToLoop

e.g. GoToLoop inserted preload()...

No, I haven't. She did! ;;)

Chrisir

oh, that's true

I am so blind...

;-)

czelisa

@Chrisir and @GoToLoop: I was confused about the "use strict" but I just looked it up. :D thank you! just tried to run your code and I don't have the problem with the starting point anymore. :)