xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/addons/p5.dom.min.js"></script>
<style id="jsbin-css">
#container {
background-color: #cccccc;
padding: 16px 16px 40px 16px;
}
#canvas {
border: 1px solid #555;
}
#sliders {
background-color: #fff;
padding: 8px;
margin: 8px;
}
</style>
</head>
<body>
<div id="container">
<div id="canvas"></div>
<div id="sliders"></div>
</div>
<script id="jsbin-javascript">
var slider;
var nodes = [];
var isPainting = false;
var prev;
var time = 0;
var tinc = 0.5;
function setup() {
var canvas = createCanvas(540, 400);
canvas.parent('canvas');
slider = createSlider(1, 100, 20);
slider.parent('sliders');
var clear = createButton('Clear');
clear.parent('sliders');
clear.mousePressed(function() {background(255); nodes=[];});
//background(255);
prev = millis();
}
function draw() {
background(255);
speed = slider.value() * 2;
noFill();
stroke(40, 180);
strokeWeight(0.8);
beginShape();
for (var i = 0; i < nodes.length; i++) {
curveVertex(nodes[i].x, nodes[i].y);
ellipse(nodes[i].x, nodes[i].y, 8, 8);
}
endShape();
jitter();
}
function mouseDragged() {
if (millis() - prev > speed) {
if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
var n = createVector(mouseX, mouseY);
nodes.push(n);
prev = millis();
}
}
}
function jitter() {
for (var i = 0; i < nodes.length; i++) {
var offx = map(noise(time), 0, 1, -1, 1);
time += tinc;
var offy = map(noise(time), 0, 1, -1, 1);
time += tinc;
nodes[i].x += offx;
nodes[i].y += offy;
}
}
</script>
<script id="jsbin-source-css" type="text/css">#container {
background-color: #cccccc;
padding: 16px 16px 40px 16px;
}
#canvas {
border: 1px solid #555;
}
#sliders {
background-color: #fff;
padding: 8px;
margin: 8px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var slider;
var nodes = [];
var isPainting = false;
var prev;
var time = 0;
var tinc = 0.5;
function setup() {
var canvas = createCanvas(540, 400);
canvas.parent('canvas');
slider = createSlider(1, 100, 20);
slider.parent('sliders');
var clear = createButton('Clear');
clear.parent('sliders');
clear.mousePressed(function() {background(255); nodes=[];});
//background(255);
prev = millis();
}
function draw() {
background(255);
speed = slider.value() * 2;
noFill();
stroke(40, 180);
strokeWeight(0.8);
beginShape();
for (var i = 0; i < nodes.length; i++) {
curveVertex(nodes[i].x, nodes[i].y);
ellipse(nodes[i].x, nodes[i].y, 8, 8);
}
endShape();
jitter();
}
function mouseDragged() {
if (millis() - prev > speed) {
if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {
var n = createVector(mouseX, mouseY);
nodes.push(n);
prev = millis();
}
}
}
function jitter() {
for (var i = 0; i < nodes.length; i++) {
var offx = map(noise(time), 0, 1, -1, 1);
time += tinc;
var offy = map(noise(time), 0, 1, -1, 1);
time += tinc;
nodes[i].x += offx;
nodes[i].y += offy;
}
}</script></body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/p5.min.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.16/addons/p5.dom.min.js