Play the
Video Poem

Memories :

( BabyBoomers:
The existential dream
All you need is love....
Beatles 1967
Mathieu. ecoutes-tu?)
~~~~~~~~~~~~~~~~~~~~~~
There was something about the sea
And the stillness of that night,
and the million moonlike minnows
that crest the waves then hide from sight.
Just the sigh and the hush
of their forward and back,
And the breeze like the touch
of warm breath on my neck.
But there's a stone in my heart
where a memory should be,
And all that talk I remember
of how we need to be free,
And a face full of grief
like the salt of the sea.

Now in my head you're in my arms,
And we're standing in that sea,
And I hear that whispered promise still
That only love can make us free.

There was a stillness in the night
and the whisper from the sea,
And the stone was growing darker
and my wrist's a mystery.
And in the shadow of the trees
where I saw you kiss his lips
The part of me that's dying's
flowing through my fingertips
And the music that was playing
is just a dischord in my head
And the song is just a litany,
a litany for the dead
I am sorry....was all she said

So just hold me in your arms
And baptise me in the sea
And tell me - is it love
That one day will set us free?

And now the dancing has stopped
on the path lit by the moon
And that distant seagull's cry
still sounds lost and out of tune
Like that broken violin
on that August afternoon
When the paths were mapped and charted
in these stars above this dune.
And if that life was never broken
and those tears were never shed
Then those words were never spoken
and Paul was never dead.

And if the sea could wash my sins away,
And the sun could cleanse my soul,
I could love with all my heart again,
And there wouldnt be this stone.

So long ago now that memory of me
where the mountains plunge down headlog
In their rush to meet the sea
And the lime white cottage in it's crescent of trees
And the peat and the salt and the seagull memories.

And his eisel in the corner
and his paintings round the wall
And his dog that loved you instantly
and came to your first call
And yet the foolish wish remains
to go back and change it all,
So the ghosts that haunt me now
might not be born at all,

What final stupid treachery
is etched upon this stone
To wish the world away
just so I can be alone

Vol
this is male figure viewed from behind

Ok. Where to begin? First,- it's likely that no one is actually reading this. The probability is that I'm now speaking to an algorithm in a machine, if so,- well hello machine! But, if a sentient being is visiting, let me say welcome and I hope you find something interesting on this site.
If any CS50 staff are reading this then, -a big thank you for the work that you have all done/are doing to make this course possible. It's been great course and so far I'm really enjoying it. Thanks to all for providing me with this wonderful route map for my continuing journey of curiousity.
So, since you've landed here I guess I should give you some background about myself. (You'd probably expect that - given the page is called 'about me'.)
I decided to embark upon the CS50 course, not as a means to a career but merely to indulge the pleasure I get from computers and computer technology in general. This has been a continuing fascination for me from about circa 1980 when a friend and I bought a Sinclair ZX computer kit (awesome- 1Kb RAM - 4Kb ROM) and thus began my fascination. This kit had just come on the market as a part of the then nascent -' available for all' - home computing technology.     I imagine you have already guessed that I'm not a kid. Lol. In fact, I was born on the 30th of September 1948 and grew up in the back streets of Belfast Northern Ireland, so a swift calculation will tell that I am almost 72 years of age.      For a little more context I'll tell you that, (largely because I ran away from home at the age of 15), I have no formal academic qualifications whatsoever.
During this escapade I found jobs picking potatoes for ugly french farmers, pearl diving, (co-workers euphemism for dish washing in cafes and restaurants), hitch hiking around Europe, and generally being young and free, and enjoying the company of girls with names like Yvette and Anna-Maria. But I digress. When I did return home to my understandably anxiety stricken parents, I did complete the courses I'd been studying (loosely) at high school but, study and I were mismatched. So although I later attended evening classes to, (barely), obtain, higher Certs. in Maths and English (my two favourite subjects at which I was reasonably profeciency), - I found money a much more attractive proposition than years more study. (Falling asleep in most classes after a day's work didn't help my grades! btw)
The Sinclair ZX80 was also my first introduction to programming languages in the form of 'BASIC' and although I have indulged in various programming projects in all the years since,- it has always been in a haphazard and informal way and peripheral to my main life requirements of simply finding a way to survive and provide for the needs of me and my family.
Just reminiscing. At that time, if I renemeber correctly, I was then practicing 'existencialism lite', - ie., my own watered down version of that philosophy....(perhaps it can't really be anything else!). Anyway, I had read 'Nausea' by Jean-Paul Sartre, then his trilogy 'The Roads to Freedom'. This was dramatised by the BBC and the haunting theme that accompanied each episode is still something I listen to. (if you wish you can too. ).

Enough about me - more about this page and the site in general.

So anyway, I have reached that point in the CS50 course that requires me to complete this particular Project. It has been a journey let me say but still, a labour of fun despite the mamy, many frustrations. I began this problem set with a concept and, armed only with Curiosity and dogged determination, I set out to make the concept work. Given that I was a virtual newbie and required to comply with the specs that were laid out for the project, - using HTML Bootstrap and CSS only - (self-imposed non JavaScript), it was certainly challenging! Had I been less ambitious I could certainly have completed the project far sooner and more easily, but I wanted to create something a little different, and for me, the fun was in the challenge of doing that! Every failure (of which there were many, many) and every head banging frustration served to teach me more, which after all, was the name of the game for me. I had the time, and as I said, it was an indulgence. Every page of HTML provided it's own unique challenges.

Site Concept

As I see it, life on Earth exists in a pretty hazardous environment, and for human beings the challenge, without seeming too melodramatic, is be able to adapt and survive and derive some pleasure doing it!. One of the the best weapons we have in our survival armoury is curiosity.   The more curious we are the more we learn. Curiosity is the motivation to ask the question. To open those doors in our minds and find the answers by seeing what lies beyond. Every question we ask opens another door, revealing yet more doors and more questions and more answers, each a potential existential tool. Doors to perception.
With this in mind, I decided that the central visual image for this website should be that of a symbolic door.   Book covers, windows, doors all seemed appropriate. (as depicted in the opening page of this website -the index page, or, as above, on this page).
What was not apparent to me at the time was the huge gap between my ambition and my knowledge of HTML, CSS and Javascript, reluctantly resorting to the latter because no matter what diabolical tricks i conceived to try to bend HTML and CSS to my will, I finally had to admit that some things just could not be done within their large but limited boundries. )

Mechanics and Logic

The Java script grew like a cancer. The more I understood it the more I realised it's powerful potential. and just had to play with it!   But before I get into more aspects of the Javascript, there are a few other things I'd like to touch on.
First - the absolute curse of writing a website that must conform to the vagaraies of multiple devices, orientations, browsers and all their conjoined idiosyncrocies is the stuff of nightmares.
My first taste of this was when I 'discovered' that hover in PC terms was (hindsight - obviously) different to it's behaviour on a touch screen.   I had finally worked out how to flip open the door to reveal images behind using Hover selector (not the work of a few minutes!), only to realise that I needed a click method because my design needed a wall with clickable posters. point is I did this using the pseudo class selector Focus and the tabindex. All the clickables (posters etc.), are image based which I did in GIMP. For the library however, although I tried successfully do do the same thing with images of pages developed in GIMP, this was tedious because I hadn't yet discoverd the backface-visibility property so I was mirror imaging some pages. Nightmare! I really didn't like this approach so I set about discovering how to do all with text using just HTML and CSS. Took a long time to perfect (loose), but I suceeded to a satisfying degree.
I should point out the obvious *** this was never meant to be on even nodding terms with a commercial website! This was all pure invention and puzzle solving, curiousity and learning.
Anyway, I wanted the library particularly to be easily extensible for by now I had a project of my own in mind. Every readable book in the library links to one CSS stylesheet and each HTML page can be setup from a template.
I should also mention the beautiful CSS shape-outside property. This I used to shape the text around the male figure gazing out the window. I'll just mention that I used a 'mask' of to create the parameters of the shape then overlaid the actual, absolutely positioned figure on top. )

Javascript Logic

Now, as far as the javascript is concerned... I wanted the video (edited in Blender 2.8 VSE), to be playing emulating standing in a room with a view thru an open window. I used the 3d Transform perspective property and made an - ok crude- windowsill and used the inheritance aspects to pass the text of the poem thru which gives a kind od star wars effect or - what I wanted - the idea of the poem's words drifting to the distant horizon!   Well that's the idea!   I wanted the user to control the video and the text scroll toggling on and off and this is where the Javascript became necessary and grew from a simply script of a few lines into something bigger.
In effecting this script, there are essentially 2 parts.
1) playing and controlling the video
2) synchronising those controls with the poem/text scrolling
Bear in mind that this had to function on all those pesky devices and browsers.
the text scroll co-dependencies are the screen size and time length of the video, the height of the text - (the text height is also dependant on the font-size which itself is dependant on the video screen size). All theses dependencies vary according to, of course, the device being used. Therefore I needed to glean some variables. As well as the normal video control objects we need the video width and height (device variable), - postulate font-size corelate to video width and transition duration? The bigger the font size - The longer the text. the longer the text - the quicker the text must travel to its fixed destination using the margin-top and duration properties- so the shorter the transition duration. (This thinking not exactly right.)
Logic: the duration of the transition must always be the length of the video remaining,(ie. after pausing) and an allowance for the final lines position of the text. So duration is a variable determined by how long before the actual video ends.
1st - get video screen size - varying with each device.
2nd - determine the font-size based on device vw and vh
3rd - use font-size and line-height times the number of lines in the poem (known) to calculate the height of the text div I want to move.
4th estimate the margin-top destination and use the video length of 191 secs as the duration to get there.