Ben Simms

Page 2 of 4

Gif Animation For Java

I spent a lot of time trying to find a nice light weight library for Java capable of exporting an animated Gif, so I wanted to share this with others who may find it useful.

I have to provide the Jar from my web site because I cannot for the life of me hunt down the original source, I by no means make claims to this Jar and if anyone out there recognizes it, let me know so I can give full credit.
Original author and full documentation here

Most of my work is done with Processing thus the example code below would be placed in a new tab inside the Processing IDE. Copy the code  into a new tab:

The Code

[codesyntax lang=”php”]

import gifAnimation.GifMaker;

PImage img;
String saveLocation;
int currentFrame = 0;

//Gif Animation Options
int playbackSpeed = 250;
int loopAnimation = 0;
int exportQaulity = 100;
String fileExportName = "GameBoyMe";

void folderSelected(File selection) {
  if (selection == null) {
    saveLocation = selection.getAbsolutePath();
    println("Default location selected");
  } else {
    saveLocation = selection.getAbsolutePath();
    println(saveLocation);
  }
}

//Save a shot of the current screen and increase the frame count.
void saveImage() {
  String frame = "frames/frame" + currentFrame + ".gif";
  saveFrame(frame);
  currentFrame ++;
}

//Loop through all our frames and add them to the gif.
void createAnimation() {
  GifMaker gifExport = new GifMaker (this, saveLocation + "/" + fileExportName + ".gif", exportQaulity);
  int framesCount = 0;
  gifExport.setRepeat(loopAnimation);

  while (framesCount < currentFrame ) {
    img = loadImage("frames/frame" + framesCount + ".gif");
    gifExport.addFrame(img);
    gifExport.setDelay(playbackSpeed);
    framesCount ++;
  }
  gifExport.finish();
  println("Animation Exported " + saveLocation);
}

//Keys for taking the frames and exporting the gif.
void keyPressed() {
  if (key == ' ') {
    saveImage();
  }
  if (key == 'q' || key == 'Q') {  
    createAnimation();
  }
}

[/codesyntax]

 

Dont forget to add the below into your main tab so that we know where to export the Gif.

[codesyntax lang=”php”]

  selectFolder("Export Location:", "folderSelected");

[/codesyntax]

 

Now all you need to do is add the Gif Jar to your project by dragging the below file into Processing

The Jar File

That should be it, ready to run!

I’ve tried to make everything I can remember that’s configurable obvious by placing it at the top of my subclass

The Gameboy Effect

[embedyt]https://www.youtube.com/watch?v=Lb6pWBKEtQY&feature=youtu.be[/embedyt]

image fuckInstagram2 fuckInstagram1 fuckInstagram

 

 

 

I’ve always liked chunky pixels and “retro” gaming and while I’m taking a step away from games for a bit I wanted to do something with the gaming theme.

I was keen to develop a number of camera applications for a project I have in mind later down the line and thus I wanted to do something with the camera and gaming theme, what I thought of was an attempt at emulating the Gameboy camera!

The Plan

The idea as per, was simple. Use a web camera to oversize the pixels, colour them to look like a Gameboy screen and export an image. To do this I would:

  • Get the web camera running in a squared format
  • Use the Capture class to give me access to the pixel information
  • Create a loop to read the data for every pixel
  • Scale the pixels to a nice large size
  • Use THRESHOLD filter and leave it at it’s default settings so the image is converted to black and white
  • Convert the black and white colours for every pixel to my Gameboy esq colours
  • Allow the user to export image

The Result

Again, I was really happy with the result and it was fairly easy to achieve. Though I was happy with the Gameboy colours, I did some images using different colours that I felt were more “alive”.  Something for me to think about later.

Download the app here (press ‘s’ to export the current frame), or try it yourself using the code below.

windows mac

The Code

[codesyntax lang=”php”]

import processing.video.*;

int cameraScale = 6;
int columns;
int rows;
Capture camera;

void setup() {
  size(288, 288);
  columns = width/cameraScale;
  rows = height/cameraScale;
  camera = new Capture(this, columns, rows, 30);
}

void draw() {
  camera.start();
  if (camera.available()) {
    camera.read();
  }
  camera.loadPixels();
  camera.filter(THRESHOLD);

  for (int column = 0; column < columns; column++) {
    for (int row = 0; row < rows; row++) {
      int x = column*cameraScale;
      int y = row*cameraScale;
      float r = red(camera.pixels[column + row*camera.width]);
      float g = green(camera.pixels[column + row*camera.width]);
      float b = blue(camera.pixels[column + row*camera.width]);
      noStroke();
      //Fill white pixels black, for background.
      if (r == 255 && g==255 && b ==255) {
        r=96;
        g=109;
        b=11;

        //Fill white pixels to selected colour
      } else if (r == 0 && g==0 && b ==0) {
        r=0;
        g=40;
        b=0;
      }
      fill(r, g, b);
      rect(x, y, cameraScale, cameraScale);
    }
  }
  updatePixels();
}

void keyPressed() {
  if (key == 's' || key =='S') {
    saveFrame("image.gif");
  }
}

[/codesyntax]

 

Retro Alien Font

[embedyt]https://www.youtube.com/watch?v=v4n4GqhDYeY&feature=youtu.be[/embedyt]

Videos shows an updated version that continuously updates without keyboard interaction.

The other day while watching a film I noticed a pseudo font scrolling on a monitor in the background and it got me thinking… I wonder how hard it would be to make something similar.

My idea was pretty simple, create a “grid” with a number of pixels that would flick state and hopefully create a false looking font something similar to poor-mans hieroglyphics.

Using Processing I created a fairly small script that creates one grid of patterns and every-time a key is pressed generates another grid next to the previous, the outcome of which can be seen in these screenshots:

Screen Shot 2014-08-13 at 19.40.51 Screen Shot 2014-08-13 at 19.04.20

 

I included a few options, you could change the colour by pressing 1,2 or 3. You could clear the slate by pressing 0.

I was rather happy with the outcome, see what you think by giving the app a whirl or by doing it yourself…

Download

mac windows

 

 

 

Source Code

If you want to do the same, copy this code into Processing:

[codesyntax lang=”php”]

int nextXPos=0;
int nextYPos=0;
int padding = 30;
int backgroundColour = 0;
int fontR = 25;
int fontG = 95;
int fontB = 190;
boolean stroke = false;

void setup() {
  // size(762, 582);
  noStroke();
  size(1024, 768);
  background(backgroundColour);
}

void createCube() {
  if (nextXPos < width - padding) {
    cube(nextXPos, nextYPos);
    nextXPos = nextXPos + 30  + padding;
  } else if (nextXPos >= width - padding) {
    nextXPos = 0;
    nextYPos = nextYPos + 30 + padding;
  }
  if (nextYPos > height){
   nextYPos = 0; 
  }
}

void draw() {
}

void keyPressed() {
  createCube();
  if (key == '0') {
    background(0);
    nextXPos=0;
    nextYPos=0;
  }
  if (key == '1') {
    fontR = 25;
    fontG = 95;
    fontB = 190;
  }
  if (key == '2') {
    fontR = 190;
    fontG = 95;
    fontB = 25;
  }
  if (key == '3') {
    fontR = 95;
    fontG = 190;
    fontB = 25;
  }
}

[/codesyntax]

Then create a new tab called ‘Cube’ and copy this code:

[codesyntax lang=”php”]

void cube(int x, int y) {
  int cubeSize = 10;

  //Top Layer
  pickColour();
  rect(x, y, cubeSize, cubeSize);
  pickColour();
  rect(x+10, y, cubeSize, cubeSize);
  pickColour();
  rect(x+20, y, cubeSize, cubeSize);
  pickColour();
  rect(x+30, y, cubeSize, cubeSize);

  //Second Layer
  pickColour();
  rect(x, y+10, cubeSize, cubeSize);
  pickColour();
  rect(x+10, y+10, cubeSize, cubeSize);
  pickColour();
  rect(x+20, y+10, cubeSize, cubeSize);
  pickColour();
  rect(x+30, y+10, cubeSize, cubeSize);

  //Third Layer
  pickColour();
  rect(x, y+20, cubeSize, cubeSize);
  pickColour();
  rect(x+10, y+20, cubeSize, cubeSize);
  pickColour();
  rect(x+20, y+20, cubeSize, cubeSize);
  pickColour();
  rect(x+30, y+20, cubeSize, cubeSize);

  //Fourth Layer
  pickColour();
  rect(x, y+30, cubeSize, cubeSize);
  pickColour();
  rect(x+10, y+30, cubeSize, cubeSize);
  pickColour();
  rect(x+20, y+30, cubeSize, cubeSize);
  pickColour();
  rect(x+30, y+30, cubeSize, cubeSize);
}

void pickColour() {
  float randomColour = random(0, 1);
  int colour = round(randomColour);

  if (colour == 0) {
    fill(backgroundColour);
  } else if (colour ==1) {
    fill(fontR, fontG, fontB);
  }
}

[/codesyntax]

Comparing Two Images And Finding The Differences In Java

After a passing comment about comparing two images by “eyeballing”, I wondered if I could create a little application to do the task in an automated fashion, in Java of course.

I had used the PImage class before and I knew it was capable of reading the values of every pixel in a given image so that was my first stop.

I decided to use the weather icons from the BBC website as they share the same dimensions (very important) and some common pixels values.

The reason the dimensions were so important is that I actually re-draw the image intercepting the differences, and if the dimensions of both images did not match exactly then the script would fail (minor detail for this purpose 🙂 )

1  3

 

The Plan

So, below you can see what I came up with, I’ll quickly walk through it (if only so I have it tracked somewhere)

  • I start by providing the location of the two images, these images could also be local.
  • Then I created an instant of Pimage for both images.
  • I set the size of the frame to the first image width, if the frame size does not match the image then it breaks the redraw process.
  • After this I created a loop and got each RED, GREEN and BLUE value of each pixel from the current location of both images.
  • If the values collected did not match, then I convert them to red so that they were highlighted

This was the outcome of comparing both the above images

The Result

Screen Shot 2014-08-05 at 17.44.48

 

You can clearly see the difference in red, pretty cool!

Give it a whirl yourself by copying the below code into Processing and hitting ‘Run’.

 

[codesyntax lang=”php”]

String imageOneUrl = "http://static.bbci.co.uk/weather/0.5.284/images/icons/individual_56_icons/en_on_light_bg/3.gif";
String imageTwoUrl = "http://static.bbci.co.uk/weather/0.5.284/images/icons/individual_56_icons/en_on_light_bg/1.gif";

PImage imageOne;
PImage imageTwo;
int pixelYPosition;
int pixelXPosition;

public void setup() {
  imageOne = loadImage(imageOneUrl, "png");
  imageTwo = loadImage(imageTwoUrl, "png");
  size(imageOne.width, imageOne.height);
}

public void draw() {
  loadPixels();
  imageOne.loadPixels();
  imageTwo.loadPixels();

  for (pixelYPosition = 0; pixelYPosition < imageOne.height; pixelYPosition++) {
    for (pixelXPosition = 0; pixelXPosition < imageOne.width; pixelXPosition++) {

      int loc = pixelXPosition + pixelYPosition * imageOne.width;
      int loc1 = pixelXPosition + pixelYPosition * imageTwo.width;

      float r = red(imageOne.pixels[loc]);
      float g = green(imageOne.pixels[loc]);
      float b = blue(imageOne.pixels[loc]);

      float r1 = red(imageTwo.pixels[loc1]);
      float r2 = red(imageTwo.pixels[loc1]);
      float r3 = red(imageTwo.pixels[loc1]);

      if (!(r == r1) && (!(g == r2) && (!(b == r3)))) {
        r = 255;
        g = 0;
        b = 0;
      }

      pixels[loc] = color(r, g, b);
    }
  }
  updatePixels();
}

[/codesyntax]

 

Creating a static tv effect

In the process of creating a little project I stumbled across a way to creating an effect that looks exactly like a de-tuned TV.  It’s so simple that you can do it yourself in a matter of seconds!

Copy this code into processing and run!

[codesyntax lang=”php”]

public void setup() {
  size(640, 480);
}

public void draw() {
  loadPixels();  
  for (int i = 0; i < pixels.length; i++) {
    float randomNumber = random(255);
    color c = color(randomNumber);
    pixels[i] = c;    
  }
  updatePixels();
}
[/codesyntax]

What do we do here then?

Well, we set the size of the applet.

Then we tell Processing we want to fiddle with some Pixels so we call ‘loadPixels’.

Next, we create a little loop that finds every pixel and changes the colour to within the range of 0 – 255 which is the RGB value.

The last step is to update and that’s it, static TV… So real it’s scray!

Download

windows mac

 

 

Screenshot

Screenshot

Screenshot

Lord, give me colours! (Free Java app for generating inspirational colours)

Sometimes finding inspiration for the simplest task can be a challenge. That’s why I knocked together this app, “Lord, give me colours” will simply flash a sheet of six different colours every two seconds, if you like the colours you see, tap the screen and it’ll save you a screenshot to keep!

It really couldn’t be simplier, with only two seconds to decide you won’t be hanging around, your gut instinct will kick in and before you know it you’ll have a number of sheets full of funky inspirational colours.

For your convenience each run of colours you capture are placed into a timestamped folder.

Use them for logo’s, web design, painting your walls or even just for a nice wallpaper background, whatever takes your fancy!

Check out some example sheets below and get downloading for yourself!

Requires Java 7 to run.

DOWNLOAD

mac windows

EXAMPLES

Screen Shot 2014-07-27 at 17.27.46

Home

5

Sheet One!

3

Sheet Two

2

Sheet 3

3

Sheet 4

4

Sheet 5

 

Processing development in Intellij – 3 simple steps and pictures

Step One:

Assuming you have intelliJ and Processing installed, launch IntelliJ.

The first thing we are going to do is grab the core library.

File – Project Settings – Libraries – Add – Java

Screen Shot 2014-07-13 at 20.26.57Screen Shot 2014-07-13 at 20.29.34

Now select OK and return to your project. We must extend our class with PApplet (Processing Applet) this gives our class access to the Processing methods.

 

Step Two

Because we are using PApplet we have to tell IntelliJ where the main method lives, use the below code and make sure PApplet.main matches the name of your class.

Screen Shot 2014-07-14 at 08.51.10

[codesyntax lang=”java” lines=”normal”]

static public void main(String args[]) {
PApplet.main(new String[]{“YOUR CLASS NAME HERE”});
}[/codesyntax]

 

Step Three

 

As part of the build process we must tell IntelliJ where the module lies. Select the following button and hit ‘Edit – Configurations’

Screen Shot 2014-07-13 at 20.38.28

Screen Shot 2014-07-13 at 20.41.35

Now select the displayed module.

 

That’s it your now ready to run your Processing application by hitting the run icon (top right). Now you can enjoy the benefits that IntelliJ brings with it’s suggestive inputs etc..

Anytime Bulb Mode – Now exports a gif!

developed

I just added the ability to export an animated Gif, this way you can replay the construction process over and over again; looks pretty cool! The playback of the gif is very slow because the image is huge (for the web), so I need to find a way to compress the Gif before it finishes the animation, anyway it gives a good impression of how the app works

Anytime Bulb Mode

 

A few weeks ago I decided I should get back onto this project and see if I couldn’t fix a major blocker I had. The problem I had was with the motion tracking library, unfortunately the drivers for it were no longer supported and on-top of that I couldn’t get the basics running on the Raspberry PI.

With that in mind, I figured I would try and make my own version, a bit scary and perhaps optimistic but I thought “what the hell” and gave it a go.

Progress was slow to begin with, but I started to research the Capture library for Processing and realised it was smart enough to pick out every pixel colour it could find in an image or video feed!!! So all I had to do was think of a way to track the desired colour.

Some time later I got it to a working state. The behavior wasn’t exactly what I wanted, mainly I was tracking individual pixels whereas my previous library was able to find a collection or matching pixels at once, the difference being the old library would build the image much quicker and also create a nice outline image. (I’m still aiming for that effect)

Anyway, I started using my code to take some images and create some awesome art and I decided at this stage I would create a branch for it and also big it up a little.

The art was great and I could easily see it on an album or just all a sweet looking background!

 

Screen Shot 2014-06-21 at 21.38.38

The images below show the progression of my code and it’s behavior

Screen Shot 2014-06-21 at 21.40.37

Tracking a colour and drawing ellipses at the location.

Screen Shot 2014-06-28 at 11.09.05

Bigger ellipses and coloured. It was looking too real so I quickly deviated away from this effect

Screen Shot 2014-06-27 at 17.12.20

Not that you can tell, but at this stage I got the image drawing quickly

snapShot1404922432597

Switched to vertexs (which took quite some time) but the effect was much more inline with my previous app

snapShot1404931202168

Added more colours to paint with

snapShot1404924170863

An example result, what I call Star-mapping!

 

« Older posts Newer posts »

Copyright © 2017 Ben Simms

Theme by Anders NorenUp ↑