19. September 2013
Auf heute habe ich ein primitives Malprogramm programmiert. Voraussetzung dafür waren Funktionen, Framework-Events (Mauseingabe, Tasteneingabe, Programmstart...), Bedingungen und vorausgehende Themen. Download_Paint Hier meine Paint-Version:
color hintergrund = color(225); // Hintergrund
color c1 = color(255,255,255);
color c2 = color(168,237,189);
color c3 = color(72,152,97);
color c4 = color(42,80,54);
color c5 = color(0,0,0);
color c_current = c1;
int strichstaerke = 5;
void setup()
{
size(800,600);
background(hintergrund);
smooth();
//fill(255);
//rect(60,20,width-80,height-40);
}
void draw()
{
noStroke();
fill(200);
rect(0,0,50,height);
rect(0,0,width,10);
rect(width-10,10,10,height);
rect(0,height-10,width,10);
// Farbpalette mit Zahlen
fill(c1);
rect(0,20,30,15);
fill(c2);
rect(0,40,30,15);
fill(c3);
rect(0,60,30,15);
fill(c4);
rect(0,80,30,15);
fill(c5);
rect(0,100,30,15);
fill(c_current);
rect(0,140,40,15);
textSize(15);
fill(0);
text("1", 35, 35);
text("2", 35, 55);
text("3", 35, 75);
text("4", 35, 95);
text("5", 35, 115);
strokeWeight(strichstaerke);
// Farbe wählen
if (keyPressed) {
if (key == '1') {
c_current = c1;
}
if (key == '2') {
c_current = c2;
}
if (key == '3') {
c_current = c3;
}
if (key == '4') {
c_current = c4;
}
if (key == '5') {
c_current = c5;
}
if (key == UP) { // Strichdicke verändern
strokeWeight(strichstaerke+=3);
}
if (key == DOWN) {
strokeWeight(strichstaerke-=3);
}
}
}
void mouseDragged() // wenn sich die Maus bewegt, wird gezeichnet
{
stroke(c_current);
line(pmouseX,pmouseY,mouseX,mouseY);
}
void mousePressed() // so kann man auch Punkte zeichnen (bei Mausstillstand)
{
stroke(c_current);
line(pmouseX,pmouseY,mouseX,mouseY);
}
Was jetzt noch nicht funktioniert ist das Ändern der Pinseldicke. (!!!)
Dafür ist es möglich, mit den Tasten 1 bis 5 die Farbe zu wählen. Sobald eine Farbe gewählt wurde, wird diese in der rechten oberen Ecke angezeigt.
Meine ursprüngliche Idee war, ein Mal-Programm mit Knöpfen, die man anklicken kann, um die Farbe zu wählen. Habe mich dann an folgendem File orientiert:
int Yellow;
int Red;
int Green;
int Blue;
int Grey;
int LightGrey;
color currentColor;
boolean typeIsRect;
void setup()
{
size(640,480);
background(102);
frameRate(60);
Yellow = color(255,255,0);
Red = color(255,0,0);
Green = color(0,255,0);
Blue = color(0,0,255);
Grey = color(102);
LightGrey = color(200);
currentColor = color(102);
typeIsRect = true;
}
//interface
void draw()
{
stroke(5);
smooth();
fill(LightGrey);
rect(10,10,190,70);
fill(Yellow); // die eckigen Knöpfe
rect(20,20,20,20);
fill(Red);
rect(50,20,20,20);
fill(Green);
rect(80,20,20,20);
fill(Blue);
rect(110,20,20,20);
fill(Grey);
rect(140,20,50,50); //the eraser
fill(Yellow); // die runden Knöpfe
ellipse(30,60,20,20);
fill(Red);
ellipse(60,60,20,20);
fill(Green);
ellipse(90,60,20,20);
fill(Blue);
ellipse(120,60,20,20);
// Now if the mouse is pressed, paint
if (mousePressed)
{
noStroke();
fill(currentColor);
if (typeIsRect)
{
if ((mouseX>140) && (mouseY>20) && (mouseX<190) && (mouseY<70))
{
rect(mouseX-25,mouseY-25,50,50);
}
else
{
rect(mouseX-10,mouseY-10,20,20);
}
}
else
{
ellipse(mouseX,mouseY,20,20);
}
}
}
void mousePressed()
{
//ractangles
if ((mouseX>20) && (mouseY>20) && (mouseX<40) && (mouseY<40))
{
typeIsRect = true;
currentColor = color(Yellow);
}
if ((mouseX>50) && (mouseY>20) && (mouseX<70) && (mouseY<40))
{
typeIsRect = true;
currentColor = color(Red);
}
if ((mouseX>80) && (mouseY>20) && (mouseX<100) && (mouseY<40))
{
typeIsRect = true;
currentColor = color(Green);
}
if ((mouseX>110) && (mouseY>20) && (mouseX<130) && (mouseY<40))
{
typeIsRect = true;
currentColor = color(Blue);
}
if ((mouseX>140) && (mouseY>20) && (mouseX<190) && (mouseY<70))
{
typeIsRect = true;
currentColor = color(Grey);
}
//elipses
if ((mouseX>20) && (mouseY>50) && (mouseX<40) && (mouseY<70))
{
typeIsRect = false;
currentColor = color(Yellow);
}
if ((mouseX>50) && (mouseY>50) && (mouseX<70) && (mouseY<70))
{
typeIsRect = false;
currentColor = color(Red);
}
if ((mouseX>80) && (mouseY>50) && (mouseX<100) && (mouseY<70))
{
typeIsRect = false;
currentColor = color(Green);
}
if ((mouseX>110) && (mouseY>50) && (mouseX<130) && (mouseY<70))
{
typeIsRect = false;
currentColor = color(Blue);
}
}
Ich scheiterte jedoch an dem Vorhaben und kehrte dann zurück zur Version, in der man mit den Computertasten die Farben wählt. Ich habe mir darauf sagen lassen, dass mein ersteres Vorhaben mit Guis realisierbar gewesen wäre.
Beim Arbeiten ist folgende Frage aufgetaucht - Wie kann ich die Transparenz beeinflussen bei:
color c1 = (...); ?
Antwort:
color c1 = color (255,200,150,80) - der letzte Parameter, also 80, bestimmt die Transparenz
Auch "stockt" der Strich nicht mehr, da ich anstelle von:
void mousePressed()
{
fill(c_current);
ellipse(mouseX, mouseY, strichdicke, strichdicke);
}
void mouseDragged()
{
fill(c_current);
ellipse(mouseX, mouseY, strichdicke, strichdicke);
}
... das hier geschrieben habe:
void mouseDragged()
{
stroke(c_current);
line(pmouseX, pmouseY, mouseX, mouseY);
}
Hier nochmals zwei memos:
> noLoop();
> void mousePressed() { redraw(); };
Als nächstes behandelten wir im Unterricht die Zufalls-Funktionen. Dazu habe ich ein File geschrieben, dass bei jedem Mausklick einen neuen Kreis zeichnet; mit zufälliger Füllfarbe, Strichbreite und -farbe, Position. Natürlich muss man der Zufalls-Funktion gewisse Schranken geben, falls man nicht einfach irgendetwas völlig Unkontrolliertes möchte.
</pre>
void setup()
{
size(300,300);
background(0);
noLoop();
}
void draw()
{
stroke(random(100,200));
fill(random(50,100),random(50,100),random(150,255));
strokeWeight(random(1,5));
ellipse(random(0,width),random(0,height),random(10,100),random(10,100));
}
void mousePressed()
{
redraw();
}
memo:
Sehr spannend ist die Verwendung der Zufallswerte bei der Gestaltung von Grafiken. Hier kann man die Farben mit sehr engen Schranken (nur wenige Einheiten, z.B. 5) vom Computer zufällig berechnen lassen. So wirkt nicht alles zu synthetisch.
Hier noch ein kleines amüsantes Programm zum Zeichnen mit Zufallsstrichen:
Download_Zufallszahlen