Paint Doodler Project

Introduction

Paint doodler is based on html5 canvas and is purely java script driven. Doodle Paint is a full featured painting, drawing and image editing platform providing users with versatile collection of tools and enabling users to contribute to ever growing community of doodlers with new features through plug-in.
Paint Doodler project wiki can be found at https://sites.google.com/site/projectpaintdooler/

The Purpose (Mission)

• Bring together people to create Drawing and Image Editing Platform. 
• Provide interface to share different drawing and image editing items. 

What can shared on this platform

• Absolutely anything 
• Background images, characters, textures, patterns, drawing stencils etc 
• HTML 5 canvas java script code through plugin with new filters drawing style etc 

This is how our organisation will gain.

• Wide variety of items to choose. 
• Every body gains from the rich knowledge,creativity and expertise of the fellow contributor 
• Free to use for all. 

How to Join

Joining paint doodler is very easy. Simply join the PaintDoodler Google Group at https://groups.google.com/forum/#!forum/paintdoodler.
Help for how to join the Google Groups can be found at https://support.google.com/groups/answer/1067205?hl=en

How to share your contribution

In order to share your contribution sign to the wiki page https://sites.google.com/site/projectpaintdooler/ after joining the google groups and follow the following simple steps

• Add a file/contribution   using the page Files
• Add a post using Project updates to link the files and provide necessary information. 

In order to link file to the post go to the files page right click the download file hyper link and select "Copy link address" and add it to your post.

Recent project updates will appear on the right hand bottom corner of Paint Doodler App

Is the usage of paint doodler app free

Yes Paint doodler app is free to use for all as long as the application can enough for hosting costs. At the moment application is using free services from Google.

Plugin Development Tutorial List

Tutorials

http://paindoodlerplugindev.blogspot.co.uk/2013/05/overview.html
http://paindoodlerplugindev.blogspot.co.uk/2013/09/adding-plugin-for-static-canvas.html

This post is part of series plugin development tutorial series for Paint Doodler app.

This is the official blog for paint doodler app
Online painting,drawing and image editing platform . paint doodler is based html5 canvas and is purely java script diven
Doodle Paint is a full featured painting and image editing platform providing users with versatile collection of tools and enabling users to contribute to ever growing community of doodlers with new features through plug-in.
visit - http://www.paintdoodler.com/

How to edit images on paint doodler - Image Adjustment, Filters, Textures, Noise, Light source

 Overview

Paint Doodler App has wide variety of filters, image adjustment patterns and textures noise and light sources. It is difficult to demonstrate them individually but they work on same principal i.e either on whole image or a portion of image. Following are the basic steps involved while using any of the features

Prerequisite

1. Basic understanding of paint doodler interface http://paintdoodler.blogspot.co.uk/p/paint-doodler-user-interface.html
2. Basic understanding of the paint doodler drawing layer architecture  http://paintdoodler.blogspot.co.uk/p/layer.html
3. How to select image on paint doodler http://paintdoodler.blogspot.co.uk/p/image-selection.html
4. Description on Image Manipulation http://paintdoodler.blogspot.co.uk/p/image-manipulation.html
5. For tutorials visit http://paintdoodler.blogspot.co.uk/2013/05/index.html

Setup Steps

1. Logon to paint doodler website by opening http://www.paintdoodler.com  in your browser. Login by clicking Facebook,Twitter, or Google + icons on the home page. You will be presented with a screen. showing text "The Paint Doodlder is Loading. Please visit some of the tutorials below while it loads..." followed by "Paint Doodler is Ready Click here to continue". Click on this text to start working on the app.
2. Ensure that static canvas is the topmost canvas layer. Image manipulation are performed only on top static canvas layer. 

Steps to perform image transformation

Image transformation can be broken down into three steps

1. Image Selection
• Following toolbar icons can be used for image selection



Polygon,Triangle,Circle and Rectangle

• Please visit the tutorial for image selection at http://paintdoodler.blogspot.co.uk/p/image-selection.html for detail 
2. Select from menu item appropriate adjustment or filter tool.
3. Set appropriate options from the control menu.
4. Click on the apply filter icon on tool controls.  

   

   Apply Filter

Filters 

Noise  

Procedural Noise - In order to apply noise to the drawing from the menu items choose Fiters->Noise.   These noise patterns are applied to different aspects of color i.e hue, saturation and alpha. Over 10 different noise patterns are available. Sample output of applying same type of pattern on a image is shown below

Noise applied on alpha value

Noise applied on the saturation value

Noise applied on the luminosity

• Light Source - Paint doodler allows user to apply light affects of varied intensity and spread. Define your light source using one of the image selector or choose default. In order to apply light source select from Menu Filters->Noise->LightSource and choose intensity and spread.

  

  Light source with different image selector. High Intensity High Spread.

Others

Description of some of the filters can be found at http://paintdoodler.blogspot.co.uk/p/image-manipulation.html

Adjustment

Description of some of the adjustments can be found at http://paintdoodler.blogspot.co.uk/p/image-manipulation.html

Patterns

Patterns are applied by blending the pattern image with the drawing image. You can also use you own pattern by choosing from menu Patterns-> mine and selecting a pattern file on your local file system. There are over 30 patterns available on paindoodler app. A sample pattern could enhance the image as shown below

Pattern - Cloth Blue

Textures

Textures are applied by changing the  alpha attribute of drawn image using a textured image . You can also use you own pattern by choosing from menu Patterns-> mine and selecting a texture file on your local file system. There are over 20 textures available on paindoodler app. A sample texture could enhance the image as shown below

Texture -Scratch

Notes

1. 1. If no image selectors is used then adjustment is appplied on whole image.
   2. In order to remove image selectors click on the reset icon in tool box

      

      reset  tool

   3. In order to use image editing on drawing created  using the dynamic tools described above  you would need to merge the dynamic with top most static canvas. Please refer to the blog post on merging canvas at http://paintdoodler.blogspot.co.uk/2013/06/how-to-merge-canvas-on-paint-doodler.html 

   

   Dynamic Tools - Line, Bezier Curve, Polygon, Rectangle, Triangle, Circle,  Image
   

   
   

Paint Doodler Change Background

Prerequisite

1. Basic understanding of paint doodler interface http://paintdoodler.blogspot.co.uk/p/paint-doodler-user-interface.html
2. For tutorials visit http://paintdoodler.blogspot.co.uk/2013/05/index.html

Steps

1. Logon to paint doodler website by opening http://www.paintdoodler.com  in your browser. Login by clicking Facebook,Twitter, or Google + icons on the home page. You will be presented with a screen. showing text "The Paint Doodlder is Loading. Please visit some of the tutorials below while it loads..." followed by "Paint Doodler is Ready Click here to continue". Click on this text to start working on the app.
2. Go to Menu item Image->Canvas to manage canvas.
3. Change Canvas size, grid space and background using tool control options below the menu items as demonstrated in the video.
4. To change the grid space eneter a numeric value in the text box next to "Grid Space".  
5. To change grid color select a color from the color input next to grid space. 
6. To remove grids remove the numeric value from the grid space text box or set it to 0.
7. To change background color select background color and choose appropriate color from the color input.
8. To make background transparent select Transparent option from the drop down.

Notes

1.  You must click on an adjacent textbox to apply changes.
2. All measurements are in pixel.
3. Paint doodler canvas is bottom most layer. Grid space and grid color are moved when saving the image.
4. Image can be saved by choosing menu File-> Save. All canvas layers will be merged from top to bottom. In order save to hard disk right click the generated image and choose "save image as".

How to use pen and brush on paint doodler

Prerequisite

1. Basic understanding of paint doodler interface http://paintdoodler.blogspot.co.uk/p/paint-doodler-user-interface.html

2. For tutorials visit http://paintdoodler.blogspot.co.uk/2013/05/index.html

Setup Steps

1. Logon to paint doodler website by opening http://www.paintdoodler.com  in your browser. Login by clicking Facebook,Twitter, or Google + icons on the home page. You will be presented with a screen. showing text "The Paint Doodlder is Loading. Please visit some of the tutorials below while it loads..." followed by "Paint Doodler is Ready Click here to continue". Click on this text to start working on the app.
2. Select appropriate color from the color input box from the tool box.  Color box can be found at the bottom of the tool box.
3. To start using brush choose following Brush tool icon from the tool Box.
4. To start using pencil choose Pencil tool icon from the tool Box.

Brush Tool

Pencil Tool

Brush Tool Options and Steps

On choosing brush tool you are presented with following options in tool controls under menu.

1. Brush Select box- This option allows you to choose various types of brush shapes 
• Round
• Square
• Free Hand - When choosing this option you have an additional option of select brush length
• Tube - This option is quite useful when you are trying to draw hair, grass etc. It uses Bézier curve to draw tube like structure along the stroke path.
2. Opacity - This allows to choose the transparency level of the stroke. Opacity 100 means brush stoke is opaque. Opacity 0 means that brush stoke is completely transparent.
3. Softness - This creates soft brush edges by creating a color gradient. Softness 0 mean that brush edges are of the same color as center of the brush. 100 means that brush edges are more transparent than the centre.
4. Size - This helps in setting the size of the brush.
5. Fill - You can apply texture (over 30), patterns(30) or create a stroke using stencils(over 10). You can select stencils, patterns and textures from your local file system. Stencil must have white background. Pattern and textures do not have any such limitation. Images used for patterns are blended with drawing. Images used for textures are applied over the draw transparency level of textures.
6. To select local textures, patterns from local file system choose fill type from control menu. Make sure you must select none from the select option next to fill type. Use select file input to choose local image.

   

   Sample Pattern Image

   
   

   

   Sample Texture Image

   

   Sample Stencil Image

7. Flow- This helps in setting the distance between brush impressions.
8. Brush Type - Dry or wet . You can create a dry or wet brush effect using this option.
9. See below for some of the brush strokes created on the paint doodler app.   

Pencil Tool Options and Steps

1. Pencil Select box- This option allows you to choose various types of drawing styles
• Ribbon
• Circle
• Fur
• Grid
• Long Fur
• Shaded
• Simple
• Sketchy
• Squares
• Chrome
• Web
2. Opacity - This allows to choose the transparency level of the stroke. Opacity 100 means brush stoke is opaque. Opacity 0 means that brush stoke is completely transparent.
3. Softness - This creates soft brush edges by creating a color gradient. Softness 0 mean that brush edges are of the same color as center of the brush. 100 means that brush edges are more transparent than the centre.
4. Size - This helps in setting the size of the brush.
5. Fill - You can apply texture (over 30), patterns(30) or create a stroke using stencils(over 10).
6. See below for some of the brush strokes created on the paint doodler app.   

Notes

1.  You must click on an adjacent textbox to apply changes.
2. All measurements are in pixel.
3. Pen and brush tools can be used only on static canvas please visit http://paintdoodler.blogspot.co.uk/2013/04/overview.html for brief description on canvas. 
4. Image can be saved by choosing menu File-> Save. All canvas layers will be merged from top to bottom. In order save to hard disk right click the generated image and choose "save image as".

How to merge canvas on paint doodler

Prerequisite

1. Basic understanding of paint doodler interface http://paintdoodler.blogspot.co.uk/p/paint-doodler-user-interface.html
2. Basic understanding of the paint doodler layer architecture  http://paintdoodler.blogspot.co.uk/p/layer.html
3. For tutorials visit http://paintdoodler.blogspot.co.uk/2013/05/index.html

Setup Steps

1. Logon to paint doodler website by opening http://www.paintdoodler.com  in your browser. Login by clicking Facebook,Twitter, or Google + icons on the home page. You will be presented with a screen. showing text "The Paint Doodlder is Loading. Please visit some of the tutorials below while it loads..." followed by "Paint Doodler is Ready Click here to continue". Click on this text to start working on the app.

Merge Up

Select the appropriate canvas layer from the navigator. Click on Layer|Merge With Top to merge selected to the canvas layer with top layer. Select appropriate merge option from the tool control option.

Following options are available to merge

Merge All

Click on Layer|Merge All to merge selected to the canvas layer with top layer. Select appropriate merge option from the tool control option. 

Notes

1. Canvas layers can be found under Navigator-> Layer tab. Canvas layer that is at the bottom is the top most layer.
2. Merge operation can be performed on static canvas i.e. underlying or source canvas can be either static or dynamic canvas but destination canvas must be a static canvas.

How to save image on paint doodler

Prerequisite

1. Basic understanding of paint doodler interface http://paintdoodler.blogspot.co.uk/p/paint-doodler-user-interface.html
2. Basic understanding of the paint doodler drawing layer architecture  http://paintdoodler.blogspot.co.uk/p/layer.html
3. For tutorials visit http://paintdoodler.blogspot.co.uk/2013/05/index.html

Setup Steps

1. Logon to paint doodler website by opening http://www.paintdoodler.com  in your browser. Login by clicking Facebook,Twitter, or Google + icons on the home page. You will be presented with a screen. showing text "The Paint Doodlder is Loading. Please visit some of the tutorials below while it loads..." followed by "Paint Doodler is Ready Click here to continue". Click on this text to start working on the app.

Steps to save image

1. From the file menu chose save. All the layers including background are merged into a single image.
2. Right click the generated and choose "Save Image As"  to save it to hard disk. File dialog will allow user to save image in png format.

Notes

1. Background is considered as bottom most drawing layer and  all the rest drawing layer are ordered as per the  order shown on navigator-> layers tab.
2. While merging the canvas source over merge option is used. Please refer tutorial on merge option at http://paintdoodler.blogspot.co.uk/p/layer.html