CATEGORY


Use blueprintcss the SASS way

As a big fan of both, blueprintcss and SASS I always wanted to have them combined. As these two utilities are my major project dependencies I was looking for a way to shorten the time for an initial project setup and to have a more consistent setup across all projects in general. For this purpose I have created a complete port of blueprintcss to SASS with all advantages SASS offers to the CSS developer.

The most important feature is the possibility to change the grid setup by simply chaning some -blueprint-grid parameters.

/* Grid setup */
$-blueprint-grid-columns:24;
$-blueprint-grid-width:30px;
$-blueprint-grid-gutter:10px;

Continue reading



SASS Mixins

Here are my SASS mixins i am currently using. Maybe someone can use them:

/**
 * CSS3 Border-Radius
 *
 * @param $topLeft Either the top left radius, if no other param provided, this value is applied for all params
 * @param $topRight [optional]
 * @param $bottomRight [optional]
 * @param $bottomLeft [optional]
 */
@mixin border-radius($topLeft, $topRight : null, $bottomRight : null, $bottomLeft : null) {
	@if $topRight == null and $bottomRight == null and $bottomLeft == null {
		$topRight : $topLeft;
		$bottomRight : $topLeft;
		$bottomLeft: $topLeft;
	} @else if $bottomRight == null and $bottomLeft == null {
		$bottomRight : 0;
		$bottomLeft : 0;
	} @else if $bottomLeft == null {
		$bottomLeft : 0;
	}
	-moz-border-radius-topleft: $topLeft;
	-moz-border-radius-topright: $topRight;
	-moz-border-radius-bottomright: $bottomRight;
	-moz-border-radius-bottomleft: $bottomLeft;
	-webkit-border-radius: $topLeft $topRight $bottomRight $bottomLeft;
	border-radius: $topLeft $topRight $bottomRight $bottomLeft;
}

/**
 * CSS3 Box-Shadow
 *
 * @param $inset Either true or false
 * @param $x
 * @param $y
 * @param $blur
 * @param $spread
 * @param $color
 */
@mixin box-shadow($inset, $x, $y, $blur, $spread, $color) {
	@if $inset == true {
		$inset : inset;
	} @else {
		$inset :"";
	}
	-webkit-box-shadow: #{$inset} $x $y $blur $spread $color;
	-moz-box-shadow: #{$inset} $x $y $blur $spread $color;
	box-shadow: #{$inset} $x $y $blur $spread $color;
}

/**
 * CSS3 Text-Shadow
 * @param $x
 * @param $y
 * @param $blur
 * @param $color
 */
@mixin text-shadow($x, $y, $blur, $color) {
	text-shadow: $x $y $blur $color;
	filter: dropshadow(color=#{$color}, offx=#{$x}, offy=#{$y});
}

/**
 * CSS3 Multi-Column Layout
 * @param $columns
 * @param $gap
 */
@mixin columns($columns, $gap) {
	-moz-column-count: $columns;
	-moz-column-gap: $gap;
	-webkit-column-count: $columns;
	-webkit-column-gap: $gap;
	column-count: $columns;
	column-gap: $gap;
}

/**
 * CSS3 Outline
 * @param $thickness
 * @param $style
 * @param $color
 * @param $offset [optional]
 */
@mixin outline($thickness, $style, $color, $offset : null) {
	outline: $thickness $style $color;
	@if $offset != null {
		outline-offset: $offset; /*Delete if you don't want an offset*/
	}
}

/**
 * CSS3 Transition
 * @param $property
 * @param $duration
 * @param $function [optional]
 */
@mixin transition($property, $duration, $function : ease) {
	-webkit-transition: $property $duration $function;
	-moz-transition: $property $duration $function;
	-o-transition: $property $duration $function;
	transition: $property $duration $function;
}

/**
 * CSS3 Transformation
 * @param $scale
 * @param $rotate
 * @param $translate
 * @param $skew
 */
@mixin transform($scale, $rotate, $translateX, $translateY, $skewX, $skewY) {
	-moz-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	-webkit-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	-o-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	-ms-transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
	transform: scale($scale) rotate($rotate) translate($translateX, $translateY) skew($skewX, $skewY);
}

/**
 * CSS3 Background Gradient
 * @param $color1
 * @param $color2
 */
@mixin gradient($color1, $color2) {
	background: -moz-linear-gradient(top, $color1 0%, $color2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color1), color-stop(100%,$color2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, $color1 0%,$color2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, $color1 0%,$color2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, $color1 0%,$color2 100%); /* IE10+ */
	background: linear-gradient(top, $color1 0%,$color2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=0 ); /* IE6-9 */
}


PHP Enums: The not so bad way!

As the topic of this post already mentions, this is about Enums in PHP. Like some other script languages (f.e. ActionScript) PHP does not support the declaration of enums out of the box. There is a PECL extension, that provides a basic enum implementation called SplTypes. The related class is called SPLEnum and as you can see in the SplTypes documentation it gives you some kind of basic enum behavior. But if you try to install this extension (i tried with Ubuntu 10.10 and all updates) you will have no luck. I got some wired messages about a duplicate “static” definition.

There are also a lot of other enum implementations available for PHP, but most of the time they suck, either they are to complicated to use or they simply suck. The solution i want to provide is far away from perfect, but there will never be a perfect solution until enums become an integrated type within PHP. My basic usage scenario for enums in php includes the comparison of object states.

class MyEnum {
const SUCCESS = 'success';
const ERROR = 'error';
}

Its easy and most of the time it will do the trick. But if i work on bigger projects, comparison of constants sometimes lead to strange issues which are hard to debug. What i need is a more stable comparison that avoid conflicts by design. Have a look at my example and let me know what you think.
Continue reading



Diploma

I want to share some basic information about my diploma, i haven’t had much time last year to avoid the big void here, so here is a little update. Beyond you find a little summary from the thesis and for sure some pics.

Games are an essentiel part of our society. Since ages we like to play and nothing has changed since the new-media-revolution arrived. Games became one of the most important parts of the media-industry.
One scheme in context of videogames is especially successful: the simulation of virtual worlds and their interactivity. The foundation of this success is a constant development of the technology behind the games. Parts of this technology are a visual, a sound and an interactive component. The evolution in terms of technology is heavily linked to hardware-development. The applications are simply following the hardware-enhancements.
In the past, nobody thought it would be possible to have volumetric clouds rendered in real-time, or that you can have an exorbitant count of polygons in one scene. There is a nice side-effect of this strong link between hardware- and application-enhancements. Gamers are able to enjoy innovations all the time.
In context of videogames, the main improvements that have been made where related to graphic and interactive components. When we talk about interactivity, we are talking about physical simulation and how we are able to achieve realistic behaviour in a virtual environment.
Just think about simple things like open a door or a ball that is falling down to the floor or even more complex things like steering a car in a realistic manner. Physic-simulation is a very important part for video-games.
The simulation of complex physical behaviour is usually only limited by the available hardware. A major target of this paper is to have a proof of concept for typical end-user hardware like a game-console.
Microsoft is offering the XNA framework for their game-console Xbox 360. So it is possible for every developer to have their applications run on the console.
The area of research i have chosen, is the realistic simulation and visualization of fluids in context of real-time environments. A fluid can be a gas or a liquid. Fluids are not very commonly used in nowadays computer-games, but there is a particular interest into this topic. Fluid-simulation cannot be replaced by a more simple approximation. The reason is the good quality of the results produced by a fluid-simulation. New hardware, especially massiv-parallel systems like the GPU, allows us to have realtime simulation implemented into interactive environments. This paper should give a comprehensive overview about fluid-simulation and visualization.
Continue reading


#twittercoding: 140 char crazyness

Quick start (AS3, strict-mode:disabled)

g=graphics;
mt=g.moveTo;
lt=g.lineTo;
ls=g.lineStyle;
m=Math;
r=m.random;
s=m.sin;
i=0;
o={};
function f(e){/*src*/}
addEventListener("enterFrame",f);

I am so addicted, i can’t stop…

My 140 chars of legend…. wait for it -dary.

#tweetcoding – “Pipes” http://twitter.com/eliias/statuses/1228303442

m=.05;if(!o.r)o.r={x:r()*m,y:r()*m,z:r()*m};w=20+s(i*o.r.y);l=2500/w;ls(1);g.drawCircle(200+s(++i*o.r.x)*l,200+s(i*o.r.y*2)*l,l/l*w);

Can’t stop #tweetcoding – “Shorty” http://twitter.com/eliias/statuses/1228042430

mt(200,200);g.lineStyle(1,0);lt(s(i+=0.1)*i/0.1,m.cos(i)*i/0.1);lt(s(i+5)*i/0.1,m.cos(i+5)*i/0.1);

#tweetcoding – “Crazy” http://twitter.com/eliias/status/1227884420

g.clear();g.beginFill(0);if(!o.s)o.s=[];o.s[o.i=i%440]={x:o.i%11*40,y:i++%440};while(t=o.s[o.i--])g.drawCircle(t.x,t.y,s(i/40+o.i)*30)



Fireworks: Font and Text-Rendering

One thing i never understand was why a lot of people prefer Photoshop instead of Fireworks for prototyping and building up a layout for a webapp or site.

For me it was always clear, that the basic vector tools, some bitmap effects(live-effect) and the ability to handle the file-export easily are enough to setup a layout. At least the pixel-perfect positioning threw input fields of vector-forms is a main, maybe the biggest reason for me to use Fireworks.
Continue reading



Kontain is ready for use

Finally, the Alpha state is ready for public. I have tested some features of the system and most of them are quite impressing. But as a WordPress user i still miss some things. Most important for me is to be different with my blog from others, not only in entries also in design and appearance. There should be a possibility to access the data threw an API (webservice). I would definitly swap from WordPress to kontain if i get a chance to switch back any time and/or import data from each service to the other.

I like the way f-i is building user-interfaces and the media-experience is great. So this is still an Alpha, but i am looking forward to the features coming.



PixelBender: Damped Sin Waves, Gauss Curve

On my search for the perfect “shockwave” i played a bit around with damped sin waves and a Gauss curve, but first some words about my first week with PixelBender.

With PixelBender toolkit it is possible to build shaders very fast and easily. It took me less then 10min till i compiled my first shader. One reason is, that in my opinion the code is very intuitional to write and even greater, the code is very compact, f.e. vector and scalar types are doing basic math operations together without a special cast or convertion.

This is great and gives you the motivation for doing more (like i do now). But after playing arount i am going to miss more and more features.

First, the UI is easy to use, but i want to split coding/preview window or at least rearrange it, it’s annoying, even on my 24 inch display, if you are using a test-image greater than 400px in height (windows are tiled horizontal).

Next thing, the FlashPlayer implementation of the filter-runtime is not able to interpret any flow-controls. The only one allowed is a simple if (condition) else condition. So that means, no loops (neither while nor for). I have seen a zoom-blur implementation written with a code redundancy count of 15!!! This definitly sucks.

There are a few more limitations but they will not care you as much as the one i mentioned above.

Biggest wish of mine is, i have read somewhere that this is on the roadmap already(i hope that’s true), to have a low-level tool for compiling PixelBender sources. I am looking forward to build a Eclipse-plugin for writing PB-code and have some elementary “curves” you can drag and drop into it. A standalone-viewer would also be great.

Some words about PixelBender-runtime performance. I have not done soooo much tests with FlashPlayer by now, but my first tests giving me very bad results on images that are a bit greater than your thumb (Ok, i have tried a bigger one with success, but f.e. 800x800px with a simple sin-wave is going mad). On my 2 workstations (very similiar hardware setup) i get strange differences on framerate count. Both are running in GPU mode, but on the first one i am getting a constant framerate of about 60fps, the other PC shows different framerates in a high frequency starting from 150 up to 1500. All this numbers i got with the preview-mode in PixelBender toolkit. If you are going to use a PB-shader with Flash, things get even worse. I got a dramatic drawdawn with my framerates and a high CPU-load one one of my machines.

I think that behaviour means, FlashPlayer is using CPU to calculate the shader instead of GPU? I don’t know by now, so it is very speculative to say something concrete. I hope that it will be possible to recognize a CPU fallback at runtime, so you have at least the chance to turn off your “stunning” effects. I am looking forward to publish more info on this issue soon.

So, enough said about the drawbacks, go on with the interesting part.

For those, which did not read my previous post, i am going to proof if it is possible to have some post-processing in realtime for games with PixelBender. I want to create something like a shockwave with a simple distortion of the image.

PixelBender sources (formula is not optimized)

 <languageVersion : 1.0;>
 kernel HorizontalAverage
 <
 namespace:          "com.impossiblearts";
 vendor:             "Hannes Moser";
 version:            1;
 description:        "damped sin-wave depending on time";
 >
 {
 input image4 source;
 output pixel4 result;

const float PI = 3.14159265358979323846264338327950288;

parameter float2 pos
 <
 minValue:float2(0.0, 0.0);
 maxValue:float2(2880.0, 2880.0);
 defaultValue:float2(400.0, 400.0);
 >;

parameter float amount
 <
 minValue:0.0;
 maxValue:10000.0;
 defaultValue:5000.0;
 >;
 parameter float wavelength
 <
 minValue:1.0;
 maxValue:2500.0;
 defaultValue:150.0;
 >;

parameter float t
 <
 minValue:0.0;
 maxValue:1000.0;
 defaultValue:0.0;
 >;

parameter float overlay
 <
 minValue:0.0;
 maxValue:100.0;
 defaultValue:10.0;
 >;

void evaluatePixel()
 {
 float2 coord = outCoord();

float dist = distance(pos, coord);
 float curve = (1.0 / sqrt(1000.0 * PI)) * exp((-1.0/wavelength) * pow(-t + dist, 2.0)) * sin(dist / overlay) * amount;
 float2 cw;
 cw = coord + curve;
 result = sample(source, cw);
 }
 }
 

Continue reading




© 2006 - 2012 Hannes Wolfgang Moser