Built with processing
Simple Slide Show
Eine ganz einfache schlichte Slide-Show-App für alle Fälle.
Status
- Computer App – läuft
- Web App - läuft
- Android App – in Arbeit
- Automatisches Auslesen von Ordnern mit original Dateiname - in Arbeit - Tipp
- Beispiel [1]
<source lang="java">
// simple_slide_show.pde // www.olafval.de
int iMax = 112; // Number of the last image in the images folder int sSpeed = 4000; // slide show speed - time of each slide in milis
PImage i; int iN=101; // current image number String iNS; int sTimer;
void setup(){
size(640, 640);
i = requestImage("images/101.jpg"); // <-- use full path relativ from web-page (not relativ to processing-file)
}
void draw(){
image(i,0,0);
//load next image
if(sTimer + sSpeed < millis() ){
sTimer = millis();
iN = iN + 1;
if(iN > iMax) iN = 101;
iNS = new String(iN); // <-- use this als online app
i = loadImage("images/" + iNS + ".jpg"); // <-- use this als online app -- and use full path relativ from web-page
// i = loadImage("images/" + String.valueOf(iN) + ".jpg"); // <-- use this als offline app
}
}
</source>
Einbinden in Web-Seite:
- die Datei "processing-1.1.0.min.js" muss in den gleichen Ordner kopiert werden.
- Download Link: processingjs.org
<source lang="html4strict"> <head>
<title>ProcessingTest1</title> <script src="processing-1.1.0.min.js"></script>
</head>
<body>
<canvas data-processing-sources="simple_slide_show.pde"></canvas>
</body> </source>
Color ABC
Mit dier App kann man jedem Buchstaben des Alphabets eine Farbe zuordnen und Texte dann mit diesem Farbe-Code anzeigen bzw. lesen.
Status
- Farbzuordnung funktioniert
- Textanzeige ist noch nicht implementiert
- Läuft nur als App auf dem Computer nicht im Web oder auf Android
<source lang = "java"> // color_abc.pde
PFont meineSchrift; PImage farben;
int fontSize = 50; int pos = 0;
char abc1[] = {
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'
}; char abc2[] = {
'M', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
};
color[] col1 = new color[26]; int modus = 0; // 0=calect letter, 1=select color, 2=display text int mause = 0; // mouse releast int nummer = 0; // letter number
void setup() {
size(800, 480); //size(480, 800);
meineSchrift = loadFont("AUdimat-Regular-48.vlw");
// basic color black
for (int f=0; f<26; f++) {
col1[f] = color(0);
}
farben = requestImage("data/colors.jpg");
}
void draw() {
if (modus == 0) { // select letter
background(255);
fill(0); textFont(meineSchrift, fontSize);
// A - M
pos = 0;
for (int f=0; f<13; f++) {
pos += width / 15;
fill(col1[f]);
text(abc1[f], pos, height/2 - fontSize);
// hitbox
if (mousePressed == true) {
if ( (mouseX>pos)&&(mouseX<pos+width/15)&&(mouseY>height/2 - (fontSize*2) )&&(mouseY<height/2 - fontSize) ) {
nummer = f;
if (mause == 0) {
modus = 1;
mause = 1;
}
}
}
}
// N - Z
pos = 0;
for (int f=0; f<13; f++) {
pos += width / 15;
fill(col1[f+13]);
text(abc2[f], pos, height/2 + fontSize);
// hitbox
if (mousePressed == true) {
if ( (mouseX>pos)&&(mouseX<pos+width/15)&&(mouseY<height/2 + fontSize )&&(mouseY>height/2) ) {
nummer = f+13;
if (mause == 0) {
modus = 1;
mause = 1;
}
}
}
}
}
// zeige Farben
if (modus == 1) { // select color
image(farben, 0, 0, width, height);
if ( (mousePressed == true) && (mause == 0) ) {
col1[nummer] = get(mouseX, mouseY);
modus = 0;
mause = 1;
}
}
if (mousePressed == false) {
mause = 0;
}
} </source>
Calculating the angle between two points in degrees with Processing
<source lang = "java"> /*
* Angle function by Joseph Snow * * Calculates the angle from centerPt to targetPt in degrees. * The return should range from [0,360), rotating CLOCKWISE, * 0 and 360 degrees represents NORTH, * 90 degrees represents EAST, etc... * * Assumes all points are in the same coordinate space. If they are not, * you will need to call SwingUtilities.convertPointToScreen or equivalent * on all arguments before passing them to this function. * * @param centerPt Point we are rotating around. * @param targetPt Point we want to calcuate the angle to. * @return angle in degrees. This is the angle from centerPt to targetPt. */
// Center ponit int cX = 50; int cY = 50;
// Target point int tX; int tY;
double a; String b;
void setup(){
}
void draw(){
background(100); // draw center point ellipse(cX, cY, 10,10); // draw target point tX = mouseX; tY = mouseY; ellipse(tX, tY, 10,10); // get angle as double a = calcRotationAngleInDegrees(cX, cY, tX, tY); //convert double to string b = String.valueOf(a); // show angel value text(b, 5,20);
}
double calcRotationAngleInDegrees(int cX, int cY, int tX, int tY)
{
// calculate the angle theta from the deltaY and deltaX values // (atan2 returns radians values from [-PI,PI]) // 0 currently points EAST. // NOTE: By preserving Y and X param order to atan2, we are expecting // a CLOCKWISE angle direction. double theta = Math.atan2(tY - cY, tX - cX);
// rotate the theta angle clockwise by 90 degrees // (this makes 0 point NORTH) // NOTE: adding to an angle rotates it clockwise. // subtracting would rotate it counter-clockwise theta += Math.PI/2.0;
// convert from radians to degrees // this will give you an angle from [0->270],[-180,0] double angle = Math.toDegrees(theta);
// convert to positive range [0-360)
// since we want to prevent negative angles, adjust them now.
// we can assume that atan2 will not return a negative value
// greater than one partial rotation
if (angle < 0) {
angle += 360;
}
return angle;
} </source>
