{"id":762,"date":"2014-09-23T21:12:02","date_gmt":"2014-09-24T04:12:02","guid":{"rendered":"http:\/\/www.imaginary-institute.com\/blog\/?p=762"},"modified":"2014-09-25T11:38:17","modified_gmt":"2014-09-25T18:38:17","slug":"new-in-aulibrary-field-masking","status":"publish","type":"post","link":"https:\/\/www.imaginary-institute.com\/blog\/2014\/09\/23\/new-in-aulibrary-field-masking\/","title":{"rendered":"New in AU Library: Field masking"},"content":{"rendered":"

\"maskedAUMultiField\"In the AU Library (currently in beta – see earlier posts for download links) you can store an RGB image in an object called an AUMultiField<\/code>, where you can do lots of things to do it, including drawing it on the screen.<\/p>\n

Now you can also draw it using a mask<\/strong>. Create any AUField<\/code> with shades of gray, and tell the library to use this as a mask when you draw your picture. Values of the mask from 0 to 1 control the opacity of the corresponding pixels, from fully transparent to fully opaque. In other words, the mask is an alpha layer<\/em>, but it’s better than Processing’s built-in alpha because the values are stored in floats, giving them much more range and precision. The layer is also separate from the pixels, making it easier and faster to modify.
\n<\/p>\n

The code is easy. When you call RGBtoPixels()<\/code> to draw your AUMultiField<\/code> object, just include another AUField<\/code> argument, and that will be the mask. You can also mask a plain AUField<\/code> object, and you can apply the mask when drawing either kind of object to an offscreen PGraphics<\/code> buffer if you like. The new documentation gives the details.<\/p>\n

Here’s the code for the image above. The mask is a white triangle and a 50% gray thick Bezier curve. There’s no draw()<\/code> because in this simple example we’re just drawing one image. The cloud and fire images came from www.freeimages.com<\/a>.<\/p>\n

import AULibrary.*;\r\n\r\nvoid setup() {\r\n  \/\/ import images (both saved 375 wide by 500 high) \r\n  PImage fireImage = loadImage(\"freeimages-1093986.jpg\");\r\n  PImage cloudsImage = loadImage(\"freeimages-1444573.jpg\");\r\n  \r\n  size(fireImage.width, fireImage.height);\r\n  \r\n  \/\/ save the color fire image into fireField\r\n  image(fireImage, 0, 0);\r\n  AUMultiField fireField = new AUMultiField(this, 3, width, height);\r\n  fireField.RGBfromPixels(AUMultiField.FIELD_REPLACE, 1.);\r\n  \r\n  \/\/ draw a fun mask in shades of gray. White=fire, Black=clouds\r\n  background(0);                \/\/ black background\r\n  fill(255);                    \/\/ fill with white\r\n  triangle(50, 150, 200, 300, 250, 50);  \/\/ draw triangle\r\n  noFill();                     \/\/ don't fill\r\n  stroke(128);                  \/\/ only half bright\r\n  strokeWeight(50);             \/\/ draw a big fat stroke\r\n  bezier(50, 425, 100, 225, 300, 625, 325, 275);  \/\/ a little curve\r\n  \r\n  \/\/ save this grayscale image with values scaled to (0,1)\r\n  AUField mask = new AUField(this, width, height);\r\n  mask.fromPixels(AUField.FIELD_LUM, AUField.FIELD_REPLACE, 1\/255.);\r\n\r\n  image(cloudsImage, 0, 0);           \/\/ draw the clouds\r\n  fireField.RGBtoPixels(0, 0, mask);  \/\/ draw the fire through the mask\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
In the AU Library (currently in beta – see earlier posts for download links) you can store an RGB image in an object called an AUMultiField, where you can do lots of things to do it, including drawing it on the screen. Now you can also draw it using a mask. Create any AUField with […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-762","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/posts\/762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/comments?post=762"}],"version-history":[{"count":11,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/posts\/762\/revisions"}],"predecessor-version":[{"id":776,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/posts\/762\/revisions\/776"}],"wp:attachment":[{"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/media?parent=762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/categories?post=762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.imaginary-institute.com\/blog\/wp-json\/wp\/v2\/tags?post=762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}