Askmike.org

You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore.

De laatste paar weken heb ik me bezig gehouden met het redesignen van mijn portfolio website. Ik heb besloten de site in het Nederlands te houden in tegenstelling tot zijn voorganger.

Je kan de nieuwe website bekijken op mikevanrossum.nl

Hier kan je de oude website bekijken om te vergelijken: mikevanrossum.com

De blog pagina is nog niet af maar hij is nu toch al redelijk compleet. Laat me weten wat je ervan vindt!

You’ve found a dinosaur. This is one of my first posts about programming and the code quality is very poor, it is only here for archiving purposes.

Laatst kreeg ik de vraag hoe je het best een aantal willekeurige woorden uit een lijst haalt.

Hier heb ik even snel een klasse in elkaar gedraait die een array maakt, met daarin de top 50 films van IMDB. Hierna haal ik 4 willekeurige woorden uit dit array.

/** randomWords.as -- Mar 8, 2011
 *
 * Beschrijving: voorbeeld willekeurige woorden uit een array halen
 * 
 * @author Mike van Rossum
 *
 * Copyleft 2011, all wrongs reversed.
 */
package
{
    // Importeer benodigde classes
    import flash.display.Sprite;

public class randomWords extends Sprite
{
    // Variabele declaratie
    private var woordenLijst:Array;
    // Constructor functie
    public function randomWords()
    {
        woordenLijst = new Array(
            "The Shawshank Redemption (1994)",
            "The Godfather (1972)",
            "The Godfather: Part II (1974)",
            "The Good, the Bad and the Ugly (1966)",
            "Pulp Fiction (1994)",
            "Schindlers List (1993)",
            "12 Angry Men (1957)",
            "Inception (2010)",
            "One Flew Over the Cuckoo's Nest (1975)",
            "The Dark Knight (2008)",
            "Star Wars: Episode V - The Empire Strikes Back (1980)",
            "The Lord of the Rings: The Return of the King (2003)",
            "Seven Samurai (1954)",
            "Fight Club (1999)",
            "Goodfellas (1990)",
            "Star Wars: Episode IV - A New Hope (1977)",
            "Casablanca (1942)",
            "City of God (2002)",
            "The Lord of the Rings: The Fellowship of the Ring (2001)",
            "Once Upon a Time in the West (1968)",
            "Rear Window (1954)",
            "Raiders of the Lost Ark (1981)",
            "The Matrix (1999)",
            "Psycho (1960)",
            "The Usual Suspects (1995)",
            "The Silence of the Lambs (1991)",
            "Se7en (1995)",
            "It's a Wonderful Life (1946)",
            "Memento (2000)",
            "The Lord of the Rings: The Two Towers (2002)",
            "Toy Story 3 (2010)",
            "Sunset Blvd. (1950)",
            "Forrest Gump (1994)",
            "The Professional (1994)",
            "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb (1964)",
            "Apocalypse Now (1979)",
            "Citizen Kane (1941)",
            "North by Northwest (1959)",
            "American Beauty (1999)",
            "American History X (1998)",
            "Taxi Driver (1976)",
            "Terminator 2: Judgment Day (1991)",
            "Saving Private Ryan (1998)",
            "Vertigo (1958)",
            "Alien (1979)",
            "Amélie (2001)",
            "WALL·E (2008)",
            "Spirited Away (2001)",
            "The Shining (1980)",
            "Paths of Glory (1957)"
        );

        var willekeurigWoord1:String = new String;
        var willekeurigWoord2:String = new String;
        var willekeurigWoord3:String = new String;
        var willekeurigWoord4:String = new String;

        var random:int = new int;
        random = Math.random()*50;
        willekeurigWoord1 = woordenLijst[random];

        random = Math.random()*50;
        willekeurigWoord2 = woordenLijst[random];

        random = Math.random()*50;
        willekeurigWoord3 = woordenLijst[random];

        random = Math.random()*50;
        willekeurigWoord4 = woordenLijst[random];

        trace(willekeurigWoord1);
        trace(willekeurigWoord2);
        trace(willekeurigWoord3);
        trace(willekeurigWoord4);
    }

    // Eigen functies
}

(Je moet de code in debug runnen omdat ik antwoorden alleen trace, je kan de strings willekeurigWoord1-4 nu in textfields stoppen of wat je er ook mee wilt doen.)

Houd er rekening mee dat een woord meerdere keren kan voorkomen.

Omdat het niveau programmeren vereist voor het team-project toch wel wat hoger ligt dan in de klassen behandeld is, kennen we het Techlab. Zover ik weet bestaat het Techlab uit oudejaars die voor de technische richting hebben gekozen en bereid zijn studenten te helpen met hun ActionScript 3 problemen.

Sinds kort hebben ze ook een wiki online staan, het is de bedoeling dat dit een online wiki wordt met allerlei handige tips en tricks die je kan gebruiken voor het maken van je game. Je kan op een speciale vragenpagina van de wiki ook zelf vragen stellen. Deze kunnen andere (inclusief de mensen va het Techlab) beantwoorden.

Zelf probeer ik ook een bijdrage te leveren aan de wiki door artikelen te schrijven.

De enige manier hoe dit een succes kan worden is met hulp van een hele hoop mensen.

You’ve found a dinosaur. This is one of my first posts about programming and the code quality is not of high standards, it is only here for archiving purposes.

Last week I’ve been messing around with jQuery and made something worth sharing. Let’s start of by showing you the demo.

As pointed out by YoYoMa, this doesn’t work in IE8

Demo of cool lightbulb animation!

As you can see there are two things happening when you turn the light on or off:

1. You can see a red spark going through the wire towards (or away from) the lightbulb.
2. The lightbulb will start shining with a fade effect.

Here is the code required for the animation, at the bottom I’ll explain how it works.

HTML

<div id="title">
            <img src="logoClean.png" />
            <div id="light" class="javahide">
                <img src="logoLights.png" />
           </div>
            <div id="moreLight" class="javahide">
                <img src="light.png" />
            </div>
            <div id="burn" class="javahide">
                <img src="burn.png" />
            </div>
</div>

<div id="kabel">
            <img src="cableMask.png" />
</div>

<div id="buttons">
            <p><a id="on" href="#">light ON</a></p>
            <p><a id="off" href="#">light OFF</a></p>
</div>

CSS

#light, #moreLight, #burn {
    margin-top: -275px;
}

kabel {
    position:absolute;
    top: 265px;
    left: 306px;
    margin-left: 200px;
    background-color:#c2c2c2;
    width: 500px;
    height: 50px;
    background-image:url(cable.png);
    background-repeat: no-repeat;
    background-position: 475px 0px;
}

Javascript

$(document).ready(function(){
    $(".javahide").hide();

    $('#on')
        .click(function(){
            $('#kabel').stop().animate({backgroundPosition:"(-25px 0px)"}, {duration:1000})
            $("#light").delay(1000).fadeIn(50);   
            $("#moreLight").delay(1600).fadeIn(1000);
            $("#burn").delay(2500).fadeIn(1000);
        })

    $('#off')
        .click(function(){  
            $('#kabel').stop().animate({backgroundPosition:"(475px 0px)"}, {duration:1000})
            $("#moreLight").fadeOut(10);   
            $("#light").fadeOut(50);   
            $("#burn").fadeOut(3000);   
        })
})

How does it work? Lightbulb – The shining light bulb is a combination of a few pictures on top of each other (rule 2 of the CSS makes sure of that), all the pics hidden and fade in after the button light ON is pressed.

the electric wire – Again I use multiple pictures on top of each other. I’ve made a small red ball and it’s set as background-image of the cable div. Inside the div I put a normal picture (HTML) which is white except for some transparency (the grey wire), this picture acts as a mask for the red spark.

I’ve used this jQuery background-position plugin to move the ball horizontally.

In this article I’m going to make realistic snow in ActionScript 3, I programmed this in Adobe Flash Builder. I uploaded a youtube video with the result, but the realtime flash example looks a lot better.

First I post the code, which is licensed under copyleft (that means you can use it as long as you credit me and also license it under copyleft). and after that I’ll explain the code so you’ll understand it.

I’ll create 1000 snowflakes all falling down. You can manipulate the wind using your keyboard arrows and your mouse.

This was the first real program I ever created so the code is probably not very optimized (for example, when writing this I didn’t knew about the default drag capabilities of AS3) and/or ugly. To understand this article, basic programming knowledge is very useful.

There are two classes. The first class is Ball:

/** Ball.as -- Nov 24, 2010
 *
 *
 * @author Mike van Rossum 
 *
 *
 * Copyleft 2011, all wrongs reversed.
 */
package
{
    // Import everything we need
    import flash.display.Sprite;
    import flash.text.TextField;

public class Ball extends Sprite
{
    // Import everything we need
    public var baseX:int;
    public var angle:Number;
    public var sway:Number;
    public var largeness:int;

    public function Ball()
    {
        largeness = Math.random()*8;
        graphics.beginFill(0xffffff);
        graphics.drawCircle(0,0,largeness);
        graphics.endFill();
    }
}

And all the magic happens in the second class:

/** Snow.as -- Nov 24, 2010
 *
 *
 * @author Mike van Rossum 
 *
 * Copyleft 2011, all wrongs reversed.
 */
package
{
  // Import everything we need
  import flash.display.Bitmap;
  import flash.display.Sprite;
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  import flash.events.Event;
  import flash.events.KeyboardEvent;
  import flash.events.MouseEvent;
  import flash.geom.Point;

public class Snow extends Sprite
  {
    //declare variables
    private var sleepStart:Point;
    private var sleepStop:Point;
    private var wind:int;
    private var line:Sprite;
    private var angle:Number;
    private var flakes:Array;
    private var screen:Sprite;

public function Snow()
{

  //I always add these lines in all my AS3 programs 
  //those make sure every 1 pixel we calculate really is 
  //1 pixel on the screen. The last one makes sure that 
  //the 0,0 point is in the left-upper corner of the screen.

  stage.scaleMode = StageScaleMode.NO_SCALE;
  stage.align = StageAlign.TOP_LEFT;

  //here I make sure all these functions are run when they are supposed to.

  addEventListener(Event.ENTER_FRAME, moveAll);
  stage.addEventListener(KeyboardEvent.KEY_DOWN, changeTheWind);
  stage.addEventListener(MouseEvent.MOUSE_DOWN, startLine);
  stage.addEventListener(MouseEvent.MOUSE_UP, endLine);

  //Here I make a rectangle with the same size as the 
  //screen and fill it black. This is our background.

  screen = new Sprite();
  screen.graphics.beginFill(0x000000,1);
  screen.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
  addChild(screen);

  //Here I call the function createSnow to be executed.
  createSnow();

  //Those are for my own drag and drop function
  sleepStart = new Point();
  sleepStop = new Point();

  //I add the line that will be drawed already
  //so I only have to manipulate it's form later
  line = new Sprite();
  addChild(line);
}

//This function is executed every frame, 
//and makes sure everything animates. 
//Note that I call the function moveSnow here, this means that 
//every frame the function moveSnow is executed.

public function moveAll(event:Event):void
{
  line.alpha -= .1;
  moveFlakes();
}  

//Here is the function where I create all the snow flakes. 
//I specify how I make one snow flake, and how I position it on 
//the screen. After that I put that code into a for loop so it will 
//be executed multiple times (in my case 1000). I use Math.random 
//function to calculate random numbers so that every time my code 
//is executed, the numbers are not the same.

public function createSnow():void
{
  var flake:Ball;

  //I put all those 1000 flakes in an array so I 
  //can easy manipulate them later on.

  flakes = new Array();

  for (var i:int = 0; i < 1000; i++)
  {
    flake = new Ball();
    flake.baseX = Math.random() * stage.stageWidth;
    flake.x = flake.baseX;
    flake.y = Math.random() * stage.stageHeight - stage.stageHeight;
    flake.angle = Math.random() * 10;
    flake.sway = flake.largeness * 7;
    addChild(flake);
    flakes.push(flake);
  }
}

//As you see probably have seen you can manipulate the 
//wind by using your mouse and the keyboard. The latter 
//is described in this function. The function is called 
//every time someone pushes any button on his keyboard. 

public function changeTheWind(Event:KeyboardEvent):void
{

  //We make use of the if statement so that something only happens 
  //when the button pressed is the right or left arrow.

  if (Event.keyCode == 39) // = arrow right
  {
    wind ++;
  }
  else if (Event.keyCode == 37) // = arrow left
  {
    wind --;
  }
}  

//These two functions check how far you dragged your mouse. 
//They save the location where you press you mouse and 
//compare that to where you release it. Based on the 
//difference in X position of the two locations the wind speed is set.

//These locations are stored in the vars we set in the function Snow. 
//So that we can re-use those vars when someone makes a new drag.

public function startLine(Event:MouseEvent):void
{
  sleepStart.x = Event.stageX;
  sleepStart.y = Event.stageY;
}  

public function endLine(Event:MouseEvent):void
{
  sleepStop.x = Event.stageX;
  sleepStop.y = Event.stageY;
  drawLine();
}

//After those mouse locations are saved a line is drawed. The 
//start point is the start point of the mous and the end 
//point is where you stop dragging it. In the function moveAll 
//there is a line which makes the line we just created every 
//frame a little les visable.

//Every second time someone makes a drag, the variable line is re-used.

public function drawLine():void
{
  var lengte:int;
  line.graphics.clear();
  line.graphics.lineStyle(5,0x7FD1E7);
  line.graphics.moveTo(sleepStart.x,sleepStart.y);
  line.graphics.lineTo(sleepStop.x,sleepStop.y);
  line.alpha = 1;
  lengte = sleepStop.x - sleepStart.x;
  wind = lengte/12;
}    

//This is where all the already created flakes are moved.

//Note that all the movement is relative to the size of the flake (the largeness 
//variable from Ball). This creates the illusion of depth. The smaller 
//flakes look further behind and therefor need to move slower.

public function moveFlakes():void
{
  //This line makes sure that all the 
  //code nested in the brackets ( { } ) is run everytime for every flake. 
  //Every flake is called one time during this. As you can imagine this puts 
  //a lot of stress to your PC because every bit of code inside these brackets 
  //has to be run 24 (frames per second) times 1000 (the number of flakes) = 24 000 times per second.

  for each (var vlok:Ball in flakes)
  {
    //For the X position of the flake I use a little math trick 
    //including the sinus (I go a lot further with that in this 
    //dutch tutorial about atoms). You don't have to understand this 
    //line, just know that this is the sway move of all the flakes. 
    //The size of the sway is decided by the largeness of the Flake 
    //(from the class Ball).

    vlok.x = vlok.baseX + Math.sin(vlok.angle) * vlok.sway;

    //On this line we pull down all the flakes, again relative 
    //to their size. When we add something to the Y position 
    //of a Sprite and the Y- zero position is on top. We're moving 
    //it downwards.

    vlok.y += vlok.largeness /2;
    vlok.angle += .1;
    vlok.baseX += wind/7*vlok.largeness;

    //Now we got all the snow moving but when 
    //it leaves the screen we're lost in an empty 
    //black screen and still your computer has to 
    //calculate the position of a Sprite 24 000 times 
    //every second. Therefor you can find 3 if statements here. 
    //They wrap your screen so to say. It just means that if a 
    //flake gets outside the screen, put it back on the other side. 
    //The first if statement is for the bottom border. The other two 
    //for the sides.

    if (vlok.y > stage.stageHeight)
    {
      vlok.y = 0 - vlok.sway;
      vlok.baseX = Math.random() * stage.stageWidth;
      vlok.x = vlok.baseX;
    }

    if (vlok.x - vlok.sway > stage.stageWidth)
    {
      vlok.baseX = 1 - vlok.sway;
      vlok.y = Math.random() * stage.stageHeight;
    }

    if (vlok.x < 0 - vlok.sway)
    {
      vlok.baseX = stage.stageWidth - 1 + vlok.sway;
      vlok.y = Math.random() * stage.stageHeight;
    }    

  }
}

In the detailed comments I explained how everything works.