This site requires JavaScript, please enable it in your browser!
Greenfoot back
Twitter Twitter.hover
IT-Wombat
IT-Wombat wrote ...

2019/4/28

Game works on local pc but not online

IT-Wombat IT-Wombat

2019/4/28

#
I shared my "Click & dragge your picture!" application https://www.greenfoot.org/scenarios/23761 On my local pc the circle blinks when the pen is up. Too bad it does not work online. When I press "c" for color-change the image appears but when I click on the image it doesn't disappear. This function works also on my local pc.
IT-Wombat IT-Wombat

2019/4/28

#
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
import lang.stride.*;
import java.util.*;
import greenfoot.*;
import java.io.*;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
 
/**
 * A pen is a circle. You can draw with the circle by clicking and dragging. Rezise or change color.
 */
public class Pen extends Actor
{
    private ColorPickerActor colorPickerActor =  new  ColorPickerActor();
    /* Saves the color that is picked when you press the key "c" and click on a color. Start color Yellow.*/
    private Color colorPicked = Color.YELLOW;
    private boolean penDown = false;
    /* Indicates if you are chose a color in the moment or not.*/
    private boolean colorPickerOn = false;
    /* Pen: start size*/
    private double sizeX = 40;
    private double sizeY = 40;
    private int posX;
    private int posY;
    /* variable for penBlinksBrighterDarker() loop */
    private int n;
 
    /**
     * Act - tut, was auch immer MousePensel tun will. Diese Methode wird aufgerufen, sobald der 'Act' oder 'Run' Button in der Umgebung angeklickt werden.
     */
    public void act()
    {
        MouseInfo mouseInfo = Greenfoot.getMouseInfo();
        /* Blinking indicates the status of the pen. Blicking means penDown, you can draw.*/
        if (penDown == false) {
            penBlinksBrighterDarker();
        }
        if (Greenfoot.isKeyDown("c") || colorPickerOn) {
            pickColor();
        }
        if (Greenfoot.isKeyDown("-") || Greenfoot.isKeyDown("+")) {
            resizePen();
        }
        if ( ! colorPickerOn) {
            /* Change the penDown-boolean by double-clicking.*/
            if (Greenfoot.mouseClicked(this) && mouseInfo.getClickCount() == 2) {
                if (penDown == false) {
                    penDown = true;
                    setPen(sizeX, sizeY, "oval", colorPicked);
                    n = 0;
                }
                else {
                    penDown = false;
                }
            }
            /* Draw one circle by one click.*/
            if (Greenfoot.mouseClicked(this) && penDown == true) {
                getWorld().getBackground().setColor(colorPicked);
                getWorld().getBackground().fillOval(getMouseX() - (int)sizeX / 2, getMouseY() - (int)sizeY / 2, (int)sizeX, (int)sizeY);
            }
            if (Greenfoot.mouseDragged(this)) {
                drawCircleORchangeLocation();
            }
        }
        if (Greenfoot.isKeyDown("p")) {
            saveScreenshot();
        }
    }
 
    /**
     * Makes the pen-circle blinks.
     */
    public void penBlinksBrighterDarker()
    {
        n = n + 1;
        if (n % 7 == 0 && n % 3 == 0) {
            setPen(sizeX, sizeY, "oval", colorPicked.brighter());
        }
        else if (n % 5 == 0 && n % 4 == 0) {
            setPen(sizeX, sizeY, "oval", colorPicked.darker());
        }
    }
 
    /**
     * A image appears where you can select a color by mouseclick.
     */
    public void pickColor()
    {
        if (Greenfoot.isKeyDown("c")) {
            GreenfootImage colorPicker =  new  GreenfootImage("colorPicker.png");
            colorPickerActor.setImage(colorPicker);
            getWorld().addObject(colorPickerActor, getWorld().getWidth() / 2, getWorld().getHeight() / 2);
            colorPickerOn = true;
        }
        if (Greenfoot.mouseClicked(colorPickerActor)) {
            MouseInfo mouse = Greenfoot.getMouseInfo();
            colorPicked = colorPickerActor.getImage().getColorAt(mouse.getX() - (getWorld().getWidth() - 548) / 2, mouse.getY() - (getWorld().getHeight() - 372) / 2);
            setPen(sizeX, sizeY, "oval", colorPicked);
            colorPickerOn = false;
            getWorld().removeObject(colorPickerActor);
        }
    }
 
    /**
     * check Key. and change pencil size
     */
    public void resizePen()
    {
        int xPos = getX();
        int yPos = getY();
        if (Greenfoot.isKeyDown("-") && sizeX > 2 && sizeY > 2) {
            sizeX = sizeX - 1;
            sizeY = sizeY - 1;
        }
        if (Greenfoot.isKeyDown("+") && sizeX > 2 && sizeY > 2) {
            sizeX = sizeX + 1;
            sizeY = sizeY + 1;
        }
        setLocation(xPos, yPos);
        this.setPen(sizeX, sizeY, "oval", colorPicked);
    }
 
    /**
     * Set the image and size of pen.
     */
    public void setPen(double sizeX, double sizeY, String shape, Color color)
    {
        GreenfootImage penImage =  new  GreenfootImage((int)sizeX, (int)sizeY);
        penImage.setColor(color);
        penImage.fillOval(0, 0, (int)sizeX, (int)sizeY);
        penImage.setColor(Color.BLACK);
        penImage.drawOval(0, 0, (int)sizeX, (int)sizeY);
        setImage(penImage);
    }
 
    /**
     * Draw a circle or set the location to mouse-position
     */
    public void drawCircleORchangeLocation()
    {
        if (Greenfoot.mouseDragged(this) && penDown == true) {
            setLocation(getMouseX(), getMouseY());
            getWorld().getBackground().setColor(colorPicked);
            getWorld().getBackground().fillOval(getMouseX() - (int)sizeX / 2, getMouseY() - (int)sizeY / 2, (int)sizeX, (int)sizeY);
            setPen(sizeX, sizeY, "oval", colorPicked);
        }
        if (Greenfoot.mouseDragged(this) && penDown == false) {
            setLocation(getMouseX(), getMouseY());
            setPen(sizeX, sizeY, "oval", colorPicked);
        }
    }
 
    /**
     *
     */
    public int getMouseX()
    {
        return Greenfoot.getMouseInfo().getX();
    }
 
    /**
     *
     */
    public int getMouseY()
    {
        return Greenfoot.getMouseInfo().getY();
    }
 
    /**
     * Saves the background as png. Ask for the storage path and filename.
     */
    public void saveScreenshot()
    {
        GreenfootImage main =  new  GreenfootImage(getWorld().getBackground());
        try {
            BufferedImage bi = main.getAwtImage();
            File outputfile =  new  File(Greenfoot.ask("Enter a storage path.") + Greenfoot.ask("Enter a filename for your screenshot. "));
            ImageIO.write(bi, "png", outputfile);
        }
        catch (IOException e) {
            System.out.println("File output failed");
        }
    }
}
IT-Wombat IT-Wombat

2019/4/28

#
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import lang.stride.*;
import java.util.*;
import greenfoot.*;
 
/**
 *
 */
public class MyWorld extends World
{
    private GreenfootImage background;
 
    /**
     * Konstruktor für Objekte der Klasse MyWorld.
     */
    public MyWorld()
    {
        super(1080, 620, 1);
        prepare();
    }
 
    /**
     *
     */
    public void prepare()
    {
        /* add a yellow pen to the world*/
        Pen pen =  new  Pen();
        GreenfootImage penImage =  new  GreenfootImage(80, 80);
        penImage.setColor(Color.YELLOW);
        penImage.fillOval(getWidth() / 2, getHeight() / 2, 40, 40);
        penImage.setColor(Color.BLACK);
        penImage.drawOval(getWidth() / 2, getHeight() / 2, 40, 40);
        pen.setImage(penImage);
        addObject(pen, getWidth() / 2 + 20, getHeight() / 2 + 20);
        /* set black background*/
        background =  new  GreenfootImage(1080, 620);
        background.fill();
        setBackground(background);
    }
 
    /**
     *
     */
    public void act()
    {
        /* key "w" change background to white, key "b" change background to black*/
        if (Greenfoot.isKeyDown("w")) {
            background.setColor(Color.WHITE);
            background.fill();
            setBackground(background);
        }
        if (Greenfoot.isKeyDown("b")) {
            background.setColor(Color.BLACK);
            background.fill();
            setBackground(background);
        }
    }
}
danpost danpost

2019/4/28

#
One problem I see is that lines 29 to 32 in the MyWorld class do nothing for your pen image. You are drawing and filling way outside the bounds of the image as getWidth and getHeight are that of your World object, not the image. Not sure why you would use double values for the sizeX and sizeY of the Pen object, or why you need both fields when they will always be equal to each other. A simple:
?
1
private int size = 40;
would suffice. The online problem is probably due to your use of the java.awt package, as it does not get along well with HTML-5. Lines 75 and 78 in your Pen class could be simplified to:
?
1
2
3
if (n%21 == 0) // 7*3 = 21 (line 75
// and
if (n%20 == 0) // 5*4 = 20 (line 78)
however, I do not get why you would have the changes oppose each other at different intervals. Also, instead of brighter and darker colors, I would suggest just changing the transparency of the image. That would allow you to reduce the code as well:
?
1
if (n%20 == 0) getImage().setTransparency(255-128*((n%40)/20));
The pen resizing should probably be regulated by a timer by placing a delay timer on it. With lines 144 and 148 in your Pen class, no state of the pen has been changed, so these lines are not needed. Then, with lines 141 and 147, instead of doing them individually in each if branch, just do it before the first if statement. Now there is nothing to do in the second one and it can be removed.
IT-Wombat IT-Wombat

2019/4/28

#
Thanks a lot for your answer. The java.awt package is not the problem. I just updatet it without it (I used it only for the screenshot function). The other changes i will try the next days.
nccb nccb

2019/4/29

#
I think this may be a bug in our online Javascript code for GreenfootImage. Out of interest, could you try the following work-around? After line 89 in the above, where you create the GreenfootImage colorPicker, try adding the line:
?
1
colorPicker.fillRect(0, 0, 0, 0);
This shouldn't modify the image, but if my theory is correct, it will perform the necessary internal initialisation for getColorAt to later work.
IT-Wombat IT-Wombat

2019/4/29

#
Great, after inserting this line the colorPicker is working.
IT-Wombat IT-Wombat

2019/4/29

#
danpost wrote...
Also, instead of brighter and darker colors, I would suggest just changing the transparency of the image. That would allow you to reduce the code as well: ? 1
?
1
if (n%20 == 0) getImage().setTransparency(255-128*((n%40)/20));
Transparency doesn't work ... when the pen is on a yellow background and the picked color is yellow you can't see the changed transparency. I changed the other things you mentioned but the code for blinking only works on my local PC. Hmm... Blinking Code: public void penBlinksBrighterDarker()
?
1
2
3
4
5
6
7
8
9
{
    n = n + 1;
    if (n % 21 == 0) {
        setPen((int)size, "oval", colorPicked.brighter());
    }
    else if (n % 30 == 0) {
        setPen((int)size, "oval", colorPicked.darker());
    }
}
The setPen code:
?
1
2
3
4
5
6
7
8
9
10
11
12
/**
     * Set the image and size of pen.
     */
    public void setPen(int size, String shape, Color color)
    {
        GreenfootImage penImage =  new  GreenfootImage(size, size);
        penImage.setColor(color);
        penImage.fillOval(0, 0, size, size);
        penImage.setColor(Color.BLACK);
        penImage.drawOval(0, 0, size, size);
        setImage(penImage);
    }
thanks for the hint with the delay function, i changed the part to:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public void resizePen()
{
    double strengthOfChange = 0.007;
    int delayControl = 0;
    while (Greenfoot.isKeyDown("+") || Greenfoot.isKeyDown("-")) {
        if (Greenfoot.isKeyDown("-") && size > 2) {
            size = size - size * strengthOfChange;
        }
        if (Greenfoot.isKeyDown("+") && size < 1.5 * getWorld().getWidth()) {
            size = size + size * strengthOfChange;
        }
        setPen((int)size, "oval", colorPicked);
        if (delayControl % 5 == 0) {
            Greenfoot.delay(1);
        }
        delayControl = delayControl + 1;
    }
}
danpost danpost

2019/4/29

#
IT-Wombat wrote...
Transparency doesn't work ... when the pen is on a yellow background and the picked color is yellow you can't see the changed transparency.
Then any time the pen color changes, create the two images you want to use for it upfront. The images, when put in an array, can then be alternately swapped out using the same format as my one line code changing the transparency.
danpost danpost

2019/4/30

#
To have your pen viewed at all times and on any color, you can give it a double border -- say white and black. In the two images used for blinking, have the two colors reversed (black on outside for one and white on outside for the other). The main color can remain constant, which would avoid any confusion as to which color it will actually paint in. When the pen is down, stick to only one of the images.
IT-Wombat IT-Wombat

2019/4/30

#
danpost wrote...
To have your pen viewed at all times and on any color, you can give it a double border -- say white and black. In the two images used for blinking, have the two colors reversed (black on outside for one and white on outside for the other). The main color can remain constant, which would avoid any confusion as to which color it will actually paint in. When the pen is down, stick to only one of the images.
I deleted my part with the brighter()/darker() method and solved my issue with a simple inside black circle, that indicates the pen up status. Thanks for your help.
You need to login to post a reply.