213
edits
IFD:All Hail The Pixels/ProcessingSketches (view source)
Revision as of 09:22, 2 December 2014
, 2 December 2014→28.11.2014 Processing sketches
| (6 intermediate revisions by the same user not shown) | |||
| Line 294: | Line 294: | ||
<source | <source lang="java"> | ||
/* | /* | ||
| Line 338: | Line 338: | ||
</source> | </source> | ||
<br /><br /> | <br /><br /> | ||
=== P07 Array Layout === | === P07 Array Layout === | ||
<source | <source lang="java"> | ||
/* | /* | ||
| Line 403: | Line 401: | ||
<br /><br /> | <br /><br /> | ||
=== P08 Grid By Image === | |||
Make sure you have the [[Media:layout_pixels_example.png]] file in the data folder of the sketch! | |||
<source | <source lang="java"> | ||
| Line 418: | Line 417: | ||
are used to modify the grid layout. | are used to modify the grid layout. | ||
NOTICE: Make sure the image " | NOTICE: Make sure the image "layout_pixels_example.png" is placed in the "data" folder of | ||
this sketch! | this sketch! | ||
| Line 437: | Line 436: | ||
// Load the actual image file from the data folder and | // Load the actual image file from the data folder and | ||
// assign it to the img variable | // assign it to the img variable | ||
img = loadImage(" | img = loadImage("layout_pixels_example.png"); | ||
// How many pixels did we load? | // How many pixels did we load? | ||
| Line 468: | Line 467: | ||
} | } | ||
} | } | ||
} | |||
</source> | |||
<br /><br /> | |||
== 28.11.2014 Processing sketches == | |||
=== P09 Interval timer === | |||
Make sure you have the files [[Media:interval_pixels_example_A.png]], [[Media:interval_pixels_example_B.png]] and [[Media:interval_pixels_example_C.png]] in the data folder of the sketch! | |||
<source lang="java"> | |||
/* | |||
P09 Interval timer | |||
A refinement of the "Grid by image" example with multiple changing | |||
images. The millis() function is utilized to create an interval | |||
timer which changes the actual image from the image sequence stored | |||
in an array. The mouse x position changes the size of the grid dynamically. | |||
Therefor the map() function is used to scale the range of the screen | |||
width to the desired range for controlling the grid size. | |||
*/ | |||
float gridSize = 10; | |||
// Array of images (of type PImage) with the size | |||
// of 3 is initializied | |||
PImage[] images = new PImage[3]; | |||
// Counter for the current index of the image sequence | |||
int imageCounter = 0; | |||
// Variable to define the timer interval in milliseconds | |||
int timerInterval = 400; | |||
// Helper variable to store the last time the interval time has passed | |||
int lastMillis = 0; | |||
void setup() { | |||
size(1000, 600); | |||
// Assign individual images from the data folder | |||
// to the array positions | |||
images[0] = loadImage("interval_pixels_example_A.png"); | |||
images[1] = loadImage("interval_pixels_example_B.png"); | |||
images[2] = loadImage("interval_pixels_example_C.png"); | |||
} | |||
void draw() { | |||
background(0); | |||
// The millis() function returns the number of milliseconds | |||
// (thousandths of a second) since starting the program. | |||
// When lastMillis is substracted from millis(), we get the | |||
// milliseconds which have been past since the last timer execution. | |||
if( millis() - lastMillis > timerInterval ){ | |||
// Now count up the imageCounter by 1 | |||
imageCounter++; | |||
// Make sure it stays within the bounds of the images array | |||
imageCounter = imageCounter % images.length; | |||
// It is important to set lastMillis to the actual number | |||
// of milliseconds, otherwise the if condition does not | |||
// work repetitively. | |||
lastMillis = millis(); | |||
} | |||
// Helper variable to store the actual image from the array. | |||
PImage currentImg = images[imageCounter]; | |||
// Only show the background image when a keyboard key is pressed | |||
if(keyPressed){ | |||
image(currentImg, 0, 0); | |||
} | |||
// Dynamically scale the gridSize according to the mouse | |||
// x position | |||
gridSize = map(mouseX, 0, width, 5, 30); | |||
// Loop through the columns and rows of the grid | |||
// as in the previous example | |||
for (int x=0; x < width; x+= gridSize) { | |||
for (int y=0; y < height; y+= gridSize) { | |||
color c = currentImg.get(x, y); | |||
if (brightness(c) < 255 ) { | |||
ellipse(x, y, 5, 5); | |||
} | |||
} | |||
} | |||
} | |||
</source> | |||
<br /><br /> | |||
=== P10 Linear movement and direction === | |||
<source lang="java"> | |||
/* | |||
P10 Linear movement and direction | |||
The famous "bouncing ball"illustrates how steady movement | |||
is achived by adding a constant number (speed) to the actual | |||
position of an ellipse. The horizontal or vertical direction | |||
is changed when the ellipse hits an edge of the sketch window. | |||
*/ | |||
float rad = 60.0; | |||
float xpos, ypos; | |||
float xspeed = 2.8; | |||
float yspeed = 2.2; | |||
int xdirection = 1; | |||
int ydirection = 1; | |||
void setup() | |||
{ | |||
size(640, 360); | |||
noStroke(); | |||
frameRate(30); | |||
ellipseMode(RADIUS); | |||
xpos = width/2; | |||
ypos = height/2; | |||
} | |||
void draw() | |||
{ | |||
background(102); | |||
xpos = xpos + ( xspeed * xdirection ); | |||
ypos = ypos + ( yspeed * ydirection ); | |||
if (xpos > width-rad || xpos < rad) { | |||
xdirection *= -1; | |||
} | |||
if (ypos > height-rad || ypos < rad) { | |||
ydirection *= -1; | |||
} | |||
ellipse(xpos, ypos, rad, rad); | |||
} | |||
</source> | |||
<br /><br /> | |||
=== P11 Polar dots === | |||
<source lang="java"> | |||
/* | |||
P11 Polar dots | |||
Illustrates how circular shapes and movements are created by using | |||
polar coordinates (angle and radius) and how to convert these to cartesian | |||
coordinates (x and y) by using sine and cosine functions (sin() and cos()). | |||
*/ | |||
// Radius | |||
float r; | |||
// Radius offset | |||
float rOffset = 1.0; | |||
// Angle and speed | |||
float angle = 0.0; | |||
float angleSpeed = 0.02; | |||
void setup() { | |||
size(1000, 600); | |||
ellipseMode(CENTER); | |||
// Set r according to the sketch height | |||
r = height * 0.25; | |||
background(255); | |||
} | |||
void draw() { | |||
// Dynamically scale the radius with the mouse x position | |||
rOffset = map(mouseX, 0, width, 0.0, 1.5); | |||
// Draw a semi-transparent rectangle across the whole window | |||
// to let the backround smoothly fade out. | |||
fill(255,10); | |||
rect(0,0,width,height); | |||
// Move to the center | |||
translate(width/2, height/2); | |||
// Convert polar to cartesian coordinates | |||
// and scale the actual radius | |||
float x = (r * rOffset) * cos(angle); | |||
float y = (r * rOffset) * sin(angle); | |||
// Draw the moving red ellipse to the actual position | |||
noStroke(); | |||
fill(200,0,0); | |||
ellipse(x, y, 17, 17); | |||
// Draw the steady circle | |||
stroke(0,10); | |||
noFill(); | |||
ellipse(0,0,r*2,r*2); | |||
// Increase the current value of angle by the value of angleSpeed | |||
angle += angleSpeed; | |||
} | } | ||
</source> | </source> | ||
<br /><br /> | <br /><br /> | ||