lundi 18 juillet 2011

Rotating an image in Processing

Just taking the basic example LoadDisplayImage and letting the images rotate independent of each other:

http://www.contrechoc.com/crosslab/applet/rotateDisplayImage.html



PImage a; // Declare variable "a" of type PImage
float theta = 0;//rotating angle in degrees
void setup() {
size(200, 200);
a = loadImage("jelly.jpg"); // Load the image into the program
}
void draw() {
// Displays the image at its actual size at point (0,0)
pushMatrix();//used to get an independent rotation
translate(width/2, height/2);
rotate(radians(theta));
translate(-a.width/2, -a.height/2);
image(a, 0, 0);
popMatrix();//sort of boundaries for a rotation translation
pushMatrix();//start another rotation
translate(width/4, height/4);
rotate(radians(-2*theta));
translate(-a.width/4, -a.height/4);
image(a, 0, 0, a.width/2, a.height/2);
popMatrix();//
theta+=1;
}

samedi 18 juin 2011

Playing with text() and pixels

 Two excellent examples using text, the first takes a picture and a text on top, and makes the letters bigger where the picture is brigther, a fine start for more experiments:

http://www.learningprocessing.com/exercises/chapter-17/exercise-17-7/

The second example is using textWidth:

x += textWidth(message.charAt(i));


So you can get the pixelNumber where your letter starts. In this way you can use letters of different sizes in the same bit of text.

jeudi 16 juin 2011

Input textfield, sliders, buttons etc

Well for these fancy objects, which are not easy to program from scratch, you can use this library:

http://www.sojamo.de/libraries/controlP5/

Example code:

http://www.openprocessing.org/visuals/?visualID=20726

as usual download the library, unzip, and pu this folder in the folder libraries inside the Processing folder with your sketches. In this folder there are lots of examples, buttons sliders....

mardi 14 juin 2011

Searching......

Just a few downloads to wonder about all the data floating around....

http://www.contrechoc.com/crosslab/dataBaseStuff.zip

with and extra example adding to the last post ( database_patterns_6.pde )



with examples searching the NYT, Google and Twitter

for the nyt API you need your own key, and insert it into this line:
TimesEngine.init(this,"get your own API key"); // http://developer.nytimes.com/
this line of code becomes something like:

TimesEngine.init(this,"87238269346827638476283764827638476287364872638576"); //fake key!

as indicated in the script, you can get your key here: http://developer.nytimes.com/

also, the right libraries are added (JSON). You have to put these libraries in the folder libraries inside the Processing folder containing your sketches.

And then a few links:


http://searchenginewatch.com/article/2066257/What-People-Search-For-Most-Popular-Keywords

Or search for: youtube professor Hans Rosling.....
http://www.youtube.com/watch?v=YpKbO6O3O3M&feature=relmfu

http://lowfrequency.org/interactivity/wiki/index.php?title=Google_API_In_Processing


The google Image API is also not too difficult and can be exciting for designers:
http://lowfrequency.org/interactivity/wiki/index.php?title=GoogleJSONSearchDrawImage
You need the JSON library, but when you have the nyt examples (above) running, this library is included.

This link gives an example with 1 image, but displaying 4 images can be done like this:

in the declarations, instead of one image take an array

PImage myImg[] = new PImage[4];


in setup() load for images:

for(int i=0; i<4 ; i++){ myResult = getFirstSearchResult("bullet cluster",i); PImage getImage = new PImage(); getImage = loadImage(myResult); println( "------------>"+ str(i) + " " + myResult );
myImg[i] = getImage;
}


this to add in the draw:


for(int i=0; i<2 ; i++) for(int j=0; j<2 ; j++){ iCounter++; image(myImg[iCounter], i*width/2, j*height/2, width/2, height/2); }


and this works with a minor change in the function:

String getFirstSearchResult(String query, int imageNumber)
{


this leaves one line in this function to get more than result one:


URL url = new URL(baseURL + "?start="+str(imageNumber)+"&rsz=large&v=1.0&q=" + query);


You can find this script in this download:

http://www.contrechoc.com/crosslab/dataBaseStuff.zip

four images of the search for "bullet cluster"




















All about the Google API's can be found here:
http://code.google.com/apis/maps/index.html

jeudi 9 juin 2011

A few Processing Examples

Here you can find some simple examples: http://www.contrechoc.com/crosslab/databaseSamples.zip
have fun!

Basically these examples build from simple text on a screen, color changing, to text and image, interactively displayed (on mouseDrag and mousePressed);




lundi 23 mai 2011

Making and using a simple Object

Although you can do a lot of nice things just programming around (called "knitting") sometimes you meet things like objects and classes.
Some basic knowledge of Object Orientated ( "OO" ) programming may be useful.
In this post I present a simple example of a class, with which you can make objects.
A class is a black box. With this black box you can produce your own "things", for instance records of a name and an amount of payment.
So we have a name, "Beam" and we have a payment "1.75". In a so called constructor these are tied together. Later on we can get these data out again.

A class can save these data, but can also have functions. Like the data, these functions are also tailor made.
In your main sketch you can make the TestClass object like this:
TestClass record = new TestClass( "Beam", 1.75 );


In the class the format of the parameters must be specified, like String and float.
A whole bunch of records can be made like this:
TestClass[] namePayArray = new TestClass[20];


but these are empty objects at the moment, you can fill these objects using a for loop:

for (int i = 0; i<20 ; i++)


//making an object:
TestClass newtest = new TestClass("Beam" + str(i) , 2.5 + random(10) ); 
//putting this object in an array:
namePayArray[i] = newtest; 
}

First we make an object, then we fill in the object in the array.

The Processing example can be found here:
http://www.contrechoc.com/crosslab/objectExample.zip
The results are printed in the debug window.

An example of a useful object is the timer, a few post ago:
http://flashscriptingwonders.blogspot.com/2011/05/timer-considerations.html

Then a more elaborate class example is this interesting circle script from a few blog posts ago:
http://flashscriptingwonders.blogspot.com/2011/04/circle-packing-scripts.html


Here we already use the circle class.
The question is....what to do when you want to see more hives (circle packings) at different positions?
So the whole script of the circlepacking is placed in a different class, (and for convenience in a different tab).
What is left is a simple main sketch with the constructor of the Hive's and the draw and the mousePressed (etc) functions:

Hive testme1;
Hive testme2 ;
Hive[] hiveArray = new Hive[20]; //the array is filled with "empty" objects


void setup(){
size(1000,1000);
testme1 = new Hive(250,250);
testme2 = new Hive(550,550);


for (int i = 0; i<20 ; i++){ 

Hive newtest = new Hive( int( 50 + random(1000)) , int(50 + random(1000)) ); hiveArray[i] = newtest; }
}


void draw(){
background( 255 );


testme1.draw();
testme2.draw();


for (int i = 0; i<20 ; i++){ 

hiveArray[i].draw(); 
}
}


void mousePressed() {
for (int i = 0; i<20 ; i++){ hiveArray[i].myMousePressed(); } }


void mouseDragged() {
for (int i = 0; i<20 ; i++){ hiveArray[i].myMouseDragged(); } }


void mouseReleased() {
for (int i = 0; i<20 ; i++){ hiveArray[i].myMouseReleased(); } }



You can find the sketch here: http://www.contrechoc.com/crosslab/hiveCircleClassExample.zip

lundi 16 mai 2011

Using a PVector making a field

A vector is a point with a property of an added direction. In short: an arrow.
Nice drawings can be made using arrows over the whole plane. But doing this by hand is tedious. So we do it by code.
In Processing the thing to look at is a PVector.

There is a nice tutorial about PVectors:
http://processing.org/learning/pvector/

Vector on a plane (or in space) - when the vectors are ordered, that is vary in a "physical" way - form a so called vector field. The vectors are like hair being combed.

One way to imagine a vector field is to think of magnets, the field lines, so beautifully made visible by iron dust:
http://www.openprocessing.org/visuals/?visualID=21418

Another way is to look at fluids, waves:
http://www.openprocessing.org/visuals/?visualID=12569

This is also a nice example:
http://www.openprocessing.org/visuals/?visualID=6707

Or look at this one:
http://www.openprocessing.org/visuals/?visualID=27653

With color:
http://www.openprocessing.org/visuals/?visualID=1036

search on keyword "field" in OpenProcessing.org