Let's build a better world, together.
Published
Edited
Mar 8, 2022
{
const canvasWidth = 640;
const canvasHeight = 480;
const canvas = DOM.canvas(canvasWidth, canvasHeight);
const p = new paper.PaperScope();
paper.setup(canvas);
const center = [canvasWidth / 2, canvasHeight / 2];
const radius = 60;
const delta = Math.PI / 9;
// 2 - Dimension
const points = [];
const level = 6;
for (let i = 0; i < level; i++) {
points[i] = [];
let r = radius + (radius * i) / 3;
for (let k = 0; k < 2 * Math.PI; k += delta) {
points[i].push([
center[0] + r * Math.cos(k),
center[1] + r * Math.sin(k)
]);
}
}
// Dots & Circle
const dots = points[0].length;
for (let i = 0; i < level; i++) {
for (let k = 0; k < dots; k += 1) {
new p.Path.Circle({
center: points[i][k],
radius: 4,
fillColor: "#141E27"
});
new p.Path.Line({
from: points[i][k],
to: points[i][(k + 1) % dots],
strokeColor: "#141E27"
});
}
}
// Cross Lines
for (let i = 0; i < dots; i++) {
new p.Path.Line({
from: points[0][i],
to: points[level - 1][i],
strokeColor: "#141E27"
});
}
return canvas;
}
{
const canvasWidth = 640;
const canvasHeight = 480;
const canvas = DOM.canvas(canvasWidth, canvasHeight);
const p = new paper.PaperScope();
paper.setup(canvas);
const center = [canvasWidth / 2, canvasHeight / 2];
paper.project.currentStyle = {
strokeColor: '#392f41',
strokeWidth: 1
}
// rearWheel
const rearWheelLayer = new paper.Layer()
const rearWheel = new p.Path.Circle({
center: [260, 406],
radius: 38,
fillColor: {
stops: ['#392f41', '#50616d'],
radial: true,
origin: [260, 406],
destination: [260, 444]
}
})
rearWheel.clone().translate(new p.Point(240, 0))
// body
const bodyLayer = new paper.Layer()
const carTail = new p.Path({
segments: [[240, 300], [570, 300]]
})
const bodyRight = new p.Path({
segments: [[580, 320], [570, 380]]
})
const bodyRightTop = new p.Path.Arc({
from: carTail.lastSegment.point,
through: [580, 312],
to: bodyRight.firstSegment.point
})
const bodyBottom = new p.Path({
segments: [[555, 400], [255, 400]]
})
const bodyRightBottom = new p.Path.Arc({
from: bodyRight.lastSegment.point,
through: [561, 397],
to: bodyBottom.firstSegment.point
})
carTail.join(bodyRightTop)
carTail.join(bodyRight)
carTail.join(bodyRightBottom)
carTail.join(bodyBottom)
const body = carTail.clone()
body.translate(new p.Point(-120, 0))
const bodyLeft = new p.Path(
new p.Segment({
point: body.firstSegment.point,
handleOut: [-90, 20]
}),
new p.Segment({
point: body.lastSegment.point,
handleOut: [-120, 40]
})
)
body.join(bodyLeft)
const door = new p.Path({
segments: [[340, 300], [310, 400]]
})
const doorHandle = new p.Path.Rectangle({
point: [260, 310],
size: [52, 16],
radius: 10,
strokeWidth: 1,
fillColor: {
stops: ['#0c8918', '#afdd22'],
origin: [286, 318],
destination: [286, 330]
}
})
body.fillColor = {
stops: ['#0c8918', '#afdd22', '#0c8918', '#afdd22'],
origin: [286, 310],
destination: [284, 425]
}
const bodyHighLight = new p.Path.Rectangle({
point: [170, 338],
size: [110, 6],
radius: 5,
strokeWidth: 0,
fillColor: {
stops: ['#f1ffde', '#ebffd1'],
origin: [170, 338],
destination: [300, 340],
},
shadowColor: new p.Color(241,255,222),
shadowBlur: 6,
shadowOffset: new p.Point(2, 2)
})
const bodyHighLightRight = new p.Path.Rectangle({
point: [285, 338],
size: [20, 6],
radius: 5,
strokeWidth: 0,
fillColor: {
stops: ['#f1ffde', '#ebffd1'],
origin: [170, 338],
destination: [300, 340],
},
shadowColor: new p.Color(241,255,222),
shadowBlur: 6,
shadowOffset: new p.Point(2, 2)
})
carTail.fillColor = "#0c8918"
// frontWheel
const wheelLayer = new paper.Layer()
const frontWheel = new p.Path.Circle({
center: [150, 410],
radius: 42,
strokeWidth: 3,
})
new p.Path.Circle({
center: [150, 410],
radius: 18
})
new p.Path.Circle({
center: [150, 410],
radius: 12
})
new p.Path.Circle({
center: [150, 404],
radius: 3,
fillColor: '#392f41'
})
new p.Path.Circle({
center: [150, 416],
radius: 3,
fillColor: '#392f41'
})
new p.Path.Circle({
center: [144, 410],
radius: 3,
fillColor: '#392f41'
})
new p.Path.Circle({
center: [156, 410],
radius: 3,
fillColor: '#392f41'
})
frontWheel.fillColor = {
stops: ['#808080', '#50616d', '#424c50'],
radial: true,
origin: [150, 410],
destination: [150, 452]
}
wheelLayer.clone().translate(new p.Point(220, 0))
// window
const windowLayer = new paper.Layer()
const windowLeft = new p.Path({
segments: [[160, 300], [300, 110]]
})
const windowTop = new p.Path({
segments: [[320, 100], [500, 100]]
})
const windowLeftTop = new p.Path.Arc({
from: windowLeft.lastSegment.point,
through: [310, 102],
to: windowTop.firstSegment.point
})
const windowRight = new p.Path({
segments: [[510, 110], [510, 300]]
})
const windowRightTop = new p.Path.Arc({
from: windowTop.lastSegment.point,
through: [501, 100],
to: windowRight.firstSegment.point
})
const windowTopBottom = windowTop.clone().translate(new p.Point(0, 8))
const windowTopBottomRight = new p.Path.Arc({
from: [510, 120],
through: [508, 113],
to: windowTopBottom.lastSegment.point
})
const windowTopBottomLeft = new p.Path.Arc({
from: windowTopBottom.firstSegment.point,
through: [312, 110],
to: [294, 120]
})
windowTop.join(windowRightTop)
windowTop.join(windowTopBottomRight)
windowTop.join(windowTopBottom)
windowTop.join(windowTopBottomLeft)
windowTop.join(windowLeftTop)
windowTop.fillColor = {
stops: ['#a3d900', '#0aa344'],
origin: [290, 100],
destination: [310, 120]
}
const windowSeparate = new p.Path({
segments: [[400, 109], [340, 300]]
})
windowSeparate.join(
new p.Path({
segments: [[346, 300], [406, 109]]
})
)
windowSeparate.fillColor = '#0aa344'
const frontWindow = new p.Path()
frontWindow.add(new p.Point(windowLeft.firstSegment.point))
frontWindow.add(new p.Point(windowTopBottomLeft.lastSegment.point))
frontWindow.join(
new p.Path.Arc({
from: [320, 108],
through: [312, 110],
to: [294, 120]
})
)
frontWindow.add(new p.Point(windowSeparate.firstSegment.point))
frontWindow.add(new p.Point(windowSeparate.segments[1].point))
frontWindow.add(new p.Point(windowLeft.firstSegment.point))
frontWindow.fillColor = {
stops: ['#70f3ff', '#eaff56', '#70f3ff'],
origin: [290, 180],
destination: [340, 220]
}
const rearWindow = new p.Path()
rearWindow.add(new p.Point(windowSeparate.segments[2].point))
rearWindow.add(new p.Point(windowRight.lastSegment.point))
rearWindow.add(new p.Point([510, 120]))
rearWindow.join(
new p.Path.Arc({
from: [510, 120],
through: [508, 113],
to: [500, 108]
})
)
rearWindow.add(new p.Point(windowSeparate.segments[3].point))
rearWindow.closed = true
rearWindow.fillColor = {
stops: ['#70f3ff', '#eaff56', '#70f3ff'],
origin: [430, 180],
destination: [480, 220]
}
// lights
const carLightsLayer = new paper.Layer()
const frontLights = new p.Path()
frontLights.add(
new p.Point(95, 310)
)
frontLights.add(
new p.Point(140, 310)
)
frontLights.join(
new p.Path.Arc({
from: [140, 310],
through: [150, 325],
to: [140, 340]
})
)
frontLights.add(
new p.Point(86, 340)
)
frontLights.join(
new p.Path.Arc({
from: [86, 340],
through: [85, 325],
to: [95, 310]
})
)
frontLights.fillColor = 'red'
frontLights.shadowColor = new p.Color(180, 0, 0)
frontLights.shadowBlur = 4
frontLights.shadowOffset = new p.Point(-2, 0)
frontLights.strokeWidth = 0
const frontLightsBottom = new p.Path()
frontLightsBottom.add(
new p.Point(90, 350)
)
frontLightsBottom.add(
new p.Point(118, 350)
)
frontLightsBottom.join(
new p.Path.Arc({
from: [118, 350],
through: [122, 358],
to: [118, 366]
})
)
frontLightsBottom.add(
new p.Point(98, 366)
)
frontLightsBottom.join(
new p.Path.Arc({
from: [98, 366],
through: [92, 360],
to: [90, 350]
})
)
frontLightsBottom.fillColor = 'red'
frontLightsBottom.shadowColor = new p.Color(180, 0, 0)
frontLightsBottom.shadowBlur = 2
frontLightsBottom.shadowOffset = new p.Point(-1, 0)
frontLightsBottom.strokeWidth = 0
const leftLights = new p.Path({
segments: [[486, 300], [478, 350]]
})
leftLights.join(
new p.Path.Arc({
from: leftLights.lastSegment.point,
through: [460, 360],
to: [453, 360],
fillColor: 'red'
})
)
leftLights.add(
new p.Point(460, 320)
)
leftLights.join(
new p.Path.Arc({
from: [450, 300],
through: [460, 312],
to: [460, 320],
})
)
leftLights.closed = true
leftLights.fillColor = 'red'
leftLights.shadowColor = new p.Color(180, 0, 0)
leftLights.shadowBlur = 18
leftLights.shadowOffset = new p.Point(0, -2)
const rightLights = new p.Path({
segments: [[558, 300], [550, 350]]
})
rightLights.join(
new p.Path.Arc({
from: rightLights.lastSegment.point,
through: [562, 360],
to: [574, 360]
})
)
rightLights.add(
new p.Point(580, 320)
)
rightLights.join(
new p.Path.Arc({
from: [570, 300],
through: [580, 312],
to: [580, 320],
})
)
rightLights.closed = true
rightLights.fillColor = 'red'
rightLights.shadowColor = new p.Color(180, 0, 0)
rightLights.shadowBlur = 16
rightLights.shadowOffset = new p.Point(2, 0)
const lightsSeparate = new p.Path({
segments: [[460, 320], [580, 320]]
})
const centerLights = new p.Path.Rectangle({
point: [500, 325],
size: [32, 4],
radius: 5,
strokeColor: '#392f41',
fillColor: "#faff72",
shadowColor: new p.Color(250, 255, 114),
shadowBlur: 8,
// shadowOffset: new p.Point(2, 0)
})
lightsSeparate.clone().translate(new p.Point(-2, 14))
// license
const licensePlateLayer = new paper.Layer()
const licensePlate = new p.Path.Rectangle({
point: [485, 366],
size: [58, 28],
radius: 5,
fillColor: "#4b5cc4",
shadowColor: new p.Color(250, 255, 114),
shadowBlur: 8,
shadowOffset: new p.Point(2, 0)
})
const licensePlateCode = new p.PointText({
point: [490, 386],
content: '313PT',
strokeColor: 'white',
fontFamily: 'Courier New',
fontSize: 16
})
const licensePlateTop = new p.Path.Rectangle({
point: [482, 366],
size: [64, 4],
radius: 5,
fillColor: "#4c221b"
})
return canvas;
}
{
const canvasWidth = 320;
const canvasHeight = 940;
const canvas = DOM.canvas(canvasWidth, canvasHeight);
const p = new paper.PaperScope();
paper.setup(canvas);
const background = new p.Path.Rectangle({
point: [0, 0],
size: [canvasWidth, canvasHeight],
fillColor: "#456268"
});
const redPoint = new p.Group()
const bluePoint = new p.Group()
let bluePointEnd = 0
for (let i = 0; i < canvasHeight; i += 0.1) {
redPoint.addChild(
new p.Path.Circle({
center: [(Math.sin(i) * 60)+ 150, i * 60 ],
radius: i % Math.PI,
fillColor: '#FCF8EC'
})
)
if ((i - Math.PI) * 60 > 0) {
bluePoint.addChild(
new p.Path.Circle({
center: [(Math.sin(i) * 60)+ 150, (i - Math.PI * 1) * 60 ],
radius: Math.PI - (i % Math.PI),
fillColor: '#FCF8EC'
})
)
}
if((i - Math.PI) * 60 > canvasHeight){
bluePointEnd = bluePoint.children.length -1
break
}
};
for(let i = 0; i < bluePointEnd; i += 2){
if(Math.abs(redPoint.children[i].firstSegment.point.x - bluePoint.children[i].firstSegment.point.x) > 24) {
new p.Path.Line({
from: redPoint.children[i].firstSegment.point,
to: bluePoint.children[i].firstSegment.point,
strokeColor: '#FCF8EC',
strokeWidth: 0.6
})
}
}
return canvas;
}
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.
