Imagick - Basic Concepts

[Hare]

Hello everyone. 

Per request, this thread will contain tutorials on how to use ImageMagick (an image layering system) with PHP for your petsite or SIM. You can use this tutorial for pets, creatures, human avatars, etc. (it should all work with the same kind of system). I assume you know a bit of basic PHP, but you don't have to know a lot.

INTRODUCTION
I'm Hare, aka Lunar. I'm a coder, artist, and owner of www.warrenz.net. I'll be using Warrenz for demonstration because I use ImageMagick for the rabbits on there. I've also worked with GD library and CSS layering, but won't be going over those here.

COPYRIGHT
The images used in this tutorial and copyrighted and belong to me. Do not use them outside the Terms of Service of www.warrenz.net or without my expressed, written permission. 

Now let's get on with the basics!

WHY USE IMAGEMAGICK
There are good alternatives to Imagick. The benefits of ImageMagick is that it's powerful (which is why I like it), but GD Library is a fast alternative (from my experience, the processing time is less). There's also CSS layering, which may be good if you don't need anything fancy. I'm not going to go over methods of layering in this tutorial, just know that there are other options out there that may work better for your needs.

INSTALLATION
I'm not going to go over the installation process. This tutorial assumes that you already have Imagick (the PHP extension of ImageMagick) installed on your server. If you're not sure whether Imagick is installed, you can check your PHP info page where it should be listed. I'm also going to assume you're using version 3.4.3 or later.

View attachment 4224

BASIC TUTORIAL - Getting Started With Imagick Layering
I'm going to start out with the most barebones code you can use for those who have never used Imagick and want to know how to get started. We'll combine a base layer with some lineart.

View attachment 4225View attachment 4226

STEP 1 - CREATE YOUR FILES
You'll need two files. One file is going to contain your Imagick code, name it img.php or whatever you want to name it. The other is going to be a page on the site that displays the image (can any page you want to display them on, such as pet profile or wherever). We'll call it profile.php.

On profile.php where the image is displayed, this is all you need to get started:

<?php

echo "<img src='img.php'>";

?>


This will display the image created in the img.php as a <img src=''> code.

Now let's get some code into the img.php file:

<?php 

$path = "./img/";

$img = new Imagick( $path . "/base.png" );

$imglines = new Imagick( $path . "lines.png" );
$img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0);

header('Content-type: image/png');
echo $img;

?>


The first line of code declares your file path. We're going to put all our images for the layering system in the img file on the site. 

The next line of code is the first layer that starts the image off. The base layer.

The next line is for the next layer that will go on top of the base layer. Lineart. I also include the shine of the eyes in the lineart layer, but you don't have to do it that way. 
The compositeImage function is used here. It puts the $imglines layer on TOP of the $img (which is the base layer), combining the two into a single image ($img). 

Then we simply declare the image headers and echo the resulting $img. 

Congratulations! You completed the first tutorial and now have a basic layered image.

View attachment 4227




BASIC TUTORIAL #2 - All My Layers + Multiply Shading
So you know how to display an Imagick image, but you're not sure how to add more layers. You're going to need markings, shading, etc. Let's do it! We're going to combine ALL these layers and make some nice shading!

View attachment 4225View attachment 4229View attachment 4230View attachment 4231View attachment 4232View attachment 4233View attachment 4239View attachment 4226View attachment 4242

This may look like it's going to be a lot of work, but actually, we're just going to copy paste the lineart layer over and over again.
Your new ImageMagick code (img.pgp) with all the new layers:

<?php

$path = "./img/";

$img = new Imagick( $path . "/base.png" );

$imgagouti = new Imagick( $path . "agouti.png" );
$img->compositeImage($imgagouti, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgotter = new Imagick( $path . "otter.png" );
$img->compositeImage($imgotter, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgdetails = new Imagick( $path . "details.png" );
$img->compositeImage($imgdetails, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgeye = new Imagick( $path . "eye.png" );
$img->compositeImage($imgeye, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgpupil = new Imagick( $path . "pupil.png" );
$img->compositeImage($imgpupil, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgshading = new Imagick( $path . "shading.png" );
$img->compositeImage($imgshading, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imglines = new Imagick( $path . "lines.png" );
$img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgwatermark = new Imagick( $path . "watermark.png" );
$img->compositeImage($imgwatermark, Imagick::COMPOSITE_DEFAULT, 0, 0);

header('Content-type: image/png');
echo $img;

?>



Look how we're adding one layer on top, one after another. Each one gets composited over the last, adding to the resulting $img. That's pretty much it.
But wait:

View attachment 4240

Why is this rabbit's shading blue? I use blue shading on Warrenz. However, we're going to switch the shading layer over to MULTIPLY. Where it says COMPOSITE_DEFAULT on the shading layer, change it to COMPOSITE_MULTIPLY.

View attachment 4241

There, now we have a beautifully shaded rabbit! Multiply allows for very nice, vibrant colors. You don't have to use it, but I recommend it for more dynamic shading.


That's it for now! I hope some of this is helpful.

 

[Hare]

COLORING & MARKINGS - Mendelian Genetics
There's a lot of ways you can handle markings and layers. We include semi-realistic Mendelian genetics on Warrenz, so I'll go over how to handle three different gene expressions in this part. I'm using rabbits as an example, but you can apply the same coding concepts to different species even though they have different genetics.

TURNING LAYERS OFF AND ON 
We'll start with the basics, using the A Locus to turn layers off and on in a way that mimics real life. There's more to the genotype than just the A locus, but you don't need the entire genotype for a working code. You can add other genes later.

Here' a real life agouti rabbit.
View attachment 4243

ANd here's a tan pattern (same genotype aside from the A locus).
View attachment 4244

And again, same genotype on this one except he's a self (A locus).

View attachment 4253

So self has no markings, tan has just the cream underbelly, and agouti has cream underbelly and an additional brown layer. Let's do it!

Step One
In order to tell the program which genes your animal has, you need to pass the variables into your Imagick script. This can be done with $_GET. Edit your profile.php (or whenever you're displaying the image) to include the locus variable.

<?php

echo "<img src='img.php?alocus=$alocus'>";

?>



The $alocus variable will need to be assigned of course. I'm not going to go over scripts for genetics in this tutorial, just the Imagick parts, so I'm assuming you already have a method telling the locus what to be. 

In this case, it will ether be agouti, tan, or self.

Step Two
So back to the Imagick script, add the variable for the locus and then add some if statements to make that locus determine which layers get turned on. 

<?php

$path = "./img/";

$alocus = $_GET["alocus"];

$img = new Imagick( $path . "/base.png" );

if ($alocus == 'agouti')
{
$imgagouti = new Imagick( $path . "agouti.png" );
$img->compositeImage($imgagouti, Imagick::COMPOSITE_DEFAULT, 0, 0);
}

if ($alocus == 'agouti' or $alocus == 'tan')
{
$imgotter = new Imagick( $path . "otter.png" );
$img->compositeImage($imgotter, Imagick::COMPOSITE_DEFAULT, 0, 0);
}

$imgdetails = new Imagick( $path . "details.png" );
$img->compositeImage($imgdetails, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgeye = new Imagick( $path . "eye.png" );
$img->compositeImage($imgeye, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgpupil = new Imagick( $path . "pupil.png" );
$img->compositeImage($imgpupil, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgshading = new Imagick( $path . "shading.png" );
$img->compositeImage($imgshading, Imagick::COMPOSITE_MULTIPLY, 0, 0);

$imglines = new Imagick( $path . "lines.png" );
$img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgwatermark = new Imagick( $path . "watermark.png" );
$img->compositeImage($imgwatermark, Imagick::COMPOSITE_DEFAULT, 0, 0);

header('Content-type: image/png');
echo $img;

?>


Bam! Now we have a dynamic rabbit that can be either agouti, tan, or self depending on the A locus.
If $alocus is self (or not specificied at all), neither marking layers will show, resulting in a self colored rabbit.

View attachment 4247

If $alocus is tan, we'll get the otter layer added.

View attachment 4248

And if $alocus is agout, we'll get a rabbit with both otter and agouti layers active, resulting in a true agouti color.
View attachment 4249




ALBINISM  - Color Change & Adding Another Locus
What if we wanted to make an albino? In real life, albinism is like a white sheet masking the rabbit's true color underneathe, so I like to do the same thing with Imagick (it's easier than trying to turn every layer white).

Albinism is controlled in the C locus for rabbits, so here's how to add another locus.

Add it to the image display file like we did before. Separate it from the previous one with an & symbol. You can continue to add as many more variables as you want layer using & symbols like this.
 

<?php

echo "<img src='img.php?alocus=$alocus&clocus=$clocus'>";

?>


Now, add the new variable to the Imagick file. We're also going to add a new layer right under the eye layer, and above the highest possible marking. This is a copy of the base layer, but we're turning it white so it goes over all the furry parts. 
The white layer will be activated if the C locus is set to albino. 

We are also going to add a color change to the eye and pupil layers if C locus is albino, creating red eyes.
 

<?php

$path = "./img/";

$alocus = $_GET["alocus"];
$clocus = $_GET["clocus"];

$img = new Imagick( $path . "/base.png" );

if ($alocus == 'agouti')
{
$imgagouti = new Imagick( $path . "agouti.png" );
$img->compositeImage($imgagouti, Imagick::COMPOSITE_DEFAULT, 0, 0);
}

if ($alocus == 'agouti' or $alocus == 'tan')
{
$imgotter = new Imagick( $path . "otter.png" );
$img->compositeImage($imgotter, Imagick::COMPOSITE_DEFAULT, 0, 0);
}

if ($clocus == 'albino')
{
$imgalbino = new Imagick( $path . "base.png" );
$clut = new Imagick();
$clut->newImage(1, 1, new ImagickPixel('#FFF'));
$imgalbino->clutImage($clut);
$clut->destroy();
$img->compositeImage($imgalbino, Imagick::COMPOSITE_DEFAULT, 0, 0);
}

$imgdetails = new Imagick( $path . "details.png" );
$img->compositeImage($imgdetails, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgeye = new Imagick( $path . "eye.png" );
if ($clocus == 'albino')
{
$imgeye->modulateImage(150, 100, 80);
}
$img->compositeImage($imgeye, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgpupil = new Imagick( $path . "pupil.png" );
if ($clocus == 'albino')
{
$clut = new Imagick();
$clut->newImage(1, 1, new ImagickPixel('#811f32'));
$imgpupil->clutImage($clut);
$clut->destroy();
}
$img->compositeImage($imgpupil, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgshading = new Imagick( $path . "shading.png" );
$img->compositeImage($imgshading, Imagick::COMPOSITE_MULTIPLY, 0, 0);

$imglines = new Imagick( $path . "lines.png" );
$img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgwatermark = new Imagick( $path . "watermark.png" );
$img->compositeImage($imgwatermark, Imagick::COMPOSITE_DEFAULT, 0, 0);

header('Content-type: image/png');
echo $img;

?>


And now we have an albino rabbit.

View attachment 4250

Recoloring Options
This shows two different options for recoloring your image layers.
1. Change hex with clut like we did to turn the base layer white and the pupil pink. This forces the hex value over the entirety of the layer, as opposed to modulation which simply adjusts the color, so the whole layer will be one color (works fine if you don't want to retain multiple colors or shades in a single layer).
2. Modulation, as used on the eye layer to retain the shading we have inside the eye layer itself. We don't want these all turning into one color. Since we use modulation for the eyes though, we do need to make sure every bunny on the site has the same hex values used in the artwork files for the eyes (otherwise the modulator would cause inconsistent colors).

You don't have to worry about inconsistent colors when forcing hexes using clut, so that's a tradeoff I've found. 

Here's a picture showing off the eye layer without the modulation (the way it is in the source file), and with modulation to turn it pink with albinism.
View attachment 4252View attachment 4251

There you have those. Those are some of the basics for adding markings and adjusting colors. You can see how variables are passed into Imagick from an outside script, and how to manipulate layers using those variables. This can be expanded into the rest of your script for a more fleshed out system (and you don't need to use it strictly for genotypes, you can also just make a variable for tiger stripes for example and have that in there instead).
 

Note: I know the shading on the white rabbit is a little harsh here. It's just the file I'm using, sorry about that. I forgot to lower the opacity in the shading art file a bit for this tutorial.

 

[Hare]

SPOTS - Cutouts & Variations
What if you want to make a spotted animal, like this English Spot rabbit? You could draw spots on, but what if you want the spots to be the color of the animal's genotype (minus spotted factor)? AND you want variation for the spots? 

View attachment 4254

Step One - Prepare Layers
For these layers, we'll draw where we want the spots to go. We'll have two different variations, spots0.png and spots1.png. 

View attachment 4255View attachment 4256
Step Two - Add One
Now let's add the spots0.png layer. If you read the tutorial above, you'll see that we created a solid white rabbit (albino) by adding a copy of the base layer that goes over the other markings. We're going to reuse this white layer for the English rabbits by cutting spots out of it. 
 

<?php

$path = "./img/";

$img = new Imagick( $path . "/base.png" );

$imgalbino = new Imagick( $path . "base.png" );
$clut = new Imagick();
$clut->newImage(1, 1, new ImagickPixel('#FFF'));
$imgalbino->clutImage($clut);
$clut->destroy();

$imgspots = new Imagick( $path . "/spots0.png" );
$imgalbino->compositeImage($imgspots, Imagick::COMPOSITE_DSTOUT, 0, 0);

$img->compositeImage($imgalbino, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgdetails = new Imagick( $path . "details.png" );
$img->compositeImage($imgdetails, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgeye = new Imagick( $path . "eye.png" );
$img->compositeImage($imgeye, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgpupil = new Imagick( $path . "pupil.png" );
$img->compositeImage($imgpupil, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgshading = new Imagick( $path . "shading.png" );
$img->compositeImage($imgshading, Imagick::COMPOSITE_MULTIPLY, 0, 0);

$imglines = new Imagick( $path . "lines.png" );
$img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgwatermark = new Imagick( $path . "watermark.png" );
$img->compositeImage($imgwatermark, Imagick::COMPOSITE_DEFAULT, 0, 0);

header('Content-type: image/png');
echo $img;

?>


The spots layer composites over the albino layer with COMPOSITE_DSTOUT instead of COMPOSITE_DEFAULT, causing the spots to be cut out of the albino layer.

We then composite the resulting 'updated' albino layer (with the spots cut out) onto the $img.

Thus, we now have an English Spot:

View attachment 4258

If we add the marking layers in, we can get any color to show where the spots are. Not just black spots.

View attachment 4257

Step Three - Add Variation Variable
Add a variable to the scripts like we did with genetics in the above tutoorial. 
 

<?php

echo "<img src='img.php?spotnum=$spotnum'>";

?>


$spotnum will either be 0 or 1, which is in the filename for the spots. 
Now add the GET variable to your Imagick script like we did above. 

 

<?php

$path = "./img/";

$spotnum = $_GET["spotnum"];

$img = new Imagick( $path . "/base.png" );

$imgalbino = new Imagick( $path . "base.png" );
$clut = new Imagick();
$clut->newImage(1, 1, new ImagickPixel('#FFF'));
$imgalbino->clutImage($clut);
$clut->destroy();

$imgspots = new Imagick( $path . "/spots" . $spotnum . ".png" );
$imgalbino->compositeImage($imgspots, Imagick::COMPOSITE_DSTOUT, 0, 0);

$img->compositeImage($imgalbino, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgdetails = new Imagick( $path . "details.png" );
$img->compositeImage($imgdetails, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgeye = new Imagick( $path . "eye.png" );
$img->compositeImage($imgeye, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgpupil = new Imagick( $path . "pupil.png" );
$img->compositeImage($imgpupil, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgshading = new Imagick( $path . "shading.png" );
$img->compositeImage($imgshading, Imagick::COMPOSITE_MULTIPLY, 0, 0);

$imglines = new Imagick( $path . "lines.png" );
$img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgwatermark = new Imagick( $path . "watermark.png" );
$img->compositeImage($imgwatermark, Imagick::COMPOSITE_DEFAULT, 0, 0);

header('Content-type: image/png');
echo $img;

?>


And now we get both variations depending on what number the animal has in their data.

View attachment 4259View attachment 4260

 

[Hare]

TRANSPARENCY - Another Way to Add Variation
If you want to add even more color opportunities to your creatures, one thing you can do is change the level of transparency on a marking layer.

Let's change the transparency of the agouti layer that is composited over the black base layer.
View attachment 4261

 

<?php

$path = "./img/";

$img = new Imagick( $path . "/base.png" );

$imgagouti = new Imagick( $path . "agouti.png" );
$imgagouti->evaluateImage(Imagick::EVALUATE_MULTIPLY, 0.5, Imagick::CHANNEL_ALPHA);
$img->compositeImage($imgagouti, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgdetails = new Imagick( $path . "details.png" );
$img->compositeImage($imgdetails, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgeye = new Imagick( $path . "eye.png" );
$img->compositeImage($imgeye, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgpupil = new Imagick( $path . "pupil.png" );
$img->compositeImage($imgpupil, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgshading = new Imagick( $path . "shading.png" );
$img->compositeImage($imgshading, Imagick::COMPOSITE_MULTIPLY, 0, 0);

$imglines = new Imagick( $path . "lines.png" );
$img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgwatermark = new Imagick( $path . "watermark.png" );
$img->compositeImage($imgwatermark, Imagick::COMPOSITE_DEFAULT, 0, 0);

header('Content-type: image/png');
echo $img;

?>


Now we have the agouti layer set to 50% its normal opacity, allowing for the black base to show through 50% more and resulting in a darker colored rabbit. You can still see the agouti layer, but it's half as strong.
You can adjust this to whatever you want by editing the 0.5 to another number.

View attachment 4262




GRADIENTS - Adding More Color
You can also add gradients with Imagick using the newPseudoImage function. 
 

<?php

$path = "./img/";

$img = new Imagick( $path . "/base.png" );

$gradient = new Imagick();
$gradient->newPseudoImage(400, 400, 'gradient:rgba(255,0,0)-none');
$img->compositeImage($gradient, Imagick::COMPOSITE_ATOP, 0, 0);

$imgdetails = new Imagick( $path . "details.png" );
$img->compositeImage($imgdetails, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgeye = new Imagick( $path . "eye.png" );
$img->compositeImage($imgeye, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgpupil = new Imagick( $path . "pupil.png" );
$img->compositeImage($imgpupil, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgshading = new Imagick( $path . "shading.png" );
$img->compositeImage($imgshading, Imagick::COMPOSITE_MULTIPLY, 0, 0);

$imglines = new Imagick( $path . "lines.png" );
$img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgwatermark = new Imagick( $path . "watermark.png" );
$img->compositeImage($imgwatermark, Imagick::COMPOSITE_DEFAULT, 0, 0);

header('Content-type: image/png');
echo $img;

?>


Now we have a black rabbit with a red vertical gradient. Change the RBG value to whatever color you want for the gradient part. 

We can also add the agouti layer (as you can see, it works with markings) and have the gradient go over or under the marking depending on the order we composite the layers.
View attachment 4263
Above image has no agouti marking.
View attachment 4264
Above image has the agouti marking underneathe the gradient.
View attachment 4265
Above image has the agouti marking above the gradient.

View attachment 4266
You can also do other types of gradients such as radial with radial-gradient:rgba(255,0,0)-none. 



FRACTALS - Adding Even More Color
You can do a lot of other nifty stuff with newPseudoImage such as fractals.
 

<?php

$path = "./img/";

$img = new Imagick( $path . "/base.png" );

$imgfractal = new Imagick();
$imgfractal->newPseudoImage(400,400, "plasma:fractal ");
$img->compositeImage($imgfractal, Imagick::COMPOSITE_ATOP, 0, 0);

$imgdetails = new Imagick( $path . "details.png" );
$img->compositeImage($imgdetails, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgeye = new Imagick( $path . "eye.png" );
$img->compositeImage($imgeye, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgpupil = new Imagick( $path . "pupil.png" );
$img->compositeImage($imgpupil, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgshading = new Imagick( $path . "shading.png" );
$img->compositeImage($imgshading, Imagick::COMPOSITE_MULTIPLY, 0, 0);

$imglines = new Imagick( $path . "lines.png" );
$img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgwatermark = new Imagick( $path . "watermark.png" );
$img->compositeImage($imgwatermark, Imagick::COMPOSITE_DEFAULT, 0, 0);

header('Content-type: image/png');
echo $img;

?>


View attachment 4267
Now we have fancy randomly generated colors. 

 

[Hare]

STORING IMAGES - When to Render
Rendering images with Imagick is easy, but it takes a while to process each time you view the pet that's being rendered. If you want players to see images instantly without having to render them each time, you can store them in a file directory.

First, you'll need something to name the file. We can use the pet's unique ID for this. Put the ID variable in your display code (wherever the image will be displayed) so you can pass it to your Imagick file (img.php).
 

<?php

echo "<img src='img.php?petid=$petid'>";

?>


Now pass the GET variable to Imagick so you'll have the pet ID in your Imagick code.
You'll also add a new section to your Imagick code near the end. We'll use an if statement to check if a pet with this ID has an image file already (if not, it will write a new one). 
 

<?php

$path = "./img/";

$petid = $_GET["petid"];

$img = new Imagick( $path . "/base.png" );

$imgdetails = new Imagick( $path . "details.png" );
$img->compositeImage($imgdetails, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgeye = new Imagick( $path . "eye.png" );
$img->compositeImage($imgeye, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgpupil = new Imagick( $path . "pupil.png" );
$img->compositeImage($imgpupil, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgshading = new Imagick( $path . "shading.png" );
$img->compositeImage($imgshading, Imagick::COMPOSITE_MULTIPLY, 0, 0);

$imglines = new Imagick( $path . "lines.png" );
$img->compositeImage($imglines, Imagick::COMPOSITE_DEFAULT, 0, 0);

$imgwatermark = new Imagick( $path . "watermark.png" );
$img->compositeImage($imgwatermark, Imagick::COMPOSITE_DEFAULT, 0, 0);


if (!file_exists('img/pets/' . $petid . '.png'))
{
$storepath = $path . 'pets/' . $petid . '.png';
$img->writeImage($storepath);
}


header('Content-type: image/png');
echo $img;

?>


Presto! There should now be a new file called 5.png in the img/pets directory. 

Now let's update your display code so it displays either the Imagick code OR the stored image based on whether the stored image is available.
 

if (file_exists('img/pets/' . $petid . '.png'))
{
echo "<img src='/img/pets/$petid.png'>";
}
else
{
echo "<img src='img.php?petid=$petid'>";
}


If the file exists, bring up the image file for the pet. 
If the file does not exist, use Imagick to render one. 

When a pet's image is going to be changed, you can simply wipe their current image file. 
 

<?php

unlink('img/pets/' . $petid . '.png');

?>



 Then the next time the player looks at the pet, the image display code will handle things (since it's set up to check if the file exists). 

Image Manipulation Explots
If you store the files like this, you'll need to make sure players can't cheat the system to write files for their pets. This is beyond my Imagick tutorial, but just a heads up.

CACHING - Images Not Appearing 'Updated' 
Another important note is that if file names for a pet don't change even though the file was rewritten, some browsers will cache the old image, resulting in a player not seeing the changes they made to their pet. You can get around this by putting a timestamp in the image filename. The timestamp will have to be checked and updated appropriately. 
 

 

[Hare]

Added tutorials for mendelian genetics, color swapping, cutting out markings, and marking variation. 
Will add more soon.

 

[Hare]

Added sections for transparency, gradients, fractals, and storing images.
All done with the Imagick tutorials! 

 

[skellri]

This is so informative and interesting! Thank you so much for sharing these! I cant wait to try these methods out!

 

[Hare]

This is so informative and interesting! Thank you so much for sharing these! I cant wait to try these methods out!

You're welcome and I'm glad you've found it helpful!

 

[KingofCrows]

The storing images is something I struggled with and eventually gave up on (and stopped trying to use imagick) so thank you so, so much for explaining it! Awesome walk-through!

 

[Digital]

@Hare Is there a specific palette that artists should use when creating the different layers and bases? I noticed you use a tan color in some layers, any advice on that.

 

[Hare]

The storing images is something I struggled with and eventually gave up on (and stopped trying to use imagick) so thank you so, so much for explaining it! Awesome walk-through!

I had trouble with that part because of the caching issues, but managed to figure it out! I'm glad this helps, you're welcome! 

 

@Hare Is there a specific palette that artists should use when creating the different layers and bases? I noticed you use a tan color in some layers, any advice on that.

There is a specific palette for Warrenz because we use modulation a lot. Other sites may not need that if they do hex edits instead. I would pick a color that looks best on the animal for the 'standard' color and then modify it for non-standard animals. 
We chose that specific shade of brown for the file, but then we have a brightness and saturation modulator on the realistic colors.

View attachment 4270

 

[Shex]

Heya, thanks so much for the detailed tutorial!

I was wondering if there are other blending modes such as 'multiply' for imagick and if you know a source where I can learn more about them?

 

[Hare]

Heya, thanks so much for the detailed tutorial!

I was wondering if there are other blending modes such as 'multiply' for imagick and if you know a source where I can learn more about them?

Yes, there's a MULTIPLY constant you can use when you layer the images. 

$imgshadinglayer = new Imagick("shading.png" ); //this creates the new image from your PNG file
$img->compositeImage($imgshadinglayer, Imagick::COMPOSITE_MULTIPLY, 0, 0); //now layer that over your previous layer using multiply