dribnet/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    magnify
This sketch was written by kyle mcdonald
and taken from the p5.js home page. It was
subsequently modified over several commits
by dribnet.

  
## index.html
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.1/p5.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <style> body {padding: 0; margin: 0;} </style>
</head>

<body style="background-color:white">
</body>

## preview.png

      
    Raw
  

              preview.png
            
          
## sketch.js
var speed = .00004;
var n = 30;
var grid = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
  var spacing = min(width, height) / n;
  for(var y = 0; y < height; y += spacing) {
    for(var x = 0; x < width; x += spacing) {
      grid.push(createVector(x, y));
    }
  }
}

function draw() {
  var a = map(cos(millis() * speed * 10), -1, 1, 20, 100);
  background(255, a);

  var control = [];
  var mouse_control = null;
  for(var i = 0; i < 5; i++) {
    var x = width * noise(i*2 + 0, millis() * speed);
    var y = height * noise(i*2 + 1, millis() * speed);
    var v = createVector(x, y);
    if(i == 0) {
      x = mouseX;
      y = mouseY;
      var v = createVector(x, y);
      mouse_control = v;
    }
    else {
      var v = createVector(x, y);
    }
    control.push(v);
    // ellipse(v.x, v.y, 10, 10); // draw centers
  }

  noStroke();

  var range = min(width, height) / 3;
  var zoom = range / 4;

  grid.forEach(function (v) {
    var total_mouse_push = 0;
    var vv = v.copy();
    control.forEach(function (c) {
      var difference = p5.Vector.sub(v, c);
      var length = difference.mag();
      difference.div(length);
      if(length < range) {
        var amt = map(cos(map(length, 0, range, 0, TWO_PI)), 1, -1, 0, zoom);
        vv.add(difference.mult(amt));
        if (c === mouse_control) {
          total_mouse_push = total_mouse_push + amt;
        }
      }
    })
    if(total_mouse_push > 10) {
      fill(160,20,20, 220);
      ellipse(vv.x, vv.y, 4, 4);
    }
    else {
      fill(112,128,132, 150);
      ellipse(vv.x, vv.y, 2, 2);
    }
  });
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.1/p5.js"></script>
	<script language="javascript" type="text/javascript" src="sketch.js"></script>
	<style> body {padding: 0; margin: 0;} </style>
	</head>

	<body style="background-color:white">
	</body>
	var speed = .00004;
	var n = 30;
	var grid = [];

	function setup() {
	createCanvas(windowWidth, windowHeight);
	var spacing = min(width, height) / n;
	for(var y = 0; y < height; y += spacing) {
	for(var x = 0; x < width; x += spacing) {
	grid.push(createVector(x, y));
	}
	}
	}

	function draw() {
	var a = map(cos(millis() * speed * 10), -1, 1, 20, 100);
	background(255, a);

	var control = [];
	var mouse_control = null;
	for(var i = 0; i < 5; i++) {
	var x = width * noise(i2 + 0, millis() speed);
	var y = height * noise(i2 + 1, millis() speed);
	var v = createVector(x, y);
	if(i == 0) {
	x = mouseX;
	y = mouseY;
	var v = createVector(x, y);
	mouse_control = v;
	}
	else {
	var v = createVector(x, y);
	}
	control.push(v);
	// ellipse(v.x, v.y, 10, 10); // draw centers
	}

	noStroke();

	var range = min(width, height) / 3;
	var zoom = range / 4;

	grid.forEach(function (v) {
	var total_mouse_push = 0;
	var vv = v.copy();
	control.forEach(function (c) {
	var difference = p5.Vector.sub(v, c);
	var length = difference.mag();
	difference.div(length);
	if(length < range) {
	var amt = map(cos(map(length, 0, range, 0, TWO_PI)), 1, -1, 0, zoom);
	vv.add(difference.mult(amt));
	if (c === mouse_control) {
	total_mouse_push = total_mouse_push + amt;
	}
	}
	})
	if(total_mouse_push > 10) {
	fill(160,20,20, 220);
	ellipse(vv.x, vv.y, 4, 4);
	}
	else {
	fill(112,128,132, 150);
	ellipse(vv.x, vv.y, 2, 2);
	}
	});
	}