I wanted to talk about distances in space and found a video by James O’Donohue that showed a beam of light going from the Earth to the Moon and Mars.
This one has the beam going from the Sun to Mars. I talk about various aspect of dimensions and speeds along the way since it takes some time… and it would be boring to death to just have the beam.
Thank you for watching. 
Hi @Alexis_Wilke - The thing I love about this forum is the rich variety of subject matter people showcase through their videos, and the way it brings people with different interests together.
I loved watching this! To me it’s instructional yet entertaining and actually quite inspiring.
You are a fine teacher, drawing the viewer in and adding new information steadily as the video progresses, with a touch of humour on the way.
Your graphics are great too. I appreciate the sans-serif font and the right justification of the text. Looks great even on my 17 inch laptop.
May I just offer two points of slight constructive advice? 1) at the beginning while you were speaking I’d have liked for there to be no text to read as well, and the text to appear after you spoke. Too much to take in! Or maybe the text could have been there but stayed visible for longer? Maybe just a personal thing though.
also 2) there’s a typo at 12.10 - galaxy, not gallaxy.
Apart from these two very minor points, this is an excellent production 
PS How did you create the fast stopwatch effects (bottom left hand corner)?
I love this video. Some years ago as an exercise I wrote some HTML/CSS/Javascript code to simulate the orbital motion of the inner planets of the solar system (not to scale). I’ve included the code below if you want to run it:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#solar_system {position: relative; width: 1600px; height: 1600px; background-color: #333333}
#sun {position: absolute; width: 80px; height: 80px;
top: 380px; left: 580px; background-color: #ffff00;
-moz-border-radius: 40px; border-radius: 40px;
text-align: center; line-height: 80px;
}
#mercury {position: absolute; width: 18px; height: 18px;
top: 335px; left: 535px; background-color: #ffaaaa;
-moz-border-radius: 9px; border-radius: 9px;
text-align: center; line-height: 18px;
}
#venus {position: absolute; width: 36px; height: 36px;
top: 300px; left: 500px; background-color: #aaaaff;
-moz-border-radius: 18px; border-radius: 18px;
text-align: center; line-height: 30px;
}
#earth {position: absolute; width: 30px; height: 30px;
top: 200px; left: 400px; background-color: #ffaaaa;
-moz-border-radius: 15px; border-radius: 15px;
text-align: center; line-height: 30px;
}
#moon {position: absolute; width: 12px; height: 12px;
top: 150px; left: 350px; background-color: #cccccc;
-moz-border-radius: 6px; border-radius: 6px;
text-align: center; line-height: 12px;
}
#mars {position: absolute; width: 24px; height: 24px;
top: 100px; left: 200px; background-color: #ffaaaa;
-moz-border-radius: 12px; border-radius: 12px;
text-align: center; line-height: 24px;
}
</style>
</head>
<body>
<h1> The inner planets of the Solar System</h1>
<div id='solar_system'>
<div id='sun' >SUN</div>
<div id='mercury'>m</div>
<div id='venus' >v</div>
<div id='earth' >e</div>
<div id='moon' >m</div>
<div id='mars' >m</div>
</div>
</body>
<script>
( function ( $ ) {
jQuery.fn.orbit = function(s, options){
var settings = {
orbits: 1 // Number of times to go round the orbit e.g. 0.5 = half an orbit
,period: 3000 // Number of milliseconds to complete one orbit.
,maxfps: 25 // Maximum number of frames per second. Too small gives "flicker", too large uses lots of CPU power
,clockwise: true // Direction of rotation.
};
$.extend(settings, options); // Merge the supplied options with the default settings.
return(this.each(function(){
var p = $(this);
/* First obtain the respective positions */
var p_top = p.css('top' ),
p_left = p.css('left'),
s_top = s.css('top' ),
s_left = s.css('left');
/* Then get the positions of the centres of the objects */
var p_x = parseInt(p_top ) + p.height()/2,
p_y = parseInt(p_left) + p.width ()/2,
s_x = parseInt(s_top ) + s.height()/2,
s_y = parseInt(s_left) + s.width ()/2;
/* Find the Adjacent and Opposite sides of the right-angled triangle */
var a = s_x - p_x,
o = s_y - p_y;
/* Calculate the hypotenuse (radius) and the angle separating the objects */
var r = Math.sqrt(a*a + o*o);
var theta = Math.acos(a / r);
/* Calculate the number of iterations to call setTimeout(), the delay and the "delta" angle to add/subtract */
var niters = Math.ceil(Math.min(4 * r, settings.period, 0.001 * settings.period * settings.maxfps));
var delta = 2*Math.PI / niters;
var delay = settings.period / niters;
if (! settings.clockwise) {delta = -delta;}
niters *= settings.orbits;
/* create the "timeout_loop function to do the work */
var timeout_loop = function(s, r, theta, delta, iter, niters, delay, settings){
setTimeout(function(){
/* Calculate the new position for the orbiting element */
var w = theta + iter * delta;
var a = r * Math.cos(w);
var o = r * Math.sin(w);
var x = parseInt(s.css('left')) + (s.height()/2) - a;
var y = parseInt(s.css('top' )) + (s.width ()/2) - o;
/* Set the CSS properties "top" and "left" to move the object to its new position */
p.css({top: (y - p.height()/2),
left: (x - p.width ()/2)});
/* Call the timeout_loop function if we have not yet done all the iterations */
if (iter < (niters - 1)) timeout_loop(s, r, theta, delta, iter+1, niters, delay, settings);
}, delay);
};
/* Call the timeout_loop function */
timeout_loop(s, r, theta, delta, 0, niters, delay, settings);
}));
}
}) (jQuery);
$('#mercury').orbit($('#sun' ), {orbits: 8, period: 2000});
$('#venus' ).orbit($('#sun' ), {orbits: 4, period: 4000});
$('#earth' ).orbit($('#sun' ), {orbits: 2, period: 8000}).css({backgroundColor: '#ccffcc'});
$('#moon' ).orbit($('#earth'), {orbits: 32, period: 500, maxfps: 20, clockwise: false});
$('#mars' ).orbit($('#sun' ), {orbits: 1, period: 16000});
</script>
</html>How did you create the fast stopwatch effects (bottom left hand corner)?
That’s part of the software I wrote to generate the beam. The background with the Sun, the beam and the stopwatch are all in one movie created with ImageMagick (generated frames) and then ffmpeg (to create an MP4 used in Shotcut).
Too much to take in!
I totally agree about point (1). I was actually was thinking of that, but that’s a huge “production” and shot cut is not that easy to use to move everything at once. Maybe there is something I don’t know about shotcut…
The point is I added the small video where I speak near the end and it would have been a lot of work to move everything else. I had a synopsis before starting but that was missing from it. Oh well…
I’ll fix the “galaxy” spelling in my file, but I’ll leave the video as is on YouTube. It’s pretty long to upload!
Thank you for your feedback!
Elusien,
This is cool. Can I steal it and put it on my Star Gazer Rock astronomy website?
Mars disappear at the top, but I could look into fixing that.
Thank you.
Alexis
By all means you can use it. As I said it was a little exercise in programming I did a few years ago. It was interesting to see how little coding was necessary to produce the animation.
Great, thank you! I can put your name and/or a link too?
I just looked back at when I did the coding. It was 9 years ago in answer to a query from someone on the Stackoverflow website: https://stackoverflow.com/questions/7454667/jquery-plugin-to-make-an-element-orbit-another/
I loved the video. The music is perfect too. 
And finally, the beam of light reached Mars, the next destination for humans. 
Inkscape is great for graphics.
Yeah, the HTML feature in Shotcut is good functionality, but totally unusable… What I’d like to get is a way where I can click an icon like an “A” and then directly type over the video (i.e. WYSIWYG). Maybe one day. 
I have to disagree. Before the keyframe feature became available, the Text:HTML (or Overlay HTML) filter was really the only way to do animation within Shotcut itself, such as video credits, fancy titles, text lettering effects, exploding/imploding images and much more and several people tried to provide a better interface to Shotcut’s WebVfx framework to enable users with little or no knowledge of Javascript to do this.
Very nice video, Alexis! Love it!
Just one suggestion: at 10:55 ff its not “watts/day” - this is a bit misleading as on one m2 there would be much more energy generated over 24h (my panels give me easily 1,5 - 2,5 kwh/day and m2 (at around 20% efficiency).
What you mean is the everage power (not energy) over 24h (not power/day). The 164 watts is instant average power - its there for all time at average (over 24 h). That is what you mean i guess
Sorry - dont want to appear pissy It just hit my eyes.
I would also disagree! You can (could …) do amazing things with the Text:HTML filter in conjunction with @elusien’s framework if you have a little HTML knowledge and patience 
Hi Rilos,
Thank you about the info. I put a lot of info so I’m not too surprised that I would have a few mistakes in there…
Now, I got the number from Wikipedia, but I guess I missed the “average” word.
Other sources indicate an “Average over the entire earth” of “164 Watts per square meter over a 24 hour day”.
I may have to test the newer version of the text filter because the old one you had a popup and I had to re-edit it 100 times to get the correct size and position. With InkScape, it was close to instantaneous in that regard.
This topic was automatically closed after 90 days. New replies are no longer allowed.