I think the Daleks waited until they had acquired inexpensive CGI technology before they started climbing stairs. 
2 Likes
Thanks! When I originally composed this, so many years ago the whole thing came to me in a finished form after about two hours of playing around- a rare bit of inspiration. I re-recorded it recently because the original version was recorded on tape, but it’s fundamentally the same composition.
Not a YouTube problem. My local copy is the same. The jagged edges could be caused by the way the original image was created (I didn’t create it) or perhaps as a result of the background being removed (I don’t recall if I did that). I suppose I could have blurred the edges to fix that. Too late now but something I’ll keep in mind for any future planet related videos.
1 Like
If you removed the background from the original image this may have produced these sawteeth. I also remember that I saw here in the forum some “sawtooth” effect with a combination of filters in which SP&R was involved.
Depending on its severity, the sawteeth border can be somewhat smoothed with the Alpha Adjust filter using the blur setting.
I re-engineered the HTML file to fit all 4 planets on the screen and add Phobos and Daimos, the moons of mars. It now uses GSAP and most of the CSS has been removed. I have updated the video clip shown in post #9 above. I include the HTML/Javascript below if anyone is interested.
If you want to see a really cool interactive 3D solar system done in HTML/CSS/Javascript have a look at this: https://codepen.io/juliangarnier/pen/idhuG
Elusien’s Solar System code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
#solar_system {position: relative; width: 100%; height: 100%; background-color: #000000; font-family: sans-serif;}
</style>
</head>
<body>
<!--h1> The inner planets of the Solar System</h1-->
<div id='solar_system'>
<div id='sun' >S</div>
<div id='mercury'>M</div>
<div id='venus' >V</div>
<div id='earth' >E</div>
<div id='mars' >M</div>
<div id='moon' >m</div>
<div id='phobos' >p</div>
<div id='daimos' >d</div>
</div>
</body>
<script>
$( document ).ready(function() {
var bodies = [ 'sun', 'mercury', 'venus', 'earth', 'mars', 'moon', 'phobos', 'daimos' ];
var params = {
sun : {radius: 35, color: '#ffff00', parent: 'sun' , theta: 0, orbit_r: 0, orbits: 0 },
mercury : {radius: 9, color: '#bbbbbb', parent: 'sun' , theta: 0, orbit_r: 30, orbits: 10.4},
venus : {radius: 18, color: '#44ff44', parent: 'sun' , theta: 0, orbit_r: 70, orbits: 4.3},
earth : {radius: 15, color: '#4444ff', parent: 'sun' , theta: 0, orbit_r: 120, orbits: 2.8},
mars : {radius: 12, color: '#ff4444', parent: 'sun' , theta: 0, orbit_r: 170, orbits: 1 },
moon : {radius: 8, color: '#ffffff', parent: 'earth', theta: 0, orbit_r: 16, orbits: 25.3},
phobos : {radius: 6, color: '#aaaa00', parent: 'mars' , theta: 0, orbit_r: 12, orbits: 22.4},
daimos : {radius: 5, color: '#778800', parent: 'mars' , theta: 0, orbit_r: 14, orbits: 16.1}
};
let orbit_delta = 0.5 * Math.min($('#solar_system').width(), $('#solar_system').height()) /
(params.mars.orbit_r + 2*params.daimos.orbit_r);
params.sun.x_center = 0.5 * $('#solar_system').width();
params.sun.y_center = 0.5 * $('#solar_system').height();
params.sun.left = params.sun.x_center - params.sun.radius;
params.sun.top = params.sun.y_center - params.sun.radius;
params.sun.orbit_delta = orbit_delta;
params.sun.delta_x = 0;
params.sun.delta_y = 0;
for (let i = 0; i < bodies.length; i++) { // set the CSS values of the Sun and planets;
let body = bodies[i];
let data = params[body];
data.movement_x = 0;
data.movement_y = 0;
data.x_center = params[data.parent].x_center + data.orbit_r * orbit_delta;
data.y_center = params[data.parent].y_center;
data.left = data.x_center - data.radius;
data.top = data.y_center - data.radius;
$('#'+body).css({
position : 'absolute',
left : data.left + 'px',
top : data.top + 'px',
width : (2 * data.radius) + 'px',
height : (2 * data.radius) + 'px',
backgroundColor : data.color,
lineHeight : 2 * data.radius + 'px',
borderRadius : data.radius + 'px',
fontSize : (1.8*data.radius) + 'px',
textAlign : 'center'
});
}
let time = {progress: 0};
var master_timeline = gsap.timeline({paused: true});
master_timeline.add(orbits_timeline, 0);
master_timeline.paused(false);
function orbits_timeline(){ // We use GSAP to do te animation
var tl = gsap.timeline();
tl.to (time,
{progress : 1, // time.progress goes in increments from 0.0 at the start to 1.0 at the end
ease : 'linear',
onUpdateParams: [time], // The parameter for the function called on update
onUpdate : function(time) {
let factor = -time.progress * 2 * Math.PI;
for (let i = 1; i < bodies.length; i++) { // animate the bodies here;
let body = bodies[i];
let data = params[body];
let r = data.orbit_r * params.sun.orbit_delta;
let w = data.orbits * factor;
data.delta_x = -r * (1 - Math.cos(w));
data.delta_y = -r * Math.sin(w);
$('#'+body).css('transform',
`translate(${data.delta_x+params[data.parent].delta_x}px,
${data.delta_y+params[data.parent].delta_y}px)`);
}
},
duration : 20 // Animation duration = 20 seconds
}
);
return tl;
}
});
</script>
</html>That’s great. Thanks!
…and SMOD?
Wow, that is amazing animation, mainly CSS!! Incredible.
That is so cool! Bravo @elusien. I intend to look into GSAP - it looks utterly brilliant.
This topic was automatically closed after 90 days. New replies are no longer allowed.