Late Spectrum tribute

25 04 2012 at 22:10

Sorry for being late to the Speccy 30th anniversary party. Life got in the way. But I'm sure you understand. Although it's not like I was a Spectrum expert anyway. In fact, we never were more than simple acquaintances, so to speak. While I spent evenings with my eyes fixated on a green screen, and secretly longed for a magic event that would convert the phosphorus into something multicolour, our neighbour next door was playing games with his Spectrum. He was subscribed to Micro-Hobby; each month we saw the magazine punctually standing out of their postbox, wrapped in plastic cellophan. His face when collecting the magazine was one of anticipated joy. I could just imagine --maybe even envy-- what he was about to experience. Games, demos, utilities. Digital sounds, colours. The novelties, the excitement of new things to come. All in the accompanying tapes, or in the listings inside the magazine. I had to be content with turtle graphics, and a ridiculous beeper. Granted, even though it was monochrome, it was extremely cool anyway --almost no one else in the school had ever put a finger over a computer keyboard ever--, but the rest of the world was trying hard to make me feel green with envy. There was no way I could escape knowing that there were other sorts of computers which could make noises and show colour graphics. One went to buy a dishwasher and there were several Spectrum models, games and accessories for them, side by side with fridges, ovens and whatnot. Even newsagents had a stand or a couple of shelves with Spectrum tapes at quite cheap prices. Talking about newspapers, one of the most popular --"El País"-- published the usual week-end supplement: interviews, opinion columns, fashion, cooking, etc. There was also a little sort-of leaflet in the center of the magazine, called "Pequeño País", which roughly consisted in a handful of pages covering topics that children and youngsters could be interested in: movie and book reviews, a couple of comic pages from some well-known author (e.g. Blueberry), and maybe some more by an unknown but promising author. As home computing grew in popularity during the 80s, in 1987 they started a new section, El Tebeo Informático, where they would review computer games. Probably even accompany the review with some cheats, in the shape of BASIC 'pokes' or loaders. Of course, none of those games was published for the PCW, so I could only look at the screenshots, read the descriptions and dream with that day in which I would be able to experience those games myself. One of my birthday presents was a cassette tape with the original soundtrack from a famous animated series (at the time), David el Gnomo. Of course, I was cursed with the best of the bad luck: the latest track in the B-side was a computer game for the Spectrum. In my innocence, I ended up one day subversively sneaking in the computer room and carefully examining the PCW's disk drive, trying to find out if there was a way to fit the tape into the 3" drive, and thus play the game. Evidently, that didn't work, and unfortunately there's no available dump for the game, so the only thing I have ever seen to date are those screenshots from World Of Spectrum. Sometimes, when we went to department stores, I was left on my own so that I could peruse the book shelves in order to find something I liked, while the rest of the family did the same. I loved going to the computer books section, and finding all those books on computer graphics, sound, and games... but I was then quite disappointed when finding that most of them were written with Spectrum Basic in mind, and thus even if I got the book I wouldn't be able to type in and play with its listings. The situation regarding technical press was more or less the same. Since no magazine was published exclusively for PCW users in Spain, I got to read Amstrad User. It was only about Amstrad at the beginning, but when Amstrad acquired Sinclair they ended up writing more and more about the Spectrum, even covering that PC200 sort of strange hybrid fiasco between PC and Spectrum. Around the summer of 1990 Amstrad released a series of super attractive Spectrum packs. They consisted in the computer, plus six games and a joystick! Woooow! I tried --in vain-- to get one. I argued I had got my best marks ever, and if we got the Spectrum I would use the joystick to play games, so no keyboard would get damaged with repetitive kick-kick-kick-kick motions (such as when playing Last Ninja 2) but that didn't work. Instead, we got a PC that I was occasionally allowed to use. Granted, it was way faster than a Spectrum could ever hope to be, with its humble Z80 at 3.5MHz, and the VGA graphics were way better, but somehow the Spectrum aesthetics had grown on me. I had heard and read so much about the Speccy, that I was missing it already. Years later, emulators became feasible, but alas!, I didn't have an Internet connection to download one... However, there was a way. It was quite a feat itself, now that I recall it, and certainly shows the lengths curiosity can drive people to. I used to buy a PC magazine, PCMania. The publishers, HobbyPress, maintained an Ibertex node. Ibertex was the Spanish network equivalent to the French Minitel. Each month they included their client software in the accompanying floppy disk. This client was quite advanced compared to the standard Ibertex clients, as it not only handled downloads but also was able to fragment them in parts, and therefore downloads could be resumed, a very nice feature as the phone line quality was fragile, so to speak. Using that system, I downloaded Pedro Gimeno's Spectrum emulator, and a couple of legendary Spanish Spectrum games: La aventura original and Army moves. I still can't understand how that could even run and be playable. I mean, an emulator for a 3.5MHz machine, running under a 12MHz machine! Spectrum emulators for nowadays phones can hardly process user input without lagging. I don't know how Pedro did it, but I certainly played those games for weeks. It was great! And it was also certainly funny to be discovering the joys of the Spectrum while everyone in the media was already talking about the Internet, Mosaic, or the WWW. However, I learnt a lot about the Spectrums since then; and all thanks to the Internet. I played more games thanks to emulators and sites such as World of Spectrum; I have listened to lots of Speccy music (the so-called beeper music). Also I have enjoyed some glorious demos that pushed the envelope quite further, such as Aah... the tape loading era: or the revision 2012 invtro: I even went as far as learning how the attribute clash worked, and implemented a "ZX Spectrum" effect for my 8 bit retro camera application for Android, Nerdstalgia. Yay! At the end I never owned an Spectrum, but I feel like I owe them a little bit of my computer curiosity/motivation. So... here's for 30 more years of retro-computer inspiration and achievements! Long live the Speccy, and all his cousins!

Sorry for being late to the Speccy 30th anniversary party. Life got in the way. But I’m sure you understand.
(more…)

Simple yet Frequently Asked Questions on three.js (SFAQ)

17 04 2012 at 20:43

As promised, here's what I learnt with my latest test with three.js :-D How do I get smooth color transitions between the vertices of a face? If you want to get color "interpolation" like the faces in the image... ... you have to do a few things: Create a colors array, with as many entries as vertices in your mesh. Set the colors array as the vertexColors property of the geometry Using THREE.MeshBasicMaterial, set the vertexColors property to THREE.VertexColors This would create a single-triangle mesh, with red, green and blue colors in each vertex respectively: var vertices = [], colors = [], faces = [], geometry, material, mesh; vertices.push( new THREE.Vertex( new THREE.Vector3(0, 0, 0) ) ); colors.push( new THREE.Color(0xFF0000) ); vertices.push( new THREE.Vertex( new THREE.Vector3(0, 1, 0) ) ); colors.push( new THREE.Color(0x00FF00) ); vertices.push( new THREE.Vertex( new THREE.Vector3(1, 1, 0) ) ); colors.push( new THREE.Color(0x0000FF) ); // 0, 1 and 2 are the indices of the vertices in the vertices array faces.push( new THREE.Face3(0, 1, 2) ); geometry = new THREE.Geometry(); geometry.vertices = vertices; geometry.faces = faces; geometry.vertexColors = colors; material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors }); mesh = new THREE.Mesh(geometry, material); How do I change the line width of an object displayed as wireframe? Using THREE.MeshBasicMaterial, set the value of the wireframeLinewidth property: E.g. for a black, three units thick wireframe material: var mat = new THREE.MeshBasicMaterial({ wireframeLinewidth: 3, color: 0x000000, wireframe: true }); How do I make an object display as double-sided? I thought this was a property that had to be set in the material, but I was wrong. It's an Object3D property, so if you want an object to display both of its sides, you have to do: mesh.doubleSided = true; Why aren't the children objects hidden when the parent is invisible? For optimisation reasons this is not automatic. So you have to manually iterate over the parent's children and set their visible property explicitly. But three.js has a utility function for traversing object hierarchies: var visible = false; THREE.SceneUtils.traverseHierarchy(parent, function(child) { child.visible = visible; }); How do I get the camera position updated? It's not moving even if I change its position! Ah, because you have to tell it where to lookAt. Assuming camera_x, camera_y and camera_z are numbers, and cam_target is a Vector3: camera.position.x = camera_x; camera.position.y = camera_y; camera.position.z = camera_z; camera.lookAt( cam_target ); Every time you change either the camera position or the target position (or both!) you need to call camera.lookAt or you won't get any visible result. This seems to be a recent change in three.js. Apparently the camera was automatically updated in older revisions. How do I get the contents of the current canvas? All I get is an empty, transparent image in Chrome! This is an expected behaviour of the WebGL implementation. The solution is to create the WebGL context with the preserveDrawingBuffer flag. Of course, three.js already has that in mind! So you simply have to add that parameter when initialising the renderer: renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true }); Once that's done you can happily extract screenshots of the current output with the usual canvas.toDataURL (although I used canvas.toBlob for directly downloading the image to the browser). How do I modify a geometry dynamically? (from javascript, not in a vertex shader) This is my super favourite question, so I left it for the end! You can change the vertices position in a geometry once it's been added to the scene, but you won't notice any difference until you let three.js know that you've changed something in the object! That's done with: mesh.geometry.__dirtyVertices = true; every time you've modified the geometry and need to get it updated in the screen. Mr.doob told me it's also possible to modify other geometry properties, such as the vertex colors. If you modify the vertex colors, you then need to set the __dirtyColors property to true. Actually, this is not the 'proper' way of doing things with WebGL. Every time a geometry is marked as 'dirty', it needs to be re-sent and re-created in the GPU, so to speak. Therefore, this flexibility comes at a cost; the larger the geometry, the slowest it'll be. I should be doing these calculations in a vertex shader, running in the GPU, but since I'm still learning I'm allowing myself this little computational luxury ;-)

As promised, here’s what I learnt with my latest test with three.js :-D
(more…)

Mesh subdivision (2012 extended edition)

16 04 2012 at 22:54

Back in 2004, when I was starting to experiment with OpenGL, I had the idea of creating meshes from scratch. This will come in handy for intros, since this way I won't be needing to include the meshes' data with the executable!, I thought. I would create a simple base pyramidal mesh, and subdivide it until I got something with more vertices and faces, but properly connected (not just a bunch of random points). So I when I had a couple of free days, I came up with a very rough way of creating and subdividing meshes. It was very raw, but I loved that I had done it myself! At the end, I didn't use it for any intro at all, but I used the trick in a demo instead, called codecolors (source code, if you're feeling adventurous). Although it's hard to notice, since everything was generously blurred (I had recently learned how to get a cheap motion blur effect and was really eager to use it in every single frame!). Fast forward to 2012. I am learning (tinkering with?) three.js and I wanted to find out how to manipulate vertex data dynamically. I somehow remembered this experiment and where I left it (Next step is playing with the vertices!), and I decided to continue it. Once I got the basics working, I thought it would be neat to have some way of interacting with the scene--so I added dat.gui, which are the controls on top right. Then I also wanted to save the images, as I once I added controls for altering the look I started getting great imagery! So I added FileSaver.js and canvas-toBlob.js, since browser support for downloading images is still a bit incomplete (so to speak). And finally I thought: hey, storing images is ok, but what if I want to modify an existing configuration?. So I added support for storing the current configuration via some simple location hash serialising. I am not sure if it's the best way but it seems to work well enough for now! Oh, and since I just love text effects, I added a silly text-manipulation thingie to dynamically alter the innerText of the page contents. Just because! It's fun to play with all the settings and seeing what happens. I have found myself mesmerised just by looking at the end result. Some images seem really organic; others look very fractal/spaceish to me. (Don't forget to make it wobbly! --looks like someone is having a discussion inside the pyramid!). I'm very happy with the end result, and even more about the development process. I can vividly recall the many hours I spent in 2004 dealing with arrays and memory allocation for such a simple task as this one. Quite unproductive, to be honest! But Javascript + WebGL totally ROCK! Also, after so many years of trying to explain what the demoscene and realtime is about, it's great to be able to demonstrate it in realtime. Yay! I'll write about the new "Simple yet Frequently Asked Questions" about three.js that I encountered while doing this experiment... but that will be tomorrow, if you don't mind! Have fun! :)

Back in 2004, when I was starting to experiment with OpenGL, I had the idea of creating meshes from scratch. This will come in handy for intros, since this way I won’t be needing to include the meshes’ data with the executable!, I thought.

I would create a simple base pyramidal mesh, and subdivide it until I got something with more vertices and faces, but properly connected (not just a bunch of random points). So I when I had a couple of free days, I came up with a very rough way of creating and subdividing meshes. It was very raw, but I loved that I had done it myself!
(more…)

WebGL VGA

09 04 2012 at 01:17

For some odd reason, I happened to remember a little demo that came with the first 16 bit computer I ever used--an Amstrad PC 2286. It was meant for showing off the capabilities of the new and shiny Paradise VGA graphics adapter that the 2000 line of computers incorporated. 256 simultaneous colours! 640x350 graphics! So stunning back then! I ran this demo from time to time, admiring all those colours at the same time on the screen. Then I learnt how to make the computer output them with GW-Basic, but that is another story. I wanted to watch that demo again, but it seems that the Amstrad PC line of computers doesn't get as much love as the CPCs do. So there is hardly any software repository (or dump) for those computers, and thus I couldn't locate that demo. It doesn't help that I didn't remember its filename either... But I found several images depicting the demo, and somehow I decided that rebuilding the demo was an excellent idea --and a great excuse to learn three.js! This is how the original looked: And this is what I ended up with: In the process I thought I would spice things up a little. Since rotations are "cheap" with WebGL, I made things move around, mostly by rotating them. I also added some scaling here and there, and liberally used Math.sin and Math.cos (as Javascript is so fast nowadays too). Still, I didn't go too far, for the sake of keeping some resemblance to the original! SFAQ Although three.js is designed to be simple and intuitive, I had several how do I do this apparently simple thing with three.js? moments, so I thought it would be interesting to write these down as a sort of "SFAQ" (Silly Frequently Asked Questions). There we go: How do I make a line? You first create a geometry, then add vertices to its vertices property. Then create a material to set the line color, and use both the geometry and the material to create a line. var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(0, 0, 0) ) ); geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(100, 0, 0) ) ); var material = new THREE.LineBasicMaterial({ color: 0xFF0000 }); var line = new THREE.Line(geometry, material); Actually, you can create the line skipping the material creation. It will get a randomly assigned colour then. How do I make a line strip? (i.e. a series of connected segments) You start with a geometry, like in the line example above, but add as many points as you require. Then when creating the line you specify that the line type is THREE.LineStrip: var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(0, 0, 0) ) ); geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(100, 0, 0) ) ); geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(100, 100, 0) ) ); // ... add as many vertices as you need var material = new THREE.LineBasicMaterial({ color: 0xFF0000 }); var line = new THREE.Line(geometry, material, THREE.LineStrip); How do I make a line in which each segment has a different colour? The answer to this is vertex colours, which works in the same way as the homonym concept in OpenGL: you need to specify a colour per vertex, instead of just a colour for the entire line. The way to specify the colours is to add instances of THREE.Color with the desired colour to the colors property, and then tell the line material to use them, as follows: var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(0, 0, 0) ) ); geometry.colors.push(new THREE.Color( 0xFF0000 ) ); geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(100, 0, 0) ) ); geometry.colors.push(new THREE.Color( 0x00FF00 ) ); var material = new THREE.LineBasicMaterial({ vertexColors: true }); var line = new THREE.Line(geometry, material); I'm using this for the odd colourful figure on top left. How do I build hierarchies of objects? You can use the generic THREE.Object3D class as container for other objects. When you add children to that object, and move it, the children will move along with the parent: var container = new THREE.Object3D(); var geometry = new THREE.CubeGeometry(10, 10, 10); var cube = new THREE.Mesh(geometry); container.add(cube); cube.position.x = 0; // Local x = 0 container.position.x = 10; // The cube's 'world' X coordinate at this point is 10 I used this for the "moire blocks" in the middle of the screen. How do I change the colour of an object after having instantiated it? Simply access its material.color property and change it as required: var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(0, 0, 0) ) ); geometry.vertices.push(new THREE.Vertex( new THREE.Vector3(100, 0, 0) ) ); var material = new THREE.LineBasicMaterial({ color: 0xFF0000 }); var line = new THREE.Line(geometry, material); // the line is red // But if we change its green attribute to 1... line.material.color.g = 1; // ...the line is yellow now! This technique is used for animating the colour of the rectangles on top right. A call for help! If you know the file name, or have a copy of the original demo, please let me know! I would love to watch it again after so many years! Hopefully it will work with DOSBox. Please! :-)

For some odd reason, I happened to remember a little demo that came with the first 16 bit computer I ever used–an Amstrad PC 2286. It was meant for showing off the capabilities of the new and shiny Paradise VGA graphics adapter that the 2000 line of computers incorporated. 256 simultaneous colours! 640×350 graphics! So stunning back then! I ran this demo from time to time, admiring all those colours at the same time on the screen. Then I learnt how to make the computer output them with GW-Basic, but that is another story.

I wanted to watch that demo again, but it seems that the Amstrad PC line of computers doesn’t get as much love as the CPCs do. So there is hardly any software repository (or dump) for those computers, and thus I couldn’t locate that demo. It doesn’t help that I didn’t remember its filename either…

But I found several images depicting the demo, and somehow I decided that rebuilding the demo was an excellent idea –and a great excuse to learn three.js!

This is how the original looked:

VGA demo

And this is what I ended up with:

animated_gif.js

02 04 2012 at 08:18

Past week I wanted to make an animated GIF – but didn’t want to use GIMP or ffmpeg for that. I wondered: can an animated GIF be made in the browser? Of course it can! There was a library (JSGIF) which was a port of the original ActionScript library, AS3GIF.

I built a bit of wrapping code around the library, and did some tests to see if the port worked, first by creating a canvas and painting random squares on it, and then using them as input frames and building the GIF with that. Secondly, I tried using images. It worked acceptably enough (the color quantizer could be better, but we’re not after photo-realistic animations, after all).

So I added the drag and drop + file api stuff, but there was still something missing… the look wasn’t 90s enough! It was all begging for a bit of outdated aesthetics, but done with CSS3 and HTML5. Hence, there are multicolour logos via CSS animations, eye-cancer phosphorescent pink that turns into X-Files green glow (via CSS animations too), an HTML5 <footer> element used just because, and even a modern, 21st century blink-kind effect thanks to more CSS animations. You can’t but love it. And those huge frames! They are done with an ingenious abuse of CSS borders, but that could be done with CSS five years ago already. Nothing new here, but all very funny in any case.

Note that even if I finished this yesterday –April’s Fools– it wasn’t originally intended to be an April’s Fools joke. Hopefully you can take it seriously, right?

Right!

PS I actually looked into making animated WebP’s but the library I found wasn’t fast enough so all the fun factor was lost :-(

Maybe in a couple of years, when WebP is retro already…