Smooth Strokes

blyk

HI, can anyone help me to create a continuous stroke like as shown in this picture for a drawing application ? I have tried lines and ellipse nothing worked. I think it can only be possible using curves but I don't know where to start.

GoToLoop

Only thing I've got close is this online example: #-o
http://studio.processingtogether.com/sp/pad/export/ro.9ZSvPnI4AVjwR/latest

blyk

GoToLoop Thanks a lot :) You are the one who always help me in my eleventh hour :)

Can I make it smooth as shown in the picture ?

GoToLoop

At the top, there's a constant called SCALE. Try changing that to 1. Dunno how smooth it's gonna get though! 8->

blyk

The line is not getting smoother it just getting thinner so I tried adding strokeWeight based on the X movement which revealed that strokes are not smooth :-??

/* built with Studio Sketchpad: 
 *   http://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   http://studio.sketchpad.cc/sp/pad/view/ro.Wxsib$lHXuL/rev.4
 * 
 * authors: 
 *   GoToLoop

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   http://creativecommons.org/licenses/by-sa/3.0/ 
 */



/**
 * Free Drawing (v3.0)
 * by KingDragonRider
 * modders TFGuy44 & GoToLoop
 *
 * http://forum.processing.org/topic/how-to-draw-lines-without-using-any-line-functions
 * http://studio.processingtogether.com/sp/pad/export/ro.9ZSvPnI4AVjwR/latest
 */

PGraphics pg;
color c;

final static int SCALE = 1;

void setup() {
  size(600, 600);
  noLoop();

  pg = createGraphics(width/SCALE, height/SCALE, JAVA2D);

  pg.beginDraw();
  pg.smooth();
  pg.background(0);
  pg.endDraw();

  mousePressed();
} 

void draw() {
  scale(SCALE);
  image(pg, 0, 0);
}

void mousePressed() {
  if (mouseButton == CENTER)   pg.background(c);

  //c = (color) random(#000000);               // Java
  c = (int) random(0x1000000) | #000000;       // JS

  mouseMoved();
}

void mouseMoved() {
  pg.stroke(c);
  pg.strokeWeight( abs(pmouseX-mouseX));
  pg.line(mouseX/SCALE, mouseY/SCALE, pmouseX/SCALE, pmouseY/SCALE);
  pg.endDraw();

  redraw();
}

GoToLoop

Perhaps smooth(4); can help out a lil'? :-/
More specifically -> pg.smooth(4);

There're also strokeCap() & strokeJoin(). ~O)

blyk

no effect :( even I have tried smooth 20 both places in setup() and mouseMoved()

    pg.smooth(20);
    pg.stroke(c);
    pg.strokeWeight( abs(pmouseX-mouseX));
    pg.line(mouseX/SCALE, mouseY/SCALE, pmouseX/SCALE, pmouseY/SCALE);
    pg.endDraw();