Search

Geek Girl Joy

Artificial Intelligence, Simulations & Software

Month

July 2017

Are your GIF’s infected?

Have you ever needed to create a GIF and found the available options for doing so less than stellar?

I mean sure, you could try your luck with an option off download.com and risk a virus! However, if you value your electronic devices as well as your data and would like to just skip the absolute hellish nightmare of dealing with the resulting ransomware you might just decide give one of the more reputable cloud build GIF making services a try instead.

However, fail to use one of those more “reputable” build services and you are back to square one, downloading viruses!

Further, even if you are lucky and do find a service that isn’t a front for a black hat syndicate, anyone with an ounce of sense (28.3495 grams to be exact) 😛 will be left with with more questions and concerns than confidence!

Questions like, do I still own my images? or Are the generated GIF’s mine? Have I given away or extended use rights (redistribution or public display) to the site owners? Have they been tampered with, down-scaled or were any watermarks added? Am I compromising my brand or business by using this service? Am I sure I know what I am getting back is safe for myself and my clients?

Right about now a few of you might be thinking “You can’t get a virus from an image since there is no executable code”… but of course you’d be wrong!

So… Let’s take a trip back to 2002 with this article from PC mag. The first jpeg virus had been identified in the wild and while it was benign (both then and certainly now) it demonstrates that even images can be vectors of attack and a means of passive propagation!

The fact is that even if a GIF acts only as a means of delivering a viral payload, a cargo container on which the malware hitches, the GIF (or image in general) is therefore necessarily used in conjunction with a viewer or player application (executable) and therein lies the problem! The image data must be read to be viewed.

The risk posed here is by a so called “zero-day” attack utilizing as yet undocumented vulnerabilities in the viewer app itself, the codec or libraries used to read the media or even potentially the OS, and if you think you are safe because you’d somehow intuit that the image is seemingly “larger than it should be” (in terms of byte size) well, you’d be wrong again!

Remind me to have a talk with you later about this whole doubting me thing… its weird, it’s becoming a problem and it needs to stop! 😛

Appending raw byte data is a real sloppy & amateur way to infect (or store) data in an image!

There are plenty of methods for hiding data in images that will NOT modify the file size!

Further, I have some future stenographic projects planned so I will be brief here but just to prove the point… consider an image that is only 100x100px.

Like this one:

100x100.png

 

Such an image tends to be only a few bytes to kilobytes in size, the image above is only 0.506 KB (damn small) & you could hardly store any data in that right? Well if you are a clever hacker or computer scientist you can come up with quite a few different ways to encode the data directly into the pixel values themselves while at the same time making such slight modifications to the pixels that no perceivable change has occurred!

Additionally, high definition images are common these days so if anything this example is overly critical and in reality you will commonly deal with larger images. The simple fact is you cannot simply look at file size as and indicator for file infection when the file is an image!

Therefore even in a single static JPEG image that is only 100x100px (like above) could store at minimum 10,000 characters (about double all the characters in this entire post)!

Just when you were thinking “WOW TL;DR!” 😛

If you drop fidelity of the image as a concern you can write data to all color channels and that gives you 30,000 (~6X the length of this post) characters to work with! If instead you use a PNG, so that you can play with the alpha channel too, you get 40,000 (~8X the length of this post) characters (assuming that you didn’t use the alpha channel as a checksum ;-))… I can go on for quite some time on this very deep and fascinating subject but as I said I have some stenographic projects planed for you guys in the future and we will cover this stuff in more detail in those posts, so suffice it to say that just because “it’s an image” does not make it safe!

Now, I’m not trying to scare you… okay maybe a little 😛  but I want you to understand that the fact that you upload and download images to cloud build services is in no way a protection and a professional content creator cannot guess that their content is safe to open.

This is where I found myself when I wanted to animate and publish the Sierpinski triangle animations in my post A Chaos Game.

Sierpinski_triangle

That’s why I used the GIFEncoder PHP class released by László Zsid to animate them myself using PHP rather than risk my system with unknown files! The great thing about GIFEncoder is that you don’t have to wonder if it’s safe,  feel free to read the code yourself over on my GitHub and grab a copy while you  are there! 😉

Plus admit it, its just more impressive and satisfying to copy & paste the code I give you and get a GIF rather than images which you then have to go stitch into a GIF yourself! 😛

I also previewed my latest Patreon App called GIFMaker in my last post A Value Proposition. Well today I am pleased to announce that I have made GIFMaker available over on Patreon for my User and Developer level followers!

Here are some screenshots of GIFMaker :

MAIN VIEW

FILE BROWSER

SETTINGS

 

GIFMAKER GALLERY SIGN IN

GIFMAKER GALLERY

The best part is that you can actually see the code that is responsible for creating the GIF as GIFMaker uses a PHP server back-end (either on your local machine or on your web server) so even my User level followers can modify the core functionality of GIFMaker  (and GIFMaker Gallery) to meet their needs!

If you also would like to modify the GIFMaker GUI you can become a Developer level supporter of mine and get access to the C# Source Code and Unity3D IDE Project along with a commercial reuse license should you want or need that!

  • There are no artificial limits in terms of image dimensional size or byte data placed on the application so if you have the memory and storage, feel free to make GIFs as large as you want!

 

  • GIFMaker will not apply any kind of watermarks or other branding or identifiers to the animations so all you will get back is the images you gave it, simply animated!

 

  • Comes with a Web Interface GIFMaker Gallery enabling the Viewing, Downloading and Deletion of your GIFs.

 

GIFMaker is now available over on Patreon and if it looks & sounds like something you need, consider supporting me over on Patreon so I can bring you more great prototypes and tutorials!

Have a great week!

Much Love,

~Joy

Advertisements

A Value Proposition

 

Who am I?

Geek Girl Joy

Hello, my name is Joy.

I have been very fortunate in my career to have had amazing opportunities to work for very large well known companies like The Walt Disney Company, Sparkletts Water, Karen Kane and Citizens of Humanity among other less iconic companies as either as contracted technical support or as a direct employee supporting IT infrastructure and in diverse rolls like Help Desk, Field and Hardware Repair Technician, Senior Systems Administrator, Web Master, Graphics Artist, 3D Printer/Maker to Programmer & Business Owner and everything between! 😛

I make my own Ethernet cables, build phone and data closets all by my lonesome and program neural networks for my amusement! I like working with PHP and other C Family languages like C++, C# etc. and I occasionally work with Python & JavaScript as the need may arise but ultimately depending on the needs of the project, I’m flexible.

What do I do?

My professional experiences have allowed me to develop an in depth knowledge of technology and how businesses leverage both software and hardware systems to achieve their goals.

Throughout my career I have had to develop and deploy off the shelf as well as custom solutions which has allowed me to grow my skill set so that am able to build functional, proof of concept cross-platform software prototypes very rapidly!

Additionally I leverage my years of experience both working with and evaluating technology to provide my opinion in the form of commentary on various products that I like or that I think my followers can benefit from.

Some examples of my technical commentary include: 

 

Some examples of tutorials I have posted include:

 

These works are free and publicly available to anyone and there is no cost to simply follow me to gain access to them, however I do ask that if you like something I create please share it with others on social media.

I do my best to coordinate all my content through this blog and I freely host code over on my GitHub account for my followers as well.

Additionally I have a Patreon profile where my followers can support me financially and they receive a few extra benefits. Before discussing that though I would like to explain why I am using Patreon over other methods of content distribution and supporter payment management.

 

Why Patreon?

I chose Patreon as a community organizing and content delivery platform because it allows me to distribute my software and content in a way that people are already familiar with and comfortable using. Additionally, while their service isn’t free to the content creator, they only charge me based on any generated profits which means that I don’t have to worry about paying them (losing money) while trying to grow my audience.

Of course it is more costly then simply using PayPal and creating a membership site myself but I look at the extra expense as  the cost of using their services. I am willing to pay a slightly higher premium if it allows me to focus on content creation and development. In the end, my supporters benefit the most because they receive more content and of a higher quality.

 

Why support me?

As I said my supporters get access to my paid premium content. This content usually takes the form of expanding on the ideas and projects I blog about to illustrate the concept  using a real world example or prototype.

Some examples of my Prototypes include:

Pinger

 

 

 

Pathfinder Visual Interface

 

 

 

A Geek Sneak Peak 😛

Here is a preview of a currently unreleased project that I will make available on Patreon when it’s ready.

The list of software available to my supporters will continue to grow and reflect their needs and my interests.

I like making functional tools that actually accomplish something or solve real problems, but I can also make games if that is what my audience would prefer.

 

Support Levels

SupporterSupporters – are people who like my public content and want to support my efforts.

 

$1 a month Supporters Enjoy:

  • Access to any  Patreon-only posts, or messages I publish on Patreon
  • Your name listed as a Patreon Supporter on my sponsors page, posts and anywhere else that it is relevant to list and thank my supporters.
  • The satisfaction of knowing you are helping me develop free and awesome software and other content!
  • Access to all the public content I publish here on my blog  & github and any other venue where I publish public content.
  • Suggest projects you would like me to work on.

 

Users – are people who want access to use all the closed source software I create and publish to Patreon. This is software as a service, I am your developer, what can I build to make your world a better place?

 

$5 a month Users Enjoy:

  • All the benefits Supporters enjoy.
  • Access to use the closed source software and content I publish to Patreon.
  • The ability to request features be added to the software  you like.

 

Developers – are people looking to learn to code and build products or simply looking for a prototype. They get access to the closed source code of the software I release on Patreon so they can develop from my prototypes.

$25 a month Developers Enjoy:

  •  All the benefits Supporters & Users enjoy.
  •  Access to use the source of the closed source software and content I publish to Patreon.
  • A  a commercially permissible reuse license.

 

If this sounds good to you and motivates you to want to support me so that I can continue to create projects like these as well as to grow bigger and better, please consider supporting me over on Patreon.

Please Like, Comment & Share my posts with your friends and followers on social media.

If you would like to suggest a topic or project for an upcoming post feel free to contact me.

Much Love,
~Joy

A Chaos Game

Hello everyone I hope you had a great week! Mine was too short due to the Independence Day (4th of July) holiday here in the U.S. and to make it worse , FULL of frustrating bug fixes so I am going to keep this weeks tutorial short & simple! 😛

Alright, so this week I have a fun math + animation project for you.

We are going to generate a series of images containing the Sierpinski triangle (a well known fractal) and then animate them using the GIFEncoder class released by László Zsid

The Sierpinski Triangle

Here is a time laps gif of  The Sierpinski Triangle:

Many people (myself included) find fractals incredibly beautiful!

How does this work?

It’s surprisingly simple to create the Sierpinski Triangle and there are many different ways to accomplish our goal however a really simple way is called the “chaos game“, here is the formula :

  1. Select 3 points in the image to form a triangle (ideally it should be an equilateral triangle however based on my experimentation it doesn’t seem to be absolutely required, the triangle will deform (warp) but not entirely disappear).
  2. Randomly select any point inside the points.
  3. Randomly select any one of the 3 vertex points.
  4. Move half the distance from your current position to the selected vertex.
  5. Plot the current position.
  6. Repeat from step 3.

Once we have created all the images and buffered them we create and write the animation to the new gif.

Here is the code for your review:



<?php
set_time_limit(300); // Adjust as needed

include('GIFEncoder.class.php'); // GIFEncoder class


// Buffer Images
// http://php.net/manual/en/function.ob-start.php
// http://php.net/manual/en/function.imagegif.php
// http://php.net/manual/en/function.ob-get-contents.php
// http://php.net/manual/en/function.ob-end-clean.php
function EncodeImage($image, $delay){
	
	global $images, $buffered;

	ob_start(); // Start the buffer
	imagegif($image); // Output image buffer as a gif encoded still
	$images[]=ob_get_contents(); // add the gif still to the images array
	$buffered[]=$delay; // Delay in the animation.
	ob_end_clean(); // Stop the buffer
}


// Build the triangle fractal
// https://en.wikipedia.org/wiki/Sierpinski_triangle
// http://php.net/manual/en/function.imagecolorallocate.php
// http://php.net/manual/en/function.mt-rand.php
// http://php.net/manual/en/function.imagesetpixel.php
function ChaosGame($image, $points){
	global $density,$x, $y;
	
	$counter = 0;
	for ($i = 1; $i < $density; $i++) { // Higher density will plot more points
	
	  $COL = imagecolorallocate($image, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255)); // Random Color
	  imagesetpixel($image, round($x),round($y), $COL); // Plot the current position
	  $a = mt_rand(0, 2); // Randomly select any one of the 3 vertex points for next the iteration
	  
	  // Move half the distance from your current position 
	  // to the selected vertex for next the iteration
	  $x = ($x + $points[$a]['x']) / 2;
	  $y = ($y + $points[$a]['y']) / 2;
	  
	  $counter++;
	  
	  if($counter >= 1000){
		  imagepng($image , "$i.png"); // Save the image 
		  EncodeImage($image, 1); // Buffer image
		  $counter = 0;
	  }
	}

}


$images;
$buffered;

$density = 100000;

$x = 600; // Reset $x
$y = 600; // Reset $y

$inset = 10;
$points[0] = array('x' => $x / 2, 'y' =>  $inset); // Top
$points[1] = array('x' =>   $inset, 'y' => $y - 0); // Left
$points[2] = array('x' => $x - $inset, 'y' => $y - 0); // Right
$image = imagecreatetruecolor($x, $y); // Create the image resource 
ChaosGame($image, $points); // This triangle will rotate
imagedestroy($image); // Free memory


// Generate the animation
$gif = new GIFEncoder($images,$buffered,0,0,0,0,0,'bin');

// Save the gif
$animation_file = fopen('timelaps.gif', 'w');
fwrite($animation_file, $gif->GetAnimation());
fclose($animation_file);

?>

 

 

We can have a little more fun by drawing more than one at a time and animating it like this:

Here is the code:



<?php
set_time_limit(300); // Adjust as needed

include('GIFEncoder.class.php'); // GIFEncoder class


// Buffer Images
// http://php.net/manual/en/function.ob-start.php
// http://php.net/manual/en/function.imagegif.php
// http://php.net/manual/en/function.ob-get-contents.php
// http://php.net/manual/en/function.ob-end-clean.php
function EncodeImage($image, $delay){
	
	global $images, $buffered;

	ob_start(); // Start the buffer
	imagegif($image); // Output image buffer as a gif encoded still
	$images[]=ob_get_contents(); // add the gif still to the images array
	$buffered[]=$delay; // Delay in the animation.
	ob_end_clean(); // Stop the buffer
}


// Build the triangle fractal
// https://en.wikipedia.org/wiki/Sierpinski_triangle
// http://php.net/manual/en/function.imagecolorallocate.php
// http://php.net/manual/en/function.mt-rand.php
// http://php.net/manual/en/function.imagesetpixel.php
function ChaosGame($image, $points){
	global $density,$x, $y;
	
	for ($i = 1; $i < $density; $i++) { // Higher density will plot more points
	  $COL = imagecolorallocate($image, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255)); // Random Color
	  imagesetpixel($image, round($x),round($y), $COL); // Plot the current position
	  $a = mt_rand(0, 2); // Randomly select any one of the 3 vertex points for next the iteration
	  
	  // Move half the distance from your current position 
	  // to the selected vertex for next the iteration
	  $x = ($x + $points[$a]['x']) / 2;
	  $y = ($y + $points[$a]['y']) / 2;
	}
	
}


$images;
$buffered;

$density = 100000;
$frame_increment = 7; // Set to 1 for 360 still images.
                      // At 7 we get 52.

// Create the still images
for ($k = 1; $k < 360; $k+=$frame_increment) {
	$x = 600; // Reset $x
	$y = 600; // Reset $y
	$points[0] = array('x' => $x / 2, 'y' =>  0); // Top
	$points[1] = array('x' =>   10, 'y' => $y - 0); // Left
	$points[2] = array('x' => $x - 10, 'y' => $y - 0); // Right
	$image = imagecreatetruecolor($x, $y); // Create the image resource 
	ChaosGame($image, $points); // This triangle will rotate
    $image = imagerotate($image, $k, 0); // Perform rotation
	ChaosGame($image, $points); // This triangle will not
	imagepng($image , "$k.png"); // Save the image 
	EncodeImage($image, 1); // Buffer image
	imagedestroy($image); // Free memory
}


// Generate the animation
$gif = new GIFEncoder($images,$buffered,0,0,0,0,0,'bin');

// Save the gif
$animation_file = fopen('Sierpinski_triangle.gif', 'w');
fwrite($animation_file, $gif->GetAnimation());
fclose($animation_file);

?>

 

And as previously mentioned, since this post falls during the week of American Independence I would be remiss by not mixing in a little little Red White and Blue, rendered for your desktop wallpaper pleasure (click to get it fullsize):

Here is the code:



<?php
set_time_limit(300); // 5 Minutes Adjust as needed
ini_set('memory_limit', '2G'); // 2 GB Adjust as needed


$images;
$buffered;

$density = 1000000; // Higher density will plot more points but is costly on large images
$x = 4000; // Reset $x
$y = 4000; // Reset $y

$inset = 10;
$points[0] = array('x' => $x / 2, 'y' =>  $inset); // Top
$points[1] = array('x' =>   $inset, 'y' => $y - 0); // Left
$points[2] = array('x' => $x - $inset, 'y' => $y - 0); // Right
$image = imagecreatetruecolor($x, $y); // Create the image resource 

$red = imagecolorallocate($image, 255, 0, 0);
$white = imagecolorallocate($image, 255, 255, 255);
$blue = imagecolorallocate($image, 0, 0, 255);

for ($i = 1; $i < $density; $i++) { // Higher density will plot more points but is costly on large images

  if($x < 4000 / 3){$color = $red;}
  elseif($x > ((4000 / 3)) && $x < ((4000 / 3)*2) ){$color = $white;}
  else{$color = $blue;}

  imagesetpixel($image, round($x),round($y), $color); // Plot the current position
  $a = mt_rand(0, 2); // Randomly select any one of the 3 vertex points for next the iteration
  
  // Move half the distance from your current position 
  // to the selected vertex for next the iteration
  $x = ($x + $points[$a]['x']) / 2;
  $y = ($y + $points[$a]['y']) / 2;
}

imagejpeg($image , "redgreenblue.jpg"); // Save the image 

imagedestroy($image); // Free memory

?>

 

If you would like to obtain a copy of this code from GitHub you can find it here: SierpinskiTriangle Project on GitHub

 

Please support me on Patreon so I can continue to bring you more great tutorials like this!

As always I hope you found this both interesting and informative. Please Like, Comment & Share this post with your friends and followers on your social media platforms and don’t forget to click the follow button over on the top right of this page to get notified when I post something new.

If would like to suggest a topic or project for an upcoming post feel free to contact me.

Much Love,
~Joy

 

 

Blog at WordPress.com.

Up ↑