raphaelschaad/shantell.html

## shantell.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.min.js"></script>
<script>

// Draw curves by dragging the mouse
// Raphael Schaad, 2016-03-19

// Note: inspired by the excellent active essay, Back to the Future of Handwriting Recognition,
// I think it could be interesting to do some smoothing/thinning/processing of the gestures.
// http://jackschaedler.github.io/handwriting-recognition/

"use strict";

var strokes = []; // contains arrays that contain Vectors
var currentStrokeIndex = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);

  colorMode(RGB, 1);
  fill(0.5);
  noStroke();
  textSize(42);
  textAlign(CENTER);
}

function draw() {
  background(0.97);

  push();
  {
    fill(0.9);
    text("«Eine Linie ist ein Punkt,\nder spazieren geht.»\n–Paul Klee", width/2, height/2);
  }
  pop();

  for (var i = 0; i < strokes.length; i++) {
    var s = strokes[i];
    push();
    {
      var r = 3;
      for (var j = 0; j < s.length; j++) {
        var p = s[j];
        // default mode: center(x,y), w, h
        ellipse(p.x, p.y, 2*r, 2*r);
      }
    }
    pop();

    push();
    {
      noFill();
      stroke(.1);
      beginShape();
        for (var j = 0; j < s.length; j++) {
          var p = s[j];
          curveVertex(p.x, p.y);
          // "The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve.
          // A minimum of four points is required to draw a tiny curve between the second and third points."
          // http://p5js.org/reference/#/p5/curveVertex
          if (j == 0 || j == s.length - 1) {
            curveVertex(p.x, p.y);
          }
        }
      endShape();
    }
    pop();
  }
}

function mousePressed() {
  strokes[currentStrokeIndex] = [createVector(mouseX, mouseY)];
}

function mouseReleased() {
  currentStrokeIndex++;
}

function mouseDragged() {
  strokes[currentStrokeIndex].push(createVector(mouseX, mouseY));
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.min.js"></script>
	<script>

	// Draw curves by dragging the mouse
	// Raphael Schaad, 2016-03-19

	// Note: inspired by the excellent active essay, Back to the Future of Handwriting Recognition,
	// I think it could be interesting to do some smoothing/thinning/processing of the gestures.
	// http://jackschaedler.github.io/handwriting-recognition/

	"use strict";

	var strokes = []; // contains arrays that contain Vectors
	var currentStrokeIndex = 0;

	function setup() {
	createCanvas(windowWidth, windowHeight);

	colorMode(RGB, 1);
	fill(0.5);
	noStroke();
	textSize(42);
	textAlign(CENTER);
	}

	function draw() {
	background(0.97);

	push();
	{
	fill(0.9);
	text("«Eine Linie ist ein Punkt,\nder spazieren geht.»\n–Paul Klee", width/2, height/2);
	}
	pop();

	for (var i = 0; i < strokes.length; i++) {
	var s = strokes[i];
	push();
	{
	var r = 3;
	for (var j = 0; j < s.length; j++) {
	var p = s[j];
	// default mode: center(x,y), w, h
	ellipse(p.x, p.y, 2r, 2r);
	}
	}
	pop();

	push();
	{
	noFill();
	stroke(.1);
	beginShape();
	for (var j = 0; j < s.length; j++) {
	var p = s[j];
	curveVertex(p.x, p.y);
	// "The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve.
	// A minimum of four points is required to draw a tiny curve between the second and third points."
	// http://p5js.org/reference/#/p5/curveVertex
	if (j == 0 \|\| j == s.length - 1) {
	curveVertex(p.x, p.y);
	}
	}
	endShape();
	}
	pop();
	}
	}

	function mousePressed() {
	strokes[currentStrokeIndex] = [createVector(mouseX, mouseY)];
	}

	function mouseReleased() {
	currentStrokeIndex++;
	}

	function mouseDragged() {
	strokes[currentStrokeIndex].push(createVector(mouseX, mouseY));
	}

	function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
	}

	</script>
	</body>
	</html>