merttoka/index.html

## index.html
<!--
 Mouse Events
 LEFT CLICK:   draws in white
 RIGHT CLICK:  draws in color
 MIDDLE CLICK: draws in black

Touch Event:
 Drag: draws in white
-->

<html>
<head>
    <meta charset="UTF-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.js"></script>
	<script language="javascript" type="text/javascript">
	var elements = 64;

	function setup(){
	  //fullScreen();
	  createCanvas(960, 500);
	  background(0);
	  translate(width/2, height/2);

	  for(var i = 0; i < elements; i++){
		stroke(200, 30);

		var s = TWO_PI/elements*i;
		line(cos(s)*2,
			 sin(s)*2,
			 cos(s)*width/2,
			 sin(s)*width/2);
	  }
	}

	function draw(){
	  translate(width/2, height/2);

	  var x = touchX-width/2, y = touchY-height/2;

	  if(mouseIsPressed || touchIsDown)
	  {
		var c;
		var b;

		var v = createVector(x, y);
		var mag = v.mag();
		var degree = acos(v.normalize().dot(createVector(1,0)));
		if(y>0)
		  degree = TWO_PI-degree;

		var offset = degree % (TWO_PI/elements);

		if(mouseButton == LEFT || touchIsDown) {
		  b = 1+map(mag, 0, width/2, 0, 2);
		  c = color(200, 100);
		}
		else if (mouseButton == RIGHT){
		  b = 1+map(mag, 0, width/2, 0, 2);
		  c = color(random(255),random(255),random(255), 100);
		}
		else {
		  b = 3+map(mag, 0, width/2, 0, 7);
		  c = color(0);
		}

		for(var i = 0; i < elements; i++){
		  fill(c);
		  noStroke();

		  var s;
		  if(i%2==0)
			s = TWO_PI/elements*(i+1)-offset;
		  else
			s = TWO_PI/elements*i+offset;

		  ellipse(cos(s)*mag, sin(s)*mag, b, b);
		}
	  }
	}
	</script>

    <!-- this line removes any default padding and style. you might only need one of these values set. -->
    <style>
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>

</body>
</html>
	<!--
	Mouse Events
	LEFT CLICK: draws in white
	RIGHT CLICK: draws in color
	MIDDLE CLICK: draws in black

	Touch Event:
	Drag: draws in white
	-->

	<html>
	<head>
	<meta charset="UTF-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.js"></script>
	<script language="javascript" type="text/javascript">
	var elements = 64;

	function setup(){
	//fullScreen();
	createCanvas(960, 500);
	background(0);
	translate(width/2, height/2);

	for(var i = 0; i < elements; i++){
	stroke(200, 30);

	var s = TWO_PI/elements*i;
	line(cos(s)*2,
	sin(s)*2,
	cos(s)*width/2,
	sin(s)*width/2);
	}
	}

	function draw(){
	translate(width/2, height/2);

	var x = touchX-width/2, y = touchY-height/2;

	if(mouseIsPressed \|\| touchIsDown)
	{
	var c;
	var b;

	var v = createVector(x, y);
	var mag = v.mag();
	var degree = acos(v.normalize().dot(createVector(1,0)));
	if(y>0)
	degree = TWO_PI-degree;

	var offset = degree % (TWO_PI/elements);

	if(mouseButton == LEFT \|\| touchIsDown) {
	b = 1+map(mag, 0, width/2, 0, 2);
	c = color(200, 100);
	}
	else if (mouseButton == RIGHT){
	b = 1+map(mag, 0, width/2, 0, 2);
	c = color(random(255),random(255),random(255), 100);
	}
	else {
	b = 3+map(mag, 0, width/2, 0, 7);
	c = color(0);
	}

	for(var i = 0; i < elements; i++){
	fill(c);
	noStroke();

	var s;
	if(i%2==0)
	s = TWO_PI/elements*(i+1)-offset;
	else
	s = TWO_PI/elements*i+offset;

	ellipse(cos(s)mag, sin(s)mag, b, b);
	}
	}
	}
	</script>

	<!-- this line removes any default padding and style. you might only need one of these values set. -->
	<style>
	body {
	padding: 0;
	margin: 0;
	}
	</style>
	</head>

	<body>

	</body>
	</html>