Data and community wrangler
Published
Edited
Feb 24, 2020
7 stars
{
// Create width and height variables
const width = 600;
const height = 300;
// Create a HTML5 canvas object
const canvas = DOM.canvas(width, height);
// Now add a new paper variable to the global scope to reference the PaperScope object.
const p = new paper.PaperScope();
// Using the setup method create a project with the HTML canvas element. This can also be combined with the step above
paper.setup(canvas);
// Assign multiple variable names to the p object
const { Path, Point, Color } = p;
// Create a background recatangle object
let background = new p.Path.Rectangle([0, 0], [width, height]);
// Give the background a colour fill property
background.fillColor = color;
// Create a new path object as a square, we can also set the object
let path = new p.Path({
segments: [[30, 75], [30, 25], [80, 25], [80, 75]],
strokeColor: 'black',
closed: true,
position: height/2,
fillColor: color2
});
// Select the path object, so we can see its handles:
path.fullySelected = true;
return canvas;
}
{
// Create width and height variables
const width = 600;
const height = 300;
// Create a HTML5 canvas object
const canvas = DOM.canvas(width, height);
// Now add a new paper variable to the global scope to reference the PaperScope object.
const p = new paper.PaperScope();
// Using the setup method create a project with the HTML canvas element. This can also be combined with the step above
paper.setup(canvas);
// Assign multiple variable names to the p object
const { Path, Point, Color } = p;
// Create a background object
let background = new p.Path.Rectangle([0, 0], [width, height]);
// Give the background a colour
background.fillColor = color;
// Create a new path object as a square
let path = new Path({
segments: [[30, 75], [30, 25], [80, 25], [80, 75]],
// strokeColor: 'black',
closed: true,
position: height/2,
fillColor: color2
});
// Select the path, so we can see its handles:
path.fullySelected = true;
// Create a copy of the path and move it 150pt to the right:
let copy = path.clone();
copy.fullySelected = true;
copy.position.x += 150;
// Smooth a path by changing its segment handles without adding or removing segment points.
copy.smooth();
// Create a copy of the the copied path and move it by 150 points:
let copy2 = copy.clone();
copy2.position.x += 150;
// Flattens the curves in path items to a sequence of straight lines, by subdividing them enough times until the specified maximum error is met.
// Flatten the copied path, with a maximum error of 6 points:
copy2.flatten(6);
return canvas;
}
{
// Create width and height variables
const width = 600;
const height = 300;
// Create a HTML5 canvas object
const canvas = DOM.canvas(width, height);
// Now add a new paper variable to the global scope to reference the PaperScope object.
const p = new paper.PaperScope();
// Using the setup method create a project with the HTML canvas element. This can also be combined with the step above
paper.setup(canvas);
// Assign multiple variable names to the p object
const { Path, Point, Color } = p;
// Create a background object
let background = new p.Path.Rectangle([0, 0], [width, height]);
// Give the background a colour
background.fillColor = color;
const y= 0;
const x =0;
let vector = new Point({
angle: 45,
length: width / 6,
strokeColor: 'black',
position: height/2
});
// Create a new path object as a line with 3 segments. A segment consists of a point and two handles, defining the location and direction of the curves.
let line = new Path({
segments: [
[[x+100, y], null, vector.rotate(-90)],
[[x+300, y], vector.rotate(-180), vector],
[[x+500, y], vector.rotate(90), null]],
strokeColor: 'black',
closed: false,
position: height/2,
fillColor: color2
});
line.fullySelected = true;
// Move the line over to center it using the size object
line.position.x += 150;
return canvas;
}
{
// Create width and height variables
const width = 600;
const height = 300;
// Create a HTML5 canvas object
const canvas = DOM.canvas(width, height);
// Now add a new paper variable to the global scope to reference the PaperScope object.
const p = new paper.PaperScope();
// Using the setup method create a project with the HTML canvas element. This can also be combined with the step above
paper.setup(canvas);
// Assign multiple variable names to the p object
const { Path, Point, Color } = p;
// Create a background object
let background = new p.Path.Rectangle([0, 0], [width, height]);
// Give the background a colour
background.fillColor = color;
const y= 0;
const x =0;
let vector = new p.Point({
// set the angle to 0
angle: 0,
length: width / 6,
position: height/2
});
// Create a new path object as a line with 1 segments. Now look at one segment with the above vector and rotated vector as the handles, with a 90 degree angle.
let line = new Path({
segments: [
// Now combine the point location with the vector and the vector rotated horizontally downwards. This creates a segment with an anchor point and curve connected handle points, handleIn and handleOut. Note we are not changing the vector or point properties as in vector.angle += 90;
[[x, y], vector, vector.rotate(-90)],
],
closed: false,
position: height/2,
arrow: true
});
line.fullySelected = true;
// Create a new path object as a square
let circle = new p.Path.Circle(new Point(150, height/2), 50);
circle.fillColor =color2;
circle.selected = true;
// Move the line over to center it using the size object
line.position.x = height/2;
// Move the line over to center it using the size object
line.position.x += 150;
// Move the circle over to center it using the size object
circle.position.x += 150;
return canvas;
}
md`**Day 74**
Now change the shape with a mouse event`
{
// Create width and height variables
const width = 600;
const height = 300;
// Create a HTML5 canvas object
const canvas = DOM.canvas(width, height);
// Now add a new paper variable to the global scope to reference the PaperScope object.
const p = new paper.PaperScope();
// Using the setup method create a project with the HTML canvas element. This can also be combined with the step above
paper.setup(canvas);
// Assign multiple variable names to the p object
const { Path, Point, Color } = p;
// Create a background object
let background = new p.Path.Rectangle([0, 0], [width, height]);
// Give the background a colour
background.fillColor = color;
const y= 0;
const x =0;
let vector = new Point({
angle: 45,
length: width / 8,
strokeColor: 'black',
position: height/2
});
// Create a new path object as a line with 3 segments. A segment consists of a point and two handles, defining the location and direction of the curves.
let line = new Path({
segments: [
[[x+125, y], null, vector.rotate(-90)],
[[x+250, y], vector.rotate(-180), vector],
[[x+375, y], vector.rotate(90), null]],
strokeColor: 'black',
closed: false,
position: height/2,
fillColor: color2
});
// Move the line over to center it using the size object
line.position.x += 150;
// line.onMouseMove = function(event) {
// this.rotate(45);
//}
// http://paperjs.org/reference/view/#onframe
line.onFrame = function(event) {
// Every frame, rotate the path by 3 degrees:
this.rotate(-3);
}
return canvas;
}
{
// Create width and height variables
const width = 600;
const height = 300;
// Create a HTML5 canvas object
const canvas = DOM.canvas(width, height);
// Now add a new paper variable p to the global scope to reference the PaperScope object.
const p = new paper.PaperScope();
// Using the setup method create a project with the HTML canvas element. This can also be combined with the step above
paper.setup(canvas);
// Assign multiple variable names to the p object
const { Path, Point, Color } = p;
// Create a background object
let background = new Path.Rectangle([0, 0], [width, height]);
// Give the background a colour
background.fillColor = color;
// Now create 10 filled circles
let num = 10;
// Using a for (begin; condition; step) loop
for (let i = 0; i < num; i++) {
let circle = new Path.Circle({
center: [(width / num) * i+25, height / 2],
radius: i+5,
fillColor: color2,
opacity: 0.8
});
}
return canvas;
}
md`**Day 76**
Find a way for the shapes to disappear......`
viewof size = DOM.range(10, 200)
{
// Create width and height variables
const width = 600;
const height = 300;
// Create a HTML5 canvas object
const canvas = DOM.canvas(width, height);
// Now add a new paper variable to the global scope to reference the PaperScope object.
const p = new paper.PaperScope();
// Using the setup method create a project with the HTML canvas element. This can also be combined with the step above
paper.setup(canvas);
// Assign multiple variable names to the p object
const { Path, Point, Color } = p;
// Create a background object
let background = new Path.Rectangle([0, 0], [width, height]);
// Give the background a colour
background.fillColor = color;
// Now create 10 filled circles of gradually increasing size
let num = 10;
for (let i = 0; i < num; i++) {
const circle = new Path.Circle({
center: [(width / num) * i+25, height / 2],
radius: i+5,
fillColor: '#FCE86B',
opacity: 0.8
});
}
//https://observablehq.com/@tmcw/paper-js-persistent-scope change to a do loop and update the path to path2 so it doesn't affect other cells. Use a size view object.
let i = 0;
do {
let rectangle = new p.Rectangle(new p.Point(Math.random() * width, Math.random() * height), new p.Size(size, size));
var path2 = new p.Path.Rectangle(rectangle, 10);
path2.opacity = 0.2;
path2.fillColor = color;
yield canvas;
i++;
} while (i < 100);
return canvas;
}
md`**Day 77**
Create and make a bar disappear with a mouse event hover.`
{
// Create width and height variables
const width = 600;
const height = 300;
// Create a HTML5 canvas object
const canvas = DOM.canvas(width, height);
// Now add a new paper variable to the global scope to reference the PaperScope object.
const p = new paper.PaperScope();
// Using the setup method create a project with the HTML canvas element. This can also be combined with the step above
paper.setup(canvas);
// Assign multiple variable names to the p object
const { Path, Point, Color } = p;
// Create a background object
let background = new p.Path.Rectangle([0, 0], [width, height]);
// Give the background a colour
background.fillColor = color;
// Create a Paper.js path object to draw a line
let path = new p.Path([100,150],[500,150]);
// Give the path line some attributes, colour, width and path end cap
path.strokeColor= '#E4141B';
path.strokeWidth= 20;
path.strokeCap='round';
// When the mouse moves on top of the item, set its opacity
// to a random value between 0 and 1:
path.onMouseMove = function(event) {
this.opacity = 0.01;
}
return canvas;
}
{
// Create width and height variables
const width = 600;
const height = 300;
// Create a HTML5 canvas object
const canvas = DOM.canvas(width, height);
// Now add a new paper variable to the global scope to reference the PaperScope object.
const p = new paper.PaperScope();
// Using the setup method create a project with the HTML canvas element. This can also be combined with the step above
paper.setup(canvas);
// Assign multiple variable names to the p object
const { Path, Point, Color } = p;
// Create a background object
let background = new p.Path.Rectangle([0, 0], [width, height]);
// Give the background a colour
background.fillColor = color;
// Create a Paper.js path object to draw a line
let path = new p.Path([100,150],[500,150]);
// Give the path line some attributes, colour, width and path end cap
path.strokeColor= '#E4141B';
path.strokeWidth= 20;
path.strokeCap='round';
// http://paperjs.org/reference/view/#onframe
path.onFrame = function(event) {
// Every frame, rotate the path by 3 degrees:
this.strokeColor.hue += 1;
}
return canvas;
}
md`**Day 79**
Creating a moving shape using the segments.
This doesn't quite look like what's on the tutorial tin
http://paperjs.org/tutorials/animation/creating-animations/`
{
// Create width and height variables
const width = 600;
const height = 300;
// Create a HTML5 canvas object
const canvas = DOM.canvas(width, height);
// Now add a new paper variable to the global scope to reference the PaperScope object.
const p = new paper.PaperScope();
// Using the setup method create a project with the HTML canvas element. This can also be combined with the step above
paper.setup(canvas);
// Assign multiple variable names to the p object
const { Path, Point, Color } = p;
// Create a background object
let background = new p.Path.Rectangle([0, 0], [width, height]);
// Give the background a colour
background.fillColor = color;
// Create 3 segments
let path = new Path({
segments: [[75,130], [100,130], [125,130], [150,130]],
closed: false,
position: height/2
});
// Add some attributes to the path line, colour, width and path end cap
path.strokeColor= '#E4141B';
path.strokeWidth= 20;
path.strokeCap='round';
// Select the path, so we can see how it is constructed:
//path.selected = true;
const amount =3;
// http://paperjs.org/reference/view/#onframe
path.onFrame = function(event) {
// Every frame, rotate the path by 3 degrees:
// Loop through the segments of the path:
for (var i = 0; i <= amount; i++) {
var segment = this.segments[i];
// A cylic value between -1 and 1
var sinus = Math.sin(event.time * 3 + i);
// Change the y position of the segment point:
segment.point.y = sinus * height + 2;
}
}
return canvas;
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
import {colorPicker} from "@shaunlebron/color-picker"
paper = require("paper");
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
