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
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
Thanks for the tutorial! I’m trying to implement this but ran into the error “‘WebView’ is deprecated: first deprecated in macOS 10.14 – No longer supported; please adopt WKWebView.” What’s involved with updating this to work with Mojave? I know this is an old article but I’m also trying to learn at the same time. Thanks for any help!