Safsalog http://blog.safsal-multimedia.com Mon, 22 Feb 2010 01:18:49 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 A little digital clock I made in Processing http://blog.safsal-multimedia.com/code/a-little-digital-clock-i-made-with-processing/ http://blog.safsal-multimedia.com/code/a-little-digital-clock-i-made-with-processing/#comments Sun, 21 Feb 2010 19:26:57 +0000 Shira http://blog.safsal-multimedia.com/?p=131 This is a little digital clock I made in Processing a while back. I’ve just come across it by chance and decided I actually quite liked it.

And here’s the tiny little script for those of you who are interested:


void setup(){
textFont(loadFont("a.vlw"));
}
void draw(){
background(0);
int m=minute(),s=second(),h=hour();
float hy=(height+20)/60*m;
float my=(height+20)/60*s;
float sy=map(millis()%1000,0,1000,0,120);
text(h,9,hy);
text(m,40,my);
text(s,70,sy);
}

]]> http://blog.safsal-multimedia.com/code/a-little-digital-clock-i-made-with-processing/feed/ 0 Species of Spaces – The Movie http://blog.safsal-multimedia.com/visualisation/species-of-spaces-the-movie/ http://blog.safsal-multimedia.com/visualisation/species-of-spaces-the-movie/#comments Sun, 26 Jul 2009 13:52:24 +0000 Shira http://blog.safsal-multimedia.com/?p=95 ]]> In Species of Spaces, French Novelist Georges Perec looks into “spaces that are close to hand”.
“There’s a whole lot of small bits of space,” Perec writes. “To live is to pass from one space to another, while doing your very best not to bump yourself.”

Species of Spaces - p. 11

Species of Spaces - p. 11

He starts with the way text inhabits the space of a page (see scan above) and goes on to examine the bed, the bedroom, the apartment, the building, the street etc.

For Perec, space begins with the textual description of the space and with the signs that represent it:
“This is how space begins, with words only, signs traced on the blank page. To describe space: to name it, to trace it, like those portolano-makers who saturated the coastlines with the names of harbours, the names of capes, the names of inlets, until in the end the land was only separated from the sea by a continuous ribbon of text. ”

Taking a more hands-on approach to this exploration of the relationship between space and its semiotic representation, I’ve build a 3D room made out of parts of Perec’s text . The words describe and represent the space and at the same time actually (or rather virtually) create it.

Species of Spaces – Georges Perec in 3D from Shira G on Vimeo.

I’m not sure there’s anything to be learned from this little experiment, but I do like the way the text creates a space that seems both solid and fragmented, fixed and floating, logical and unreal.

I heartily recommend reading Species of Spaces (as well as perec’s other books, as a matter of fact). Some of the text is available on Google Books.

]]> http://blog.safsal-multimedia.com/visualisation/species-of-spaces-the-movie/feed/ 0 Processing sketch – making progress http://blog.safsal-multimedia.com/visualisation/processing-sketch-making-progress/ http://blog.safsal-multimedia.com/visualisation/processing-sketch-making-progress/#comments Mon, 13 Jul 2009 13:43:01 +0000 Shira http://blog.safsal-multimedia.com/?p=67 ]]> Here’s the new screenshot of my processing sketch:

Processing sketch screenshot #2

Processing sketch screenshot #2

]]> http://blog.safsal-multimedia.com/visualisation/processing-sketch-making-progress/feed/ 0 My new processing sketch http://blog.safsal-multimedia.com/visualisation/my-new-processing-sketch/ http://blog.safsal-multimedia.com/visualisation/my-new-processing-sketch/#comments Thu, 09 Jul 2009 08:25:03 +0000 Shira http://blog.safsal-multimedia.com/?p=51 ]]> I’ve started working on a processing sketch. I’m having fun working on it so I wanted to share what I’m doing, but I don’t want to share too much at this point (can’t shake off these designer instincts of mine).
So I’m going to post some screenshots here while I work on it. As my work progresses, and as the sketch becomes clearer and better defined in my head, the screenshots posted here will also become less foggy and blurry. This way you can experience the process with me.

Let’s see how it goes.

processing sketch screenshot #1

processing sketch screenshot #1

]]> http://blog.safsal-multimedia.com/visualisation/my-new-processing-sketch/feed/ 0 Using Cufón with Right-To-Left text http://blog.safsal-multimedia.com/code/using-cufon-with-right-to-left-text/ http://blog.safsal-multimedia.com/code/using-cufon-with-right-to-left-text/#comments Mon, 25 May 2009 10:03:02 +0000 Shira http://blog.safsal-multimedia.com/?p=9 Cufón on a client's website that makes use of a custom font in Hebrew, only to discover that Cufón does not support RTL text. Well not at the moment, anyway. Simo Kinnunen, the man behind Cufón, has informed me that they are hoping to provide RTL support later this year, but for those of you who like me need a solution NOW, here's a little jQuery script I've written to solve the problem for my client.]]> A couple of days ago I set out to implement Cufón on a client’s website that makes use of a custom font in Hebrew, only to discover that Cufón does not support RTL text. Well not at the moment, anyway.
Simo Kinnunen, the man behind Cufón, has informed me that they are hoping to provide RTL support later this year, but for those of you who like me need a solution NOW, here’s a little jQuery script I’ve written to solve the problem for my client.

It slows things down a bit, obviously, but if you don’t make heavy use of Cufón on the page and you’re willing to tolerate the occasional flicker,  I think it’s a usable solution. At least for the time being until the Cufón lot offer native RTL support.

The HTML:

I’ve used Cufón for the main menu links and for several <h1> and <h2> titles throughout the site.  I’ve added class=”cufon” to the titles I wanted to replace as a jQuery hook.

<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/cufon-yui.js"></script>
<script type="text/javascript" src="scripts/Tabasco_500.font.js"></script>
...
</head>
<body>
...
<h1 class="cufon">השגי המועדון</h1>
<ul id="mainmenu">
<li><a href="homepage.asp">דף הבית</a></li>
<li><a href="theclub.html">המועדון</a></li>
<li><a href="training.html">האימונים</a></li>
...
</ul>
...
</body>

The script:

The web-safe font I use for the headers is much larger than my custom font size (when given the same font-size attribute), so before actually replacing the font I’ve had to change the font-size so that it would look roughly the same size.

Because my document text direction is set to RTL , I’ve also had to change the direction of the text I wanted to replace to LTR (so that when the script reverses the text, the words won’t come out all jumbled up). I’ve done that by wrapping the text with <bdo dir="ltr"> </bdo> tags. If your document is set to LTR (or defaults to it) you can skip this step.
$(function(){
$('h1.cufon').css('font-size', '19px').wrapInner('<bdo dir=ltr></bdo>');
$('h2.cufon').css('font-size', '17px').wrapInner('<bdo dir=ltr></bdo>');
$('#mainmenu>li>a').wrapInner('<bdo dir=ltr></bdo>');
});
After these preliminary steps I’ve included the replacement function:
Cufon.replace('bdo');
The script then executes the text-reversing function for each <bdo> tag I’ve inserted earlier (if you didn’t need to reverse the text direction, you can of course use any other tag or attribute as a hook for this function).
This function takes the text inside the tag and assigns it to the variable ‘word’. It then splits the text to its individual characters and reverses their order. The new text is then joined together and assigned to the variable ‘newtext’. Finally the new text is inserted into the targeted element (in this case, the <bdo> tag).
$('bdo').each(function()    {
var word = $(this).text();
var splittext = word.split("");
var reversedtext = splittext.reverse();
var newtext = reversedtext.join("");
$(this).text(newtext);
});
That’s all there’s to it.  Here’s the full script:
$(function(){
$('h1.cufon').css('font-size', '19px').wrapInner('<bdo dir=ltr></bdo>');
$('h2.cufon').css('font-size', '17px').wrapInner('<bdo dir=ltr></bdo>');
$('#mainmenu>li>a').wrapInner('<bdo dir=ltr></bdo>');
Cufon.replace('bdo');
$('bdo').each(function()    {
var word = $(this).text();
var splittext = word.split("");
var reversedtext = splittext.reverse();
var newtext = reversedtext.join("");
$(this).text(newtext);
});
});
You can see this script at work on my client’s site.

Don’t forget to link to the jQuery library, the Cufón script and the replacement font.

I’ve used the jQuery library because I already use it elsewhere on the page. Loading it just for this little script alone does seem like a bit of an overkill, so if you’d rather not use jQuery, this script could easily be translated into ‘real’ javascript.

]]> http://blog.safsal-multimedia.com/code/using-cufon-with-right-to-left-text/feed/ 7