How to create a Sketchbook (Drawing app)?

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

Answers

  • edited November 2016 Answer ✓

    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

  • 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.

  • edited November 2016 Answer ✓

    I wrote:

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

    see

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

  • 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?

  • edited November 2016

    @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().

  • edited November 2016

    @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?

  • Can you post your code please

  • 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();
    }
    
  • Answer ✓

    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

  • edited November 2016 Answer ✓

    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;
    }
    
  • @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

  • 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

  • edited November 2016

    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/

  • edited November 2016

    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).

  • Answer ✓

    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

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

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

  • oh, that's true

    I am so blind...

    ;-)

  • @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. :)

Sign In or Register to comment.