---

layout: default

---

<h3>CreateImage</h3>

<p>The createImage() function provides a fresh buffer of pixels to play with.

This example creates an image gradient.</p>

<p><a href="http://processing.org/learning/basics/createimage.html">Original Processing.org Example: CreateImage</a><br>

<div class="learning-demo"><script type="application/processing">

PImage img;

void setup()

size(200, 200);

img = createImage(120, 120, RGB);

for(int i=0; i < img.pixels.length; i++) {

img.pixels[i] = color(0, 90, 102, i%img.width * 2);

}

void draw()

background(204);

image(img, 33, 33);

image(img, mouseX-60, mouseY-60);

</script><canvas width="200" height="200"></canvas></div></p>

<div style="height:0px;width:0px;overflow:hidden;"><img src='data/mask.jpg' id='mask.jpg'/><img src='data/test.jpg' id='test.jpg'/></div>

<div class="code"><pre name="code" class="processing">// All Examples Written by Casey Reas</a> and Ben Fry</a>

// unless otherwise stated.

PImage img;

void setup()

{

size(200, 200);

img = createImage(120, 120, RGB);

for(int i=0; i &lt; img.pixels.length; i++) {

img.pixels[i] = color(0, 90, 102, i%img.width * 2);

}

}

void draw()

{

background(204);

image(img, 33, 33);

image(img, mouseX-60, mouseY-60);

}</pre></div>