Kilma Basita 3

Okay.
So now I’ve added a 1-sec fade to when you transition from seeing a word, then view its definition on the “back” of the card. I also blurred a free pic of a mosque (photo by Manprit Kalsi) that I downloaded from Pexels to use as background.

So far so good.

But what if I wanted to see not just 1 word, but a bunch of them?

Meaning in more formal terms:

  1. provide the ability to store a lexicon of words
  2. let 1 mouse click bring up the next word in a fixed sequence (ie, from the lexicon)

For this, we are going to have to add JavaScript functions.

But before we do that, would it be possible to have an embedded SVG image as  background, instead of a link to a jpg pic (which is what Basita 3 does)?

If so, then it might also be instructive to try some SVG special effects, such as blurring.

Okay, these next posts will be technical, so I will put them up on my technical blog, and link to them from here with a general audience non-technical post.

 

leaving america

Kilma Basita 2

Here is an improvement over the initial version.
I got rid of the flip or card rotation, and made it so that you can see a word, then, if you hover a cursor anywhere over the card, its definition on the “back” of the card.
That is a good start.
I won’t go over the code, because this is not a tech blog.

Okay,

All’s well and good so far, what if I wanted to slow down the transition from front to back of the card? Can this be done?

Kilma Basita

I thought of this exercise in SVG programming after coming across Miami’s Code/Art web site and the world of P5.js the other day.

Kilma basita in Egyptian Arabic means literally a small word, as in a brief conversation.

The  function of this SVG app is to serve as a study aid for memorizing words and their meaning.

In this version, all I do is demo how to create an index card that flips when hovered over with a mouse.

I plan to develop increasingly sophisticated versions of this simple program.

For example, I’m already noticing that it would be nice if the lines lettering and lines of the front of the card did not appear when the card is flipped.

So that is what I’m are going to attempt next.

You can try it yourself, by editing the Pen you see above.

leaving america