viewof scale2 = Inputs.range([0.1, 2.4], {label: "scale", step: 0.01, value: 1})
viewof start_date=Inputs.date({value:'2000-05-20'})
viewof target_date=Inputs.date({value:'2024-01-01'})
moment = require('moment');
(new Date('2024-01-01')-new Date('2024-02-02'))
function setDate(date,counter){
let newDate=new Date(date)
newDate.setDate(newDate.getDate()+counter)
return moment(newDate).format("YYYY-MM-DD")
}
viewof pause = Inputs.button("Click me")
{
let objDate=moment(start_date)
let counter=0
const canvasWidth = 1080;
const canvasHeight = 800;
const canvasCenter = [canvasWidth * 0.5, canvasHeight * 0.5];
const canvas = DOM.canvas(canvasWidth, canvasHeight);
const p = new paper.PaperScope();
paper.setup(canvas);
let radiusScale = 0.0002 * scale
let distanceScale = 0.08 * scale
let sunRadius = (solarSystem.sun.radius * radiusScale) / sunScale
let sun
//let date_label=new p.Path.Rectangle({size:[100,20],fillColor:"#141414"})
if (fill == "colorFill") {
let background = new p.Path.Rectangle({
size: [canvasWidth, canvasHeight],
fillColor: "#141414",
})
sun = new p.Path.Circle({
name: solarSystem.sun.name,
center: canvasCenter,
radius: sunRadius,
r: sunRadius,
fillColor: "#FA8C16",
})
} else if (fill == "imageFill") {
let background = new p.Raster({
source: await FileAttachment("wallhaven-yje37l.jpg").url(),
position: paper.view.center,
size: [canvasWidth, canvasHeight]
})
let sunSize = sunRadius * 2
sun = new p.Raster({
source: await solarSystem.sun.img,
position: paper.view.center,
size: [sunSize, sunSize]
})
sun.onLoad = (e) => {
sun.size = [sunSize, sunSize]
}
// let lx = sun.position.x + ((solarSystem.sun.radius * radiusScale) / sunScale) + 25559*radiusScale + (2870.9722 * distanceScale)
// let ly = sun.position.y
}
let date_label = new p.PointText({
name:"date_label",
point: [50,50],
content: moment(objDate).format("YYYY-MM-DD"),
fillColor: '#FFFFFF',
fontFamily: 'Courier New',
fontWeight: 'bold',
fontSize: 16,
strokeColor: "#000000",
strokeWidth: 0.4,
})
const sunText = new p.PointText({
name: solarSystem.sun.name,
point: [sun.position.x - 8, sun.position.y + sun.r + 16],
content: sun.name,
fillColor: '#FFFFFF',
fontFamily: 'Courier New',
fontWeight: 'bold',
fontSize: 16,
strokeColor: "#000000",
strokeWidth: 0.4,
})
const planets = []
for (let planet in solarSystem.planets) {
let pl = solarSystem.planets[planet]
let radius = pl.radius * radiusScale
let planetSize = pl.radius * 2 * radiusScale
let cx = sun.position.x + ((solarSystem.sun.radius * radiusScale) / sunScale) + radius + (pl.distance * distanceScale)
let cy = sun.position.y
let star = fill == "colorFill" ?
new p.Path.Circle({
name: pl.name,
center: [cx, cy],
radius: radius,
r: radius,
fillColor: "#E6F7FF",
revolutionPeriod: pl.revolutionPeriod
})
: new p.Raster({
name: pl.name,
source: await pl.img,
position: [cx, cy],
size: [planetSize, planetSize],
r: radius,
revolutionPeriod: pl.revolutionPeriod
})
star.onLoad = (e) => {
star.size = [planetSize, planetSize]
}
planets.push({
ring: new p.Path.Circle({
center: [sun.position.x, sun.position.y],
radius: cx - sun.position.x,
strokeColor: "#FFF1B8",
strokeWidth: 0.4,
}),
star: star,
text: new p.PointText({
point: [cx, cy + radius],
content: pl.name,
fillColor: '#FFFFFF',
fontFamily: 'Courier New',
fontWeight: 'bold',
fontSize: 16,
strokeColor: "#000000",
strokeWidth: 0.4,
}),
})
}
const satellites = []
for (let satellite in solarSystem.satellites) {
let s = solarSystem.satellites[satellite]
let around = planets.filter(item => item.star.name.toLowerCase() == s.around)[0].star
let radius = s.radius * radiusScale
let satelliteSize = s.radius * 2 * radiusScale
let cx = around.position.x + (around.r * radiusScale) + radius + (s.distance * distanceScale) + 4
let cy = around.position.y
satellites.push({
ring: new p.Path.Circle({
center: around.position,
radius: cx - around.position.x,
strokeColor: "#f0f0f0",
strokeWidth: 0.4,
}),
star: new p.Path.Circle({
center: [cx, cy],
radius: radius,
r: radius,
fillColor: "#E6F7FF",
revolutionPeriod: s.revolutionPeriod,
around: s.around
}),
text: new p.PointText({
point: [cx, cy + radius],
content: s.name,
fillColor: '#FFFFFF',
fontFamily: 'Courier New',
fontWeight: 'bold',
fontSize: 14,
strokeColor: "#000000",
strokeWidth: 0.4,
}),
})
}
let sunFlag = 0
paper.view.onFrame = (event) => {
if( pause % 2==0)return
if( moment(setDate(objDate,counter)) >= moment(target_date))return
counter+=1
date_label.content=setDate(objDate,counter)
//date_label
if (sun.opacity > 0.8 && event.count % 3 == 0 && sunFlag == 0) {
sun.opacity -= 0.01
if (sun.opacity <= 0.8) {
sunFlag = 1
}
}
if (sun.opacity <= 1 && event.count % 3 == 0 && sunFlag == 1) {
sun.opacity += 0.01
if (sun.opacity >= 1) {
sunFlag = 0
}
}
planets.forEach(item => {
let star = item.star
let text = item.text
star.rotate(((speed) / star.revolutionPeriod), sun.position)
text.position.x = star.position.x
text.position.y = star.position.y + star.r + 10
})
satellites.forEach(item => {
let around = planets.filter(p => p.star.name.toLowerCase() == item.star.around)[0].star
let star = item.star
let ring = item.ring
let text = item.text
star.rotate((speed / star.revolutionPeriod), around.position)
star.rotate((speed / around.revolutionPeriod), sun.position)
ring.position = around.position
text.position.x = star.position.x
text.position.y = star.position.y + star.r + 6
})
}
return canvas;
}
solarSystem = {
return {
sun: {
name: "Sun",
radius: 696340, // kilometer
img: FileAttachment("sun@1.png").url(),
},
planets: {
mercury: {
name: "Mercury",
radius: 2439.7, // kilometer
distance: 57.909175, // million kilometers
around: "sun",
revolutionPeriod: 87.97, // day
img: FileAttachment("mercury@1.png").url(),
},
venus: {
name: "Venus",
radius: 6051.8,
distance: 108.20893,
around: "sun",
revolutionPeriod: 224.7,
img: FileAttachment("venus@1.png").url(),
},
earth: {
name: "Earth",
radius: 6378.14,
distance: 149.59789,
around: "sun",
revolutionPeriod: 365.24,
img: FileAttachment("earth@1.png").url(),
},
mars: {
name: "Mars",
radius: 3397,
distance: 227.93664,
around: "sun",
revolutionPeriod: 686.93,
img: FileAttachment("mars@1.png").url(),
},
jupiter: {
name: "Jupiter",
radius: 71492,
distance: 778.41202,
around: "sun",
revolutionPeriod: 4327.6225,
img: FileAttachment("jupiter@1.png").url(),
},
saturn: {
name: "Saturn",
radius: 60268,
distance: 1426.7254,
around: "sun",
revolutionPeriod: 10748.52,
img: FileAttachment("saturn@2.png").url(),
},
uranus: {
name: "Uranus",
radius: 25559,
distance: 2870.9722,
around: "sun",
revolutionPeriod: 30667.3,
img: FileAttachment("uranus.png").url(),
},
neptune: {
name: "Neptune",
radius: 4498.2529 * 10,
distance: 24764,
around: "sun",
revolutionPeriod: 60148.35,
img: FileAttachment("neptune@1.png").url(),
},
},
satellites: {
moon: {
name: "Moon",
radius: 1737.4,
distance: 0.384401,
around: "earth",
revolutionPeriod: 27,
img: FileAttachment("neptune@1.png").url(),
},
}
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.