Skip to content

Instantly share code, notes, and snippets.

@mcglincy
Last active January 2, 2016 15:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mcglincy/8323865 to your computer and use it in GitHub Desktop.
Save mcglincy/8323865 to your computer and use it in GitHub Desktop.
Hand-drawn Rectangles in Processing

Hand-drawn Lines

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<canvas data-processing-sources="processing.pde"></canvas>
void setup() {
size(400, 400);
smooth();
}
void ftline( float x1, float y1, float x2, float y2 ) {
beginShape();
vertex( x1 + random(-2,2), y1 + random(-2,2));
curveVertex( x1 + random(-2,2), y1 + random(-2,2));
curveVertex( x1 + (x2-x1)/3 + random(-2,2), y1 + (y2-y1)/3 + random(-2,2));
curveVertex( x1 + 2*(x2-x1)/3 + random(-2,2), y1 + 2*(y2-y1)/3 + random(-2,2));
curveVertex( x2 + random(-2,2), y2 + random(-2,2));
vertex( x2 + random(-2,2), y2 + random(-2,2));
endShape();
beginShape();
vertex( x1 + random(-1,1), y1 + random(-1,1));
curveVertex( x1 + random(-1,1), y1 + random(-1,1));
curveVertex( x1+(x2 -x1)/3 + random(-1,1), y1 + (y2-y1)/3 + random(-1,1));
curveVertex( x1+2*(x2-x1)/3 + random(-1,1), y1+ 2*(y2-y1)/3 + random(-1,1));
curveVertex( x2 + random(-1,1), y2 + random(-1,1));
vertex( x2 + random(-1,1), y2 + random(-1,1));
endShape();
}
void ftrect( float x1, float y1, float w, float h ) {
ftline( x1, y1, x1, y1 + h );
ftline( x1, y1, x1 + w, y1 );
ftline( x1+w, y1, x1+w, y1+h );
ftline( x1, y1+h, x1+w, y1+h );
}
void draw() {
randomSeed(1024);
background(235,215,182);
ftrect(10, 10, 200, 50);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment