xxxxxxxxxx
<html>
<head>
<meta name="description" content="polar rose curves">
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/addons/p5.dom.js"></script>
<style id="jsbin-css">
#container {
height: 408px;
width: 408px;
border: 1px solid #440044;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="jsbin-javascript">
// rose curves: r(t) = cos(kt)
var a, b;
var rad;
var inc;
function setup() {
var cvs = createCanvas(400, 400);
cvs.parent('container');
rad = width * 0.4;
noFill();
stroke(40);
strokeWeight(2);
}
function draw() {
background(250);
a = map(mouseX, 0, width, 1, 12);
b = map(mouseY, 0, height, 1, 12);
push();
translate(width / 2, height / 2);
beginShape();
for (var i = 0; i < 360; i++) {
var x = rad * sin(radians(a * i)) * sin(radians(b * i));
var y = rad * sin(radians(a * i)) * cos(radians(b * i));
curveVertex(x, y);
}
endShape();
pop();
}
</script>
<script id="jsbin-source-html" type="text/html">
<html>
<head>
<meta name="description" content="polar rose curves">
<script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"><\/script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/p5.min.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/addons/p5.dom.js"><\/script>
</head>
<body>
<div id="container"></div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">#container {
height: 408px;
width: 408px;
border: 1px solid #440044;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// rose curves: r(t) = cos(kt)
var a, b;
var rad;
var inc;
function setup() {
var cvs = createCanvas(400, 400);
cvs.parent('container');
rad = width * 0.4;
noFill();
stroke(40);
strokeWeight(2);
}
function draw() {
background(250);
a = map(mouseX, 0, width, 1, 12);
b = map(mouseY, 0, height, 1, 12);
push();
translate(width / 2, height / 2);
beginShape();
for (var i = 0; i < 360; i++) {
var x = rad * sin(radians(a * i)) * sin(radians(b * i));
var y = rad * sin(radians(a * i)) * cos(radians(b * i));
curveVertex(x, y);
}
endShape();
pop();
}</script></body>
</html>
Modified http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js to a secure url
Modified http://code.jquery.com/jquery-2.1.1.min.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/p5.min.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/addons/p5.dom.js to a secure url
https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js
https://code.jquery.com/jquery-2.1.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/p5.min.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/addons/p5.dom.js
https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js
https://code.jquery.com/jquery-2.1.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/p5.min.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.2/addons/p5.dom.js