Skip to content

Instantly share code, notes, and snippets.

@eesur
Created July 23, 2015 20:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eesur/7b345becbd2d47e74a03 to your computer and use it in GitHub Desktop.
Save eesur/7b345becbd2d47e74a03 to your computer and use it in GitHub Desktop.
d3 | p5 canvas circles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 | p5 canvas circles</title>
<meta name="author" content="Sundar Singh | eesur.com">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.7/p5.min.js"></script>
</head>
<body>
<section id="vis"></section>
<script src="sketch.js" charset="utf-8"></script>
</body>
</html>
// this sketch is modified from:
// https://github.com/SciutoAlex/p5-D3-cookbook/tree/gh-pages/recipes-intermediate/individual-transitions
// to use/show rendering of shapes from data array
var custom,
// use d3 to create an array [0,1,2,3,4 ... 499];
data = d3.range(800),
randomColour;
function setup() {
// create a d3 connection to the DOM (that is ignored by the browser)
custom = d3.select('body').append('custom');
//Create the p5 canvas
var width = window.innerWidth,
height = window.innerHeight,
transitionDuration = 1080;
var c = createCanvas(width, height);
c.parent('vis');
stroke("#fff");
// use d3 enter() to append the circles to the custom object
var circle = custom.selectAll('circle')
.data(data)
.enter()
.append('customCircle')
.classed('circle', true)
.attr({ // d3 to set p5 attributes
// use anonymous functions to return fresh values
radius: function() { return random(2, 8); },
xPos: function() { return random(width); },
yPos: function() { return random(height); },
// apply unique ID using the `index` of the array
id: function(d,i) { return 'c-' + i; }
});
// console.log(custom.node());
// You can access and view the custom's DOM node using D3's .node() method.
// Mostly used for debugging and educational purposes
// every 500ms, run a function to randomise the selected attributes
setInterval(function() {
circle
.transition()
.duration(transitionDuration)
.attr({
radius: function() { return random(5, 21); },
xPos: function() { return random(width); },
yPos: function() { return random(height); },
});
}, transitionDuration);
}
function draw() {
// blendMode(BLEND);
background(255);
noStroke();
colorMode(RGB);
blendMode(MULTIPLY);
// using D3, we select the circle customObject.
// using .attr('attribute-name') to access the values of the circle
// use loop to go apply the circles to p5 canvas
for (var i = 0; i < data.length; i++) {
// use D3 select each circle via it's #ID
var thisObject = custom.select('#c-' +i);
fill('#ED225D');
ellipse(thisObject.attr('xPos'),
thisObject.attr('yPos'),
thisObject.attr('radius'),
thisObject.attr('radius'));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment