Mac screensaver – Matrix

Mac screensaver Matrix

Written By: Debasis Das (3-Mar-2015)

In this article we will create a mac screensaver from the famous Matrix Movie in HTML5 and then use a Cocoa Mac Screen saver wrapper bundle it into a Mac Screensaver

mac screensaver matrix

http://www.knowstack.com/webtech/Matrix.html

The Mac Screen Saver code can be found at KSMatrix

The deployable screen saver can be found at KSMatrix.saver

The HTML5 Demo can be found at

http://www.knowstack.com/webtech/Matrix.html

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-16" />
        <style>
            {
                margin: 0;
                padding: 0;
            }
            body
            {
                background: black;
            }
            canvas
            {
                display: block;
            }
        </style>
    </head>
    <body>
        <canvas id="c"></canvas>
        <script type="text/javascript">
            var c = document.getElementById("c");
            var ctx = c.getContext("2d");
            //making the canvas full screen
            c.height = window.innerHeight;
            c.width = window.innerWidth;
            
            //chinese characters - taken from the unicode charset
            var chinese = "電買開東車紅馬無鳥熱時語假罐佛惠德拜黑冰兔妒壤每步聽實證龍賣龜";
            var fontsizes = [30,25,20,15];
            //converting the string into an array of single characters
            chinese = chinese.split("");
            var font_size = 15;
            var columns = c.width/font_size; //number of columns for the rain
            //an array of drops - one per column
            var drops = [];
            //x below is the x coordinate
            //1 = y co-ordinate of the drop(same for every drop initially)
            for(var x = 0; x < columns; x++)
            {
                drops[x] = 1;
            }
        function draw()
        {
            ctx.fillStyle = "rgba(1, 0, 0, 0.05)";
            ctx.fillRect(0, 0, c.width, c.height);
            var new_fontSize = fontsizes[Math.floor(Math.random()*fontsizes.length)];
            ctx.fillStyle = "#0F0"; //green text
            ctx.font = new_fontSize + "px arial";
            for(var i = 0; i < drops.length; i++)
            {
                var text = chinese[Math.floor(Math.random()*chinese.length)];
                ctx.fillText(text, i*font_size, drops[i]*font_size);
                if(drops[i]*font_size > c.height && Math.random() > 0.975)
                drops[i] = 0;
                drops[i]++;
            }
        }
        
        setInterval(draw, 10);
   </script>
    </body>
</html>

Cocoa Code for bundling the Matrix.html in a Mac Screen Saver

//
//  KSMatrixView.h
//  KSMatrix
//
//  Created by Debasis Das on 3/3/15.
//  Copyright (c) 2015 Knowstack. All rights reserved.
//

#import <ScreenSaver/ScreenSaver.h>
#import <WebKit/WebKit.h>

@interface KSMatrixView : ScreenSaverView
{
    WebView *webView;
}
@end
//
//  KSMatrixView.m
//  KSMatrix
//
//  Created by Debasis Das on 3/3/15.
//  Copyright (c) 2015 Knowstack. All rights reserved.
//

#import "KSMatrixView.h"

@implementation KSMatrixView

- (instancetype)initWithFrame:(NSRect)frame isPreview:(BOOL)isPreview
{
    self = [super initWithFrame:frame isPreview:isPreview];
    if (self) {
        //[self setAnimationTimeInterval:1/30.0];
        webView = [[WebView alloc] initWithFrame:[self bounds] frameName:nil groupName:nil];
        [webView setMainFrameURL:[NSString stringWithFormat:@"file://%@/Matrix.html", [[NSBundle bundleForClass:[self class]] resourcePath]]];
        [self addSubview:webView];

    }
    return self;
}

- (void)startAnimation
{
    [super startAnimation];
}

- (void)stopAnimation
{
    [super stopAnimation];
}

- (void)drawRect:(NSRect)rect
{
    [super drawRect:rect];
}

- (void)animateOneFrame
{
    return;
}

- (BOOL)hasConfigureSheet
{
    return NO;
}

- (NSWindow*)configureSheet
{
    return nil;
}
@end
Posted in Generic, HTML5, User Experience, Web Technology Tagged with: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news