mirror of
https://github.com/jneug/zeichenmaschine.git
synced 2026-10-12 09:56:33 +02:00
Compare commits
4 Commits
b76d533739
...
03945e029a
| Author | SHA1 | Date | |
|---|---|---|---|
| 03945e029a | |||
| 90e043e5f8 | |||
| 559459aef6 | |||
| 8d0bd2bc99 |
@@ -6,6 +6,11 @@ plugins {
|
||||
group 'schule.ngb'
|
||||
version '0.0.32-SNAPSHOT'
|
||||
|
||||
java {
|
||||
withSourcesJar()
|
||||
withJavadocJar()
|
||||
}
|
||||
|
||||
compileJava {
|
||||
options.release = 11
|
||||
}
|
||||
|
||||
634
docs/assets/quickstart/AblaufMoleActive.excalidraw
Normal file
634
docs/assets/quickstart/AblaufMoleActive.excalidraw
Normal file
@@ -0,0 +1,634 @@
|
||||
{
|
||||
"type": "excalidraw",
|
||||
"version": 2,
|
||||
"source": "https://excalidraw.com",
|
||||
"elements": [
|
||||
{
|
||||
"type": "rectangle",
|
||||
"version": 152,
|
||||
"versionNonce": 1288225375,
|
||||
"isDeleted": false,
|
||||
"id": "fxk8rHocjpTteICJMa6n8",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 619.9963325816416,
|
||||
"y": 186.9758066195945,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#fab005",
|
||||
"width": 150,
|
||||
"height": 46,
|
||||
"seed": 1339263918,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"boundElements": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "JmEBjNProPAgJQZUvMGGa"
|
||||
},
|
||||
{
|
||||
"id": "eryKwAzIMcBMQP0Ybl1Mm",
|
||||
"type": "arrow"
|
||||
}
|
||||
],
|
||||
"updated": 1670307372550,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"type": "rectangle",
|
||||
"version": 264,
|
||||
"versionNonce": 1267158257,
|
||||
"isDeleted": false,
|
||||
"id": "wZLPkORf755_2Vp0J6I0V",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 566.9963325816416,
|
||||
"y": 289.9758066195945,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#fab005",
|
||||
"width": 248,
|
||||
"height": 50,
|
||||
"seed": 359801906,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"boundElements": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "9TujIdwDvtinylO3z50y6"
|
||||
},
|
||||
{
|
||||
"id": "eryKwAzIMcBMQP0Ybl1Mm",
|
||||
"type": "arrow"
|
||||
},
|
||||
{
|
||||
"id": "Zc9GOJ8DsIQYo4WaGvvHy",
|
||||
"type": "arrow"
|
||||
}
|
||||
],
|
||||
"updated": 1670307379131,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"type": "rectangle",
|
||||
"version": 376,
|
||||
"versionNonce": 1807861489,
|
||||
"isDeleted": false,
|
||||
"id": "290mWFx31fA5smc5FqPUr",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 607.9963325816416,
|
||||
"y": 392.9758066195945,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#228be6",
|
||||
"width": 143,
|
||||
"height": 50,
|
||||
"seed": 1948766318,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"boundElements": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "_ISR-LCZm2Hu2G57R_uxN"
|
||||
},
|
||||
{
|
||||
"id": "Zc9GOJ8DsIQYo4WaGvvHy",
|
||||
"type": "arrow"
|
||||
},
|
||||
{
|
||||
"id": "hUUqTCXva-vZjnBeM-PR3",
|
||||
"type": "arrow"
|
||||
}
|
||||
],
|
||||
"updated": 1670307888001,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"type": "rectangle",
|
||||
"version": 518,
|
||||
"versionNonce": 2136415391,
|
||||
"isDeleted": false,
|
||||
"id": "kbEG_cCZadugfCPxYedhf",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 614.9963325816416,
|
||||
"y": 589.9758066195944,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#228be6",
|
||||
"width": 131,
|
||||
"height": 50,
|
||||
"seed": 97599794,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"boundElements": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "6KjVrNy_dxGXJtntdqrjY"
|
||||
},
|
||||
{
|
||||
"id": "hUUqTCXva-vZjnBeM-PR3",
|
||||
"type": "arrow"
|
||||
},
|
||||
{
|
||||
"id": "bplSSGA4kyy-Av7nKNK1B",
|
||||
"type": "arrow"
|
||||
},
|
||||
{
|
||||
"id": "qukSk_W6enSdwERPEPkhZ",
|
||||
"type": "arrow"
|
||||
}
|
||||
],
|
||||
"updated": 1670307888001,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"version": 110,
|
||||
"versionNonce": 1350901746,
|
||||
"isDeleted": false,
|
||||
"id": "JmEBjNProPAgJQZUvMGGa",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 643.9963325816416,
|
||||
"y": 199.9758066195945,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "transparent",
|
||||
"width": 102,
|
||||
"height": 20,
|
||||
"seed": 1889147762,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"boundElements": [],
|
||||
"updated": 1670164406970,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"text": "new Shapes()",
|
||||
"baseline": 14,
|
||||
"textAlign": "center",
|
||||
"verticalAlign": "middle",
|
||||
"containerId": "fxk8rHocjpTteICJMa6n8",
|
||||
"originalText": "new Shapes()"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"version": 245,
|
||||
"versionNonce": 1536101230,
|
||||
"isDeleted": false,
|
||||
"id": "9TujIdwDvtinylO3z50y6",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 584.9963325816416,
|
||||
"y": 304.9758066195945,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "transparent",
|
||||
"width": 212,
|
||||
"height": 20,
|
||||
"seed": 1297543150,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"boundElements": [],
|
||||
"updated": 1670164433291,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"text": "super(800, 800, \"Shapes\")",
|
||||
"baseline": 14,
|
||||
"textAlign": "center",
|
||||
"verticalAlign": "middle",
|
||||
"containerId": "wZLPkORf755_2Vp0J6I0V",
|
||||
"originalText": "super(800, 800, \"Shapes\")"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"version": 362,
|
||||
"versionNonce": 2069822514,
|
||||
"isDeleted": false,
|
||||
"id": "_ISR-LCZm2Hu2G57R_uxN",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 650.4963325816416,
|
||||
"y": 407.9758066195945,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "transparent",
|
||||
"width": 58,
|
||||
"height": 20,
|
||||
"seed": 525219186,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"boundElements": [],
|
||||
"updated": 1670164509204,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"text": "setup()",
|
||||
"baseline": 14,
|
||||
"textAlign": "center",
|
||||
"verticalAlign": "middle",
|
||||
"containerId": "290mWFx31fA5smc5FqPUr",
|
||||
"originalText": "setup()"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"version": 502,
|
||||
"versionNonce": 747611665,
|
||||
"isDeleted": false,
|
||||
"id": "6KjVrNy_dxGXJtntdqrjY",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 655.4963325816416,
|
||||
"y": 604.9758066195944,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "transparent",
|
||||
"width": 50,
|
||||
"height": 20,
|
||||
"seed": 1808016110,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"boundElements": [],
|
||||
"updated": 1670307245844,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"text": "draw()",
|
||||
"baseline": 14,
|
||||
"textAlign": "center",
|
||||
"verticalAlign": "middle",
|
||||
"containerId": "kbEG_cCZadugfCPxYedhf",
|
||||
"originalText": "draw()"
|
||||
},
|
||||
{
|
||||
"type": "arrow",
|
||||
"version": 31,
|
||||
"versionNonce": 101778865,
|
||||
"isDeleted": false,
|
||||
"id": "eryKwAzIMcBMQP0Ybl1Mm",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 694.9963325816416,
|
||||
"y": 242.9758066195945,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#12b886",
|
||||
"width": 0,
|
||||
"height": 38,
|
||||
"seed": 1130444978,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"boundElements": [],
|
||||
"updated": 1670307364549,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"startBinding": {
|
||||
"elementId": "fxk8rHocjpTteICJMa6n8",
|
||||
"focus": 0,
|
||||
"gap": 10
|
||||
},
|
||||
"endBinding": {
|
||||
"elementId": "wZLPkORf755_2Vp0J6I0V",
|
||||
"focus": 0.03225806451612903,
|
||||
"gap": 9
|
||||
},
|
||||
"lastCommittedPoint": null,
|
||||
"startArrowhead": null,
|
||||
"endArrowhead": "arrow",
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0,
|
||||
38
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "arrow",
|
||||
"version": 160,
|
||||
"versionNonce": 1672489439,
|
||||
"isDeleted": false,
|
||||
"id": "Zc9GOJ8DsIQYo4WaGvvHy",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 686.7253597961584,
|
||||
"y": 347.9758066195945,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#12b886",
|
||||
"width": 0.3256260532492661,
|
||||
"height": 36,
|
||||
"seed": 1138446962,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"boundElements": [],
|
||||
"updated": 1670307364549,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"startBinding": {
|
||||
"elementId": "wZLPkORf755_2Vp0J6I0V",
|
||||
"gap": 8,
|
||||
"focus": 0.03595554587056003
|
||||
},
|
||||
"endBinding": {
|
||||
"elementId": "290mWFx31fA5smc5FqPUr",
|
||||
"gap": 9,
|
||||
"focus": 0.09195903246894747
|
||||
},
|
||||
"lastCommittedPoint": null,
|
||||
"startArrowhead": null,
|
||||
"endArrowhead": "arrow",
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
-0.3256260532492661,
|
||||
36
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "arrow",
|
||||
"version": 616,
|
||||
"versionNonce": 447594705,
|
||||
"isDeleted": false,
|
||||
"id": "hUUqTCXva-vZjnBeM-PR3",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 684.6524492354905,
|
||||
"y": 452.97580661959455,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#228be6",
|
||||
"width": 1.5815106831711319,
|
||||
"height": 29.000000000000114,
|
||||
"seed": 1169930546,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"boundElements": [],
|
||||
"updated": 1670307888001,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"startBinding": {
|
||||
"elementId": "290mWFx31fA5smc5FqPUr",
|
||||
"focus": -0.044553538542618336,
|
||||
"gap": 10
|
||||
},
|
||||
"endBinding": {
|
||||
"elementId": "5cG3FjQlYuIGPZMsIMgJU",
|
||||
"focus": 0.08947713014192164,
|
||||
"gap": 6.999999999999915
|
||||
},
|
||||
"lastCommittedPoint": null,
|
||||
"startArrowhead": null,
|
||||
"endArrowhead": "arrow",
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
1.5815106831711319,
|
||||
29.000000000000114
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "rectangle",
|
||||
"version": 560,
|
||||
"versionNonce": 11022527,
|
||||
"isDeleted": false,
|
||||
"id": "5cG3FjQlYuIGPZMsIMgJU",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 616.4963325816416,
|
||||
"y": 488.9758066195945,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#228be6",
|
||||
"width": 131,
|
||||
"height": 50,
|
||||
"seed": 609895569,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"boundElements": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "-Fl205ZvyGaxHAHt7C3r3"
|
||||
},
|
||||
{
|
||||
"id": "hUUqTCXva-vZjnBeM-PR3",
|
||||
"type": "arrow"
|
||||
},
|
||||
{
|
||||
"id": "bplSSGA4kyy-Av7nKNK1B",
|
||||
"type": "arrow"
|
||||
},
|
||||
{
|
||||
"id": "qukSk_W6enSdwERPEPkhZ",
|
||||
"type": "arrow"
|
||||
}
|
||||
],
|
||||
"updated": 1670307888001,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"version": 551,
|
||||
"versionNonce": 685087263,
|
||||
"isDeleted": false,
|
||||
"id": "-Fl205ZvyGaxHAHt7C3r3",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"angle": 0,
|
||||
"x": 647.4963325816416,
|
||||
"y": 503.97580661959455,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "transparent",
|
||||
"width": 69,
|
||||
"height": 20,
|
||||
"seed": 415680767,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"boundElements": null,
|
||||
"updated": 1670307260196,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"text": "update()",
|
||||
"baseline": 14,
|
||||
"textAlign": "center",
|
||||
"verticalAlign": "middle",
|
||||
"containerId": "5cG3FjQlYuIGPZMsIMgJU",
|
||||
"originalText": "update()"
|
||||
},
|
||||
{
|
||||
"id": "bplSSGA4kyy-Av7nKNK1B",
|
||||
"type": "arrow",
|
||||
"x": 683.9963325816416,
|
||||
"y": 546.9758066195944,
|
||||
"width": 1,
|
||||
"height": 34,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#228be6",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"seed": 1937189809,
|
||||
"version": 33,
|
||||
"versionNonce": 1639939761,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670307888001,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
-1,
|
||||
34
|
||||
]
|
||||
],
|
||||
"lastCommittedPoint": null,
|
||||
"startBinding": {
|
||||
"elementId": "5cG3FjQlYuIGPZMsIMgJU",
|
||||
"focus": -0.044849023090586096,
|
||||
"gap": 7.999999999999858
|
||||
},
|
||||
"endBinding": {
|
||||
"elementId": "kbEG_cCZadugfCPxYedhf",
|
||||
"focus": 0.022646536412078155,
|
||||
"gap": 9
|
||||
},
|
||||
"startArrowhead": null,
|
||||
"endArrowhead": "arrow"
|
||||
},
|
||||
{
|
||||
"id": "qukSk_W6enSdwERPEPkhZ",
|
||||
"type": "arrow",
|
||||
"x": 758.9963325816416,
|
||||
"y": 615.9758066195944,
|
||||
"width": 87,
|
||||
"height": 107.99999999999994,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "transparent",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"seed": 677436529,
|
||||
"version": 170,
|
||||
"versionNonce": 377207327,
|
||||
"isDeleted": false,
|
||||
"boundElements": [],
|
||||
"updated": 1670307315516,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
86,
|
||||
0
|
||||
],
|
||||
[
|
||||
83,
|
||||
-106.99999999999994
|
||||
],
|
||||
[
|
||||
-1,
|
||||
-107.99999999999994
|
||||
]
|
||||
],
|
||||
"lastCommittedPoint": null,
|
||||
"startBinding": {
|
||||
"elementId": "kbEG_cCZadugfCPxYedhf",
|
||||
"focus": 0.04,
|
||||
"gap": 13
|
||||
},
|
||||
"endBinding": {
|
||||
"elementId": "5cG3FjQlYuIGPZMsIMgJU",
|
||||
"focus": -0.26783652736088875,
|
||||
"gap": 10.5
|
||||
},
|
||||
"startArrowhead": null,
|
||||
"endArrowhead": "arrow"
|
||||
}
|
||||
],
|
||||
"appState": {
|
||||
"gridSize": null,
|
||||
"viewBackgroundColor": "#ffffff"
|
||||
},
|
||||
"files": {}
|
||||
}
|
||||
BIN
docs/assets/quickstart/AblaufMoleActive.png
Normal file
BIN
docs/assets/quickstart/AblaufMoleActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
1030
docs/assets/quickstart/AblaufMoleStatic.excalidraw
Normal file
1030
docs/assets/quickstart/AblaufMoleStatic.excalidraw
Normal file
File diff suppressed because it is too large
Load Diff
BIN
docs/assets/quickstart/AblaufMoleStatic.png
Normal file
BIN
docs/assets/quickstart/AblaufMoleStatic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 411 KiB |
375
docs/assets/quickstart/CircleMouseCollision.excalidraw
Normal file
375
docs/assets/quickstart/CircleMouseCollision.excalidraw
Normal file
@@ -0,0 +1,375 @@
|
||||
{
|
||||
"type": "excalidraw",
|
||||
"version": 2,
|
||||
"source": "https://excalidraw.com",
|
||||
"elements": [
|
||||
{
|
||||
"id": "Mhp-wQ2wZxCI4BYWvTvV2",
|
||||
"type": "ellipse",
|
||||
"x": 420,
|
||||
"y": 233,
|
||||
"width": 385.99999999999994,
|
||||
"height": 385.99999999999994,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#ffdf22",
|
||||
"fillStyle": "cross-hatch",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"seed": 474299186,
|
||||
"version": 149,
|
||||
"versionNonce": 2072559726,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670158627399,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"id": "SqZRA75ACKHo0lB799wpS",
|
||||
"type": "line",
|
||||
"x": 605,
|
||||
"y": 426,
|
||||
"width": 173.02018127597637,
|
||||
"height": 99.89324823492274,
|
||||
"angle": 0,
|
||||
"strokeColor": "#087f5b",
|
||||
"backgroundColor": "#ffdf22",
|
||||
"fillStyle": "cross-hatch",
|
||||
"strokeWidth": 2,
|
||||
"strokeStyle": "dashed",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 484805038,
|
||||
"version": 286,
|
||||
"versionNonce": 1603007154,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670159044301,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
173.02018127597637,
|
||||
-99.89324823492274
|
||||
]
|
||||
],
|
||||
"lastCommittedPoint": null,
|
||||
"startBinding": null,
|
||||
"endBinding": null,
|
||||
"startArrowhead": null,
|
||||
"endArrowhead": null
|
||||
},
|
||||
{
|
||||
"id": "7XVC5Wqiy62pN9Vc92bgl",
|
||||
"type": "text",
|
||||
"x": 645.7358370304399,
|
||||
"y": 356.14958623820286,
|
||||
"width": 86,
|
||||
"height": 20,
|
||||
"angle": 5.766085793504818,
|
||||
"strokeColor": "#087f5b",
|
||||
"backgroundColor": "#ffdf22",
|
||||
"fillStyle": "cross-hatch",
|
||||
"strokeWidth": 2,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"seed": 1883808110,
|
||||
"version": 228,
|
||||
"versionNonce": 627525998,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670159044301,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"text": "moleRadius",
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"textAlign": "left",
|
||||
"verticalAlign": "top",
|
||||
"baseline": 14,
|
||||
"containerId": null,
|
||||
"originalText": "moleRadius"
|
||||
},
|
||||
{
|
||||
"id": "zp9JMFpfOA6ZEWCCiqwW0",
|
||||
"type": "line",
|
||||
"x": 606,
|
||||
"y": 427,
|
||||
"width": 128.012747010704,
|
||||
"height": 208.02230726873202,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#fa5252",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"strokeStyle": "dashed",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 224372978,
|
||||
"version": 81,
|
||||
"versionNonce": 563971630,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670158772553,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
-128.012747010704,
|
||||
-208.02230726873202
|
||||
]
|
||||
],
|
||||
"lastCommittedPoint": null,
|
||||
"startBinding": null,
|
||||
"endBinding": null,
|
||||
"startArrowhead": null,
|
||||
"endArrowhead": null
|
||||
},
|
||||
{
|
||||
"id": "LIDFlKBUhkbZdzTUFT1qp",
|
||||
"type": "line",
|
||||
"x": 604.8240237554426,
|
||||
"y": 425.10629955596494,
|
||||
"width": 127.71248741178238,
|
||||
"height": 4.628286654564533,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#fa5252",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"strokeStyle": "dashed",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 34525358,
|
||||
"version": 124,
|
||||
"versionNonce": 1131380590,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670158787752,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
-127.71248741178238,
|
||||
-4.628286654564533
|
||||
]
|
||||
],
|
||||
"lastCommittedPoint": null,
|
||||
"startBinding": null,
|
||||
"endBinding": null,
|
||||
"startArrowhead": null,
|
||||
"endArrowhead": null
|
||||
},
|
||||
{
|
||||
"id": "-Of3RfHAvJDq0qHIwjm2U",
|
||||
"type": "ellipse",
|
||||
"x": 471.96813247323996,
|
||||
"y": 413.60866976111646,
|
||||
"width": 12,
|
||||
"height": 12,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#4c6ef5",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"seed": 1050702514,
|
||||
"version": 384,
|
||||
"versionNonce": 1957432558,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670158970885,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"id": "NB4WGe-lT7XqLrsKX8jN8",
|
||||
"type": "ellipse",
|
||||
"x": 472,
|
||||
"y": 212,
|
||||
"width": 12,
|
||||
"height": 12,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#fa5252",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"seed": 2059751730,
|
||||
"version": 277,
|
||||
"versionNonce": 756441010,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670158769939,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"id": "T1vEWEHV-1FM4A7Q7dTzy",
|
||||
"type": "ellipse",
|
||||
"x": 601.6117120882632,
|
||||
"y": 422.28007605476614,
|
||||
"width": 6.436664554034337,
|
||||
"height": 6.436664554034337,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#000000",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 0,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"seed": 1983845742,
|
||||
"version": 376,
|
||||
"versionNonce": 1202556466,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670158984089,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"id": "eEMIGJ2Ag5HqWZLPmjXMM",
|
||||
"type": "text",
|
||||
"x": 551.4695946462369,
|
||||
"y": 432.8553279772536,
|
||||
"width": 108,
|
||||
"height": 20,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#000000",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"strokeStyle": "dashed",
|
||||
"roughness": 0,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"seed": 817794290,
|
||||
"version": 97,
|
||||
"versionNonce": 1438641266,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670158980419,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"text": "(moleX, moleY)",
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"textAlign": "left",
|
||||
"verticalAlign": "top",
|
||||
"baseline": 14,
|
||||
"containerId": null,
|
||||
"originalText": "(moleX, moleY)"
|
||||
},
|
||||
{
|
||||
"id": "6cMmrU3lcJbub8sEKnVWe",
|
||||
"type": "text",
|
||||
"x": 409.80838527586974,
|
||||
"y": 186.48331271464983,
|
||||
"width": 135,
|
||||
"height": 20,
|
||||
"angle": 0,
|
||||
"strokeColor": "#c92a2a",
|
||||
"backgroundColor": "#000000",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"strokeStyle": "dashed",
|
||||
"roughness": 0,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"seed": 399694958,
|
||||
"version": 166,
|
||||
"versionNonce": 1571185842,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670158939920,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"text": "(mouseX, mouseY)",
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"textAlign": "left",
|
||||
"verticalAlign": "top",
|
||||
"baseline": 14,
|
||||
"containerId": null,
|
||||
"originalText": "(mouseX, mouseY)"
|
||||
},
|
||||
{
|
||||
"id": "0idmv_zLtEYyctHB4lSWV",
|
||||
"type": "text",
|
||||
"x": 406.7568976895149,
|
||||
"y": 390.3911282833501,
|
||||
"width": 135,
|
||||
"height": 20,
|
||||
"angle": 0,
|
||||
"strokeColor": "#364fc7",
|
||||
"backgroundColor": "#000000",
|
||||
"fillStyle": "solid",
|
||||
"strokeWidth": 2,
|
||||
"strokeStyle": "dashed",
|
||||
"roughness": 0,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "sharp",
|
||||
"seed": 1008210350,
|
||||
"version": 224,
|
||||
"versionNonce": 968376110,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670158975919,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"text": "(mouseX, mouseY)",
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"textAlign": "left",
|
||||
"verticalAlign": "top",
|
||||
"baseline": 14,
|
||||
"containerId": null,
|
||||
"originalText": "(mouseX, mouseY)"
|
||||
}
|
||||
],
|
||||
"appState": {
|
||||
"gridSize": null,
|
||||
"viewBackgroundColor": "#ffffff"
|
||||
},
|
||||
"files": {}
|
||||
}
|
||||
BIN
docs/assets/quickstart/CircleMouseCollision.png
Normal file
BIN
docs/assets/quickstart/CircleMouseCollision.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 821 KiB |
375
docs/assets/quickstart/Layers.excalidraw
Normal file
375
docs/assets/quickstart/Layers.excalidraw
Normal file
@@ -0,0 +1,375 @@
|
||||
{
|
||||
"type": "excalidraw",
|
||||
"version": 2,
|
||||
"source": "https://excalidraw.com",
|
||||
"elements": [
|
||||
{
|
||||
"id": "HPGP8tbAPy0aGI3_MCE3D",
|
||||
"type": "diamond",
|
||||
"x": 491.42779164474496,
|
||||
"y": 479.56091158550765,
|
||||
"width": 432.03244941244884,
|
||||
"height": 55.325188818463005,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#868e96",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 1103578030,
|
||||
"version": 138,
|
||||
"versionNonce": 1150893294,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670163691142,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"id": "vhIFJN3-91oJXV-RfFsBf",
|
||||
"type": "diamond",
|
||||
"x": 491.42779164474496,
|
||||
"y": 435.8942449188411,
|
||||
"width": 432.03244941244884,
|
||||
"height": 55.325188818463005,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#fab005",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 618886834,
|
||||
"version": 198,
|
||||
"versionNonce": 1515704562,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670163691142,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"id": "B2pM-4m_3Dk2w_6dY-hVJ",
|
||||
"type": "diamond",
|
||||
"x": 491.42779164474496,
|
||||
"y": 392.2275782521744,
|
||||
"width": 432.03244941244884,
|
||||
"height": 55.325188818463005,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#228be6",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 844345582,
|
||||
"version": 231,
|
||||
"versionNonce": 1954508590,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670163691142,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"id": "Ge28XC9PqD26hknNaFXKP",
|
||||
"type": "diamond",
|
||||
"x": 491.42779164474496,
|
||||
"y": 348.5609115855077,
|
||||
"width": 432.03244941244884,
|
||||
"height": 55.325188818463005,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#40c057",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "solid",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 1326657902,
|
||||
"version": 249,
|
||||
"versionNonce": 685040306,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670163691142,
|
||||
"link": null,
|
||||
"locked": false
|
||||
},
|
||||
{
|
||||
"id": "PLU80s2TkyMEAOVgolwJx",
|
||||
"type": "line",
|
||||
"x": 506.9963325816415,
|
||||
"y": 507.9758066195945,
|
||||
"width": 0,
|
||||
"height": 132.00000000000006,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#40c057",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "dotted",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 1246804466,
|
||||
"version": 39,
|
||||
"versionNonce": 627399022,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670163691142,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0,
|
||||
-132.00000000000006
|
||||
]
|
||||
],
|
||||
"lastCommittedPoint": null,
|
||||
"startBinding": null,
|
||||
"endBinding": null,
|
||||
"startArrowhead": null,
|
||||
"endArrowhead": null
|
||||
},
|
||||
{
|
||||
"id": "xDdJ5FnbMLIbN95FE3Iyc",
|
||||
"type": "line",
|
||||
"x": 910.9963325816416,
|
||||
"y": 506.9758066195945,
|
||||
"width": 0,
|
||||
"height": 132,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#40c057",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "dotted",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 1034568050,
|
||||
"version": 77,
|
||||
"versionNonce": 1363786866,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670163691142,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0,
|
||||
-132
|
||||
]
|
||||
],
|
||||
"lastCommittedPoint": null,
|
||||
"startBinding": null,
|
||||
"endBinding": null,
|
||||
"startArrowhead": null,
|
||||
"endArrowhead": null
|
||||
},
|
||||
{
|
||||
"id": "clYu5Q9GzKbAfohBEsGwn",
|
||||
"type": "line",
|
||||
"x": 709.9963325816416,
|
||||
"y": 532.9758066195944,
|
||||
"width": 0,
|
||||
"height": 129.99999999999994,
|
||||
"angle": 0,
|
||||
"strokeColor": "#000000",
|
||||
"backgroundColor": "#40c057",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "dotted",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 1798035246,
|
||||
"version": 42,
|
||||
"versionNonce": 244579246,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670163691142,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"points": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0,
|
||||
-129.99999999999994
|
||||
]
|
||||
],
|
||||
"lastCommittedPoint": null,
|
||||
"startBinding": null,
|
||||
"endBinding": null,
|
||||
"startArrowhead": null,
|
||||
"endArrowhead": null
|
||||
},
|
||||
{
|
||||
"id": "v2nD7_bvWJYHqs82XDWO2",
|
||||
"type": "text",
|
||||
"x": 935.9963325816416,
|
||||
"y": 497.2235059947391,
|
||||
"width": 159,
|
||||
"height": 20,
|
||||
"angle": 0,
|
||||
"strokeColor": "#343a40",
|
||||
"backgroundColor": "#40c057",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "dotted",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 1323260978,
|
||||
"version": 111,
|
||||
"versionNonce": 372528622,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670163691142,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"text": "Ebene 0: ColorLayer",
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"textAlign": "left",
|
||||
"verticalAlign": "top",
|
||||
"baseline": 14,
|
||||
"containerId": null,
|
||||
"originalText": "Ebene 0: ColorLayer"
|
||||
},
|
||||
{
|
||||
"id": "c6T2j8hozL3RZcNYGMgRl",
|
||||
"type": "text",
|
||||
"x": 935.9963325816416,
|
||||
"y": 453.55683932807256,
|
||||
"width": 172,
|
||||
"height": 20,
|
||||
"angle": 0,
|
||||
"strokeColor": "#e67700",
|
||||
"backgroundColor": "#40c057",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "dotted",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 1949746930,
|
||||
"version": 111,
|
||||
"versionNonce": 1448527858,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670163691142,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"text": "Ebene 1: DrawingLayer",
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"textAlign": "left",
|
||||
"verticalAlign": "top",
|
||||
"baseline": 14,
|
||||
"containerId": null,
|
||||
"originalText": "Ebene 1: DrawingLayer"
|
||||
},
|
||||
{
|
||||
"id": "bAmGMg2i4Hvv7t_obXSKn",
|
||||
"type": "text",
|
||||
"x": 935.9963325816416,
|
||||
"y": 409.8901726614059,
|
||||
"width": 174,
|
||||
"height": 20,
|
||||
"angle": 0,
|
||||
"strokeColor": "#1864ab",
|
||||
"backgroundColor": "#40c057",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "dotted",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 706529710,
|
||||
"version": 144,
|
||||
"versionNonce": 1968138286,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670163691142,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"text": "Ebene 2: ShapesLayer",
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"textAlign": "left",
|
||||
"verticalAlign": "top",
|
||||
"baseline": 14,
|
||||
"containerId": null,
|
||||
"originalText": "Ebene 2: ShapesLayer"
|
||||
},
|
||||
{
|
||||
"id": "9-QieQt-nVqGCe5D4r15j",
|
||||
"type": "text",
|
||||
"x": 935.9963325816416,
|
||||
"y": 366.2235059947392,
|
||||
"width": 65,
|
||||
"height": 20,
|
||||
"angle": 0,
|
||||
"strokeColor": "#2b8a3e",
|
||||
"backgroundColor": "#40c057",
|
||||
"fillStyle": "hachure",
|
||||
"strokeWidth": 1,
|
||||
"strokeStyle": "dotted",
|
||||
"roughness": 1,
|
||||
"opacity": 100,
|
||||
"groupIds": [],
|
||||
"strokeSharpness": "round",
|
||||
"seed": 2100742126,
|
||||
"version": 179,
|
||||
"versionNonce": 289074606,
|
||||
"isDeleted": false,
|
||||
"boundElements": null,
|
||||
"updated": 1670163697684,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"text": "Ebene 3",
|
||||
"fontSize": 16,
|
||||
"fontFamily": 1,
|
||||
"textAlign": "left",
|
||||
"verticalAlign": "top",
|
||||
"baseline": 14,
|
||||
"containerId": null,
|
||||
"originalText": "Ebene 3"
|
||||
}
|
||||
],
|
||||
"appState": {
|
||||
"gridSize": null,
|
||||
"viewBackgroundColor": "#ffffff"
|
||||
},
|
||||
"files": {}
|
||||
}
|
||||
BIN
docs/assets/quickstart/Layers.png
Normal file
BIN
docs/assets/quickstart/Layers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
BIN
docs/assets/quickstart/shapes_5.1.png
Normal file
BIN
docs/assets/quickstart/shapes_5.1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
docs/assets/quickstart/shapes_5.3.gif
Normal file
BIN
docs/assets/quickstart/shapes_5.3.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
BIN
docs/assets/quickstart/shapes_6.1.gif
Normal file
BIN
docs/assets/quickstart/shapes_6.1.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
BIN
docs/assets/quickstart/shapes_6.2.png
Normal file
BIN
docs/assets/quickstart/shapes_6.2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 457 KiB |
@@ -14,14 +14,33 @@ def define_env(env):
|
||||
if "javadoc_default_package" in env.variables and not clazz.startswith(env.variables['javadoc_default_package']):
|
||||
clazz = f"{env.variables['javadoc_default_package'].rstrip('.')}.{clazz}"
|
||||
javadoc_url = env.variables["javadoc_url"].rstrip("/")
|
||||
path = clazz.replace(".", "/") + ".html"
|
||||
|
||||
path = list()
|
||||
name = list()
|
||||
|
||||
for p in clazz.split('.'):
|
||||
if p[0].islower():
|
||||
path.append(p)
|
||||
else:
|
||||
name.append(p)
|
||||
|
||||
path = '/'.join(path) + '/' + '.'.join(name) + ".html"
|
||||
if target:
|
||||
path = f"{path}#{target}"
|
||||
return f"{javadoc_url}/{path}"
|
||||
|
||||
@env.macro
|
||||
def jd(cl: str = None, t: str = None) -> str:
|
||||
return javadoc(cl, t)
|
||||
|
||||
@env.macro
|
||||
def javadoc_link(
|
||||
clazz: str = None, target: str = None, strip_package: bool = True, strip_clazz: bool = False, title: str = None
|
||||
clazz: str = None,
|
||||
target: str = None,
|
||||
strip_package: bool = True,
|
||||
strip_clazz: bool = False,
|
||||
strip_params: bool = True,
|
||||
title: str = None
|
||||
) -> str:
|
||||
name = clazz or "Javadoc"
|
||||
if strip_package:
|
||||
@@ -30,6 +49,18 @@ def define_env(env):
|
||||
if target:
|
||||
# _target = re.sub(r"([^(][^,]*?\.)*?([^)]+)", lambda m: m.group(2), target)
|
||||
_target = target
|
||||
|
||||
print(f'{_target.strip()=}')
|
||||
if m := re.match(r'^(.+?)\((.*)\)$', _target):
|
||||
if strip_params and m.group(2):
|
||||
params = m.group(2).split(',')
|
||||
for i, param in enumerate(params):
|
||||
dot = param.rfind('.')
|
||||
if dot >= 0:
|
||||
params[i] = param[dot+1:].strip()
|
||||
params = ", ".join(params)
|
||||
_target = f'{m.group(1)}({params})'
|
||||
|
||||
if strip_clazz:
|
||||
name = _target
|
||||
else:
|
||||
@@ -37,7 +68,33 @@ def define_env(env):
|
||||
if title:
|
||||
name = title
|
||||
|
||||
return f"[{name}]({javadoc(clazz, target)})"
|
||||
return f"[`{name}`]({javadoc(clazz, target)})"
|
||||
|
||||
@env.macro
|
||||
def jdl(
|
||||
cl: str = None,
|
||||
t: str = None,
|
||||
p: bool = False,
|
||||
c: bool = True,
|
||||
title: str = None
|
||||
) -> str:
|
||||
return javadoc_link(cl, t, strip_package=not p, strip_clazz=not c, strip_params=True, title=title)
|
||||
|
||||
@env.macro
|
||||
def jdc(
|
||||
cl: str,
|
||||
p: bool = False
|
||||
) -> str:
|
||||
return javadoc_link(cl, strip_package=not p)
|
||||
|
||||
@env.macro
|
||||
def jdm(
|
||||
cl: str,
|
||||
t: str,
|
||||
p: bool = False,
|
||||
c: bool = False
|
||||
) -> str:
|
||||
return javadoc_link(cl, t, strip_package=not p, strip_clazz=not c)
|
||||
|
||||
@env.macro
|
||||
def javadoc_signature(
|
||||
@@ -57,6 +114,15 @@ def define_env(env):
|
||||
|
||||
return sig
|
||||
|
||||
@env.macro
|
||||
def jds(
|
||||
cl: str = None,
|
||||
m: str = None,
|
||||
pkg: str = None,
|
||||
params: List[str] = list(),
|
||||
) -> str:
|
||||
javadoc_signature(cl, m, pkg, params)
|
||||
|
||||
|
||||
# schule/ngb/zm/Zeichenmaschine.html#setCursor(java.awt.Image,int,int)
|
||||
# schule/ngb/zm/Zeichenmaschine.html#getLayer(java.lang.Class)
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
# Schnellstart mit der Zeichenmaschine
|
||||
|
||||
Um ein einfaches Projekt mit der **Zeichenmaschine** aufzusetzen ist nicht mehr
|
||||
nötig, als die [JAR-Datei der aktuellen Version](https://github.com/jneug/zeichenmaschine/release/latest)
|
||||
herunterzuladen und dem *Classpath* des Projekts hinzuzufügen. Eine Beschreibung
|
||||
für verschiedene Entwicklungsumgebungen findet sich im Abschnitt [Installation](install.md).
|
||||
Um die **Zeichenmaschine** in einem Projekt zu nutzen ist nicht mehr nötig, als
|
||||
die [JAR-Datei der aktuellen Version](https://github.com/jneug/zeichenmaschine/release/latest)
|
||||
herunterzuladen und
|
||||
dem [Classpath](https://www.delftstack.com/de/howto/java/java-classpath-/)
|
||||
hinzuzufügen. Eine Beschreibung für verschiedene Entwicklungsumgebungen findet
|
||||
sich im Abschnitt [Installation](install.md).
|
||||
|
||||
## Die Basisklasse
|
||||
|
||||
Um eine Zeichenmaschine zu erstellen, muss eine Unterklasse von {{ javadoc_link("schule.ngb.zm.Zeichenmaschine") }}
|
||||
erstellt werden.
|
||||
Eine _Zeichenmaschine_ wird immer als Unterklasse von {{ javadoc_link("
|
||||
schule.ngb.zm.Zeichenmaschine") }} erstellt.
|
||||
|
||||
```java
|
||||
public class Shapes extends Zeichenmaschine {
|
||||
@@ -19,9 +21,9 @@ public class Shapes extends Zeichenmaschine {
|
||||
Die gezeigte Klasse ist schon eine lauffähige Zeichenmaschine und kann gestartet
|
||||
werden.
|
||||
|
||||
!!! note
|
||||
!!! note "main Methode"
|
||||
|
||||
Bei einigen Entwicklungsumgebungen muss noch eine `main`-Methode erstellt
|
||||
Bei einigen Entwicklungsumgebungen muss noch eine `main` Methode erstellt
|
||||
werden, um die Zeichenmaschine zu starten:
|
||||
|
||||
```java
|
||||
@@ -30,21 +32,24 @@ werden.
|
||||
}
|
||||
```
|
||||
|
||||
Es öffnet sich ein Zeichenfenster in einer vordefinierten Größe. Um die Größe und
|
||||
den Titel des Fensters zu ändern, legen wir einen Konstruktor an.
|
||||
Es öffnet sich ein Zeichenfenster in einer vordefinierten Größe. Um die
|
||||
Abmessungen und den Titel des Fensters zu ändern, legen wir einen Konstruktor
|
||||
an.
|
||||
|
||||
```java
|
||||
public class Shapes extends Zeichenmaschine {
|
||||
???+ example "Quelltext"
|
||||
|
||||
```java
|
||||
public class Shapes extends Zeichenmaschine {
|
||||
|
||||
public Shapes() {
|
||||
super(800, 800, "Shapes");
|
||||
}
|
||||
|
||||
public Shapes() {
|
||||
super(800, 800, "Shapes");
|
||||
}
|
||||
```
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Starten wir das Projekt nun, wird das Zeichenfenster in der Größe 800x800 mit
|
||||
dem Titel "Shapes" angezeigt.
|
||||
Starten wir das Projekt, wird eine Zeichenfläche in der Größe 800-mal-800 Pixel
|
||||
erstellt und in einem Fenster mit dem Titel „Shapes“ angezeigt.
|
||||
|
||||
<figure markdown>
|
||||
{ width=400 }
|
||||
@@ -52,30 +57,33 @@ dem Titel "Shapes" angezeigt.
|
||||
|
||||
### Formen zeichnen
|
||||
|
||||
Eine Zeichenmaschine hat verschiedene Möglichkeiten, Inhalte in das Zeichenfenster
|
||||
zu zeichnen. Um einfach nur ein statisches Bild zu erzeugen, überschreiben wir die
|
||||
{{ javadoc_link("schule.ngb.zm.Zeichenmaschine", "draw()") }} Methode.
|
||||
Eine Zeichenmaschine hat verschiedene Möglichkeiten, Inhalte in das
|
||||
Zeichenfenster zu zeichnen. Um ein einfaches statisches Bild zu erzeugen,
|
||||
überschreiben wir die {{ jdl("schule.ngb.zm.Zeichenmaschine", "draw()",
|
||||
c=False) }} Methode.
|
||||
|
||||
```java
|
||||
public class Shapes extends Zeichenmaschine {
|
||||
???+ example "Quelltext"
|
||||
|
||||
```java
|
||||
public class Shapes extends Zeichenmaschine {
|
||||
|
||||
public Shapes() {
|
||||
super(800, 800, "Shapes");
|
||||
}
|
||||
|
||||
@Override
|
||||
public void draw() {
|
||||
background.setColor(BLUE);
|
||||
|
||||
drawing.setFillColor(255, 223, 34);
|
||||
drawing.noStroke();
|
||||
drawing.circle(400, 400, 100);
|
||||
}
|
||||
|
||||
public Shapes() {
|
||||
super(800, 800, "Shapes");
|
||||
}
|
||||
```
|
||||
|
||||
@Override
|
||||
public void draw() {
|
||||
background.setColor(43, 128, 243);
|
||||
|
||||
drawing.setFillColor(255, 223, 34);
|
||||
drawing.noStroke();
|
||||
drawing.circle(400, 400, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Nun haben wir einen gelben Kreis (ohne Konturlinie) auf einem blauen Hintergrund
|
||||
gezeichnet.
|
||||
Wir sehen einen gelben Kreis (ohne Konturlinie) auf einem blauen Hintergrund.
|
||||
|
||||
<figure markdown>
|
||||
{ width=400 }
|
||||
@@ -83,38 +91,42 @@ gezeichnet.
|
||||
|
||||
### Vorbereitung der Zeichenfläche
|
||||
|
||||
Im Beispiel oben setzen wir die Hintergrundfarbe auf Blau, die Füllfarbe auf Gelb
|
||||
und deaktivieren die Konturlinie. Wenn diese Einstellungen für alle Zeichenobjekte
|
||||
gleich sind, können wir sie statt in `draw()` auch in die `setup()` Methode schreiben.
|
||||
Diese bereitet die Zeichenfläche vor dem ersten Zeichnen vor.
|
||||
Im Beispiel oben setzen wir die Hintergrundfarbe auf Blau, die Füllfarbe auf
|
||||
Gelb und deaktivieren die Konturlinie. Wenn diese Einstellungen für alle
|
||||
Zeichenobjekte gleich bleiben, können wir sie statt in `draw()` auch in die {{
|
||||
jdl('Zeichenmaschine', 'setup()', c=False) }} Methode schreiben. Diese bereitet
|
||||
die Zeichenfläche vor dem ersten Zeichnen vor.
|
||||
|
||||
```java
|
||||
public class Shapes extends Zeichenmaschine {
|
||||
???+ example "Quelltext"
|
||||
|
||||
public Shapes() {
|
||||
super(800, 800, "Shapes");
|
||||
}
|
||||
```java
|
||||
public class Shapes extends Zeichenmaschine {
|
||||
|
||||
@Override
|
||||
public void setup() {
|
||||
background.setColor(43, 128, 243);
|
||||
|
||||
drawing.setFillColor(255, 223, 34);
|
||||
drawing.noStroke();
|
||||
}
|
||||
|
||||
@Override
|
||||
public void draw() {
|
||||
for( int i = 0; i < 10; i++ ) {
|
||||
drawing.circle(
|
||||
random(0, canvasWidth),
|
||||
random(0, canvasHeight),
|
||||
random(50, 200)
|
||||
);
|
||||
public Shapes() {
|
||||
super(800, 800, "Shapes");
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setup() {
|
||||
background.setColor(BLUE);
|
||||
|
||||
drawing.setFillColor(255, 223, 34);
|
||||
drawing.noStroke();
|
||||
}
|
||||
|
||||
@Override
|
||||
public void draw() {
|
||||
for( int i = 0; i < 10; i++ ) {
|
||||
drawing.circle(
|
||||
random(0, canvasWidth),
|
||||
random(0, canvasHeight),
|
||||
random(50, 200)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
Im Beispiel setzen wir nun die Grundeinstellungen in der `setup()` Methode. In
|
||||
`draw()` werden zehn gelbe Kreise an Zufallskoordinaten gezeichnet.
|
||||
@@ -125,6 +137,470 @@ Im Beispiel setzen wir nun die Grundeinstellungen in der `setup()` Methode. In
|
||||
|
||||
!!! tip ""
|
||||
|
||||
Mit {{ javadoc_link("Constants", "canvasWidth", title="canvasWidth") }} und {{ javadoc_link("Constants", "canvasHeight", strip_clazz=True) }} kannst du in der Zeichenmaschine auf
|
||||
die aktuelle Größe der Zeichenfläche zugreifen. {{ javadoc_link("Constants", "random(int,int)") }}
|
||||
erzeugt eine Zufallszahl innerhalb der angegebenen Grenzen.
|
||||
Mit {{ jdm("Constants", "canvasWidth") }} und
|
||||
{{ jdm("Constants", "canvasHeight") }} kannst du in der Zeichenmaschine
|
||||
auf die aktuelle Größe der Zeichenfläche zugreifen.
|
||||
{{ jdm("Constants", "random(int,int)") }} erzeugt eine Zufallszahl
|
||||
innerhalb der angegebenen Grenzen.
|
||||
|
||||
## Interaktionen mit der Maus: Whack-a-mole
|
||||
|
||||
Mit der Zeichenmaschine lassen sich Interaktionen mit der Maus leicht umsetzen.
|
||||
Wor wollen das Beispielprogramm zu einem
|
||||
[Whac-A-Mole](https://de.wikipedia.org/wiki/Whac-A-Mole) Spiel erweitern.
|
||||
|
||||
Auf der Zeichenfläche wird nur noch ein gelber Kreis an einer zufälligen Stelle
|
||||
angezeigt. Sobald die Spieler:in auf den Kreis klickt, soll dieser an eine neue
|
||||
Position springen.
|
||||
|
||||
Damit wir den Kreis an eine neue Position springen lassen können, müssen wir
|
||||
zufällige `x`- und `y`-Koordinaten generieren. Dazu erstellen wir zunächst zwei
|
||||
_Objektvariablen_ für die Koordinaten, die in der `setup()` Methode mit
|
||||
zufälligen Werte initialisiert werden. Diese benutzen wir, um die `draw
|
||||
()` Methode anzupassen.
|
||||
|
||||
??? example "Quelltext"
|
||||
|
||||
```Java
|
||||
public class Shapes extends Zeichenmaschine {
|
||||
|
||||
private int moleRadius = 20;
|
||||
|
||||
private int moleX;
|
||||
|
||||
private int moleY;
|
||||
|
||||
public Shapes() {
|
||||
super(800, 800, "Shapes");
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setup() {
|
||||
background.setColor(BLUE);
|
||||
|
||||
drawing.setFillColor(255, 223, 34);
|
||||
drawing.noStroke();
|
||||
|
||||
moleX = random(50, canvasWidth - 50);
|
||||
moleY = random(50, canvasHeight - 50);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void draw() {
|
||||
drawing.clear();
|
||||
drawing.circle(moleX, moleY, moleRadius);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
<figure markdown>
|
||||
{ width=600 }
|
||||
</figure>
|
||||
|
||||
Als Nächstes prüfen wir bei jedem Mausklick, ob die Mauskoordinaten innerhalb
|
||||
des gelben Kreises (des Maulwurfs) liegen. Die Mauskoordinaten sind jederzeit
|
||||
über die Variablen `mouseX` und `mouseY` abrufbar. Um zu prüfen, ob diese
|
||||
Koordinaten innerhalb des Kreises liegen, vergleichen wir den Abstand zwischen
|
||||
Kreismittelpunkt `(moleX, moleY)` und den Mauskoordinaten
|
||||
`(mouseX, mouseY)` mit dem Radius des Kreises (im Bild grün). Ist die Entfernung
|
||||
kleiner als der Radius (blauer Kreis), wurde innerhalb des Kreises geklickt.
|
||||
Sonst außerhalb (roter Kreis).
|
||||
|
||||
<figure markdown>
|
||||
{ width=400 }
|
||||
</figure>
|
||||
|
||||
Den Abstand vom Mittelpunkt zur Maus lässt sich mithilfe des Satzes des
|
||||
Pythagoras leicht selber berechnen. Die Zeichenmaschine kann uns diese Arbeit
|
||||
aber auch abnehmen und stellt eine Methode dafür bereit
|
||||
({{ jdm("Constants", "distance(double,double,double,double)") }}).
|
||||
|
||||
Um auf einen Mausklick zu reagieren, ergänzen wir die
|
||||
{{ jdm("Zeichenmaschine", "mouseClicked()") }} Methode:
|
||||
|
||||
```
|
||||
@Override
|
||||
public void mouseClicked() {
|
||||
if( distance(moleX, moleY, mouseX, mouseY) < moleRadius ) {
|
||||
moleX = random(50, canvasWidth - 50);
|
||||
moleY = random(50, canvasHeight - 50);
|
||||
redraw();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
??? example "Quelltext"
|
||||
|
||||
```Java
|
||||
public class Shapes extends Zeichenmaschine {
|
||||
|
||||
private int moleRadius = 20;
|
||||
|
||||
private int moleX;
|
||||
|
||||
private int moleY;
|
||||
|
||||
public Shapes() {
|
||||
super(800, 800, "Shapes");
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setup() {
|
||||
background.setColor(BLUE);
|
||||
|
||||
drawing.setFillColor(255, 223, 34);
|
||||
drawing.noStroke();
|
||||
|
||||
moleX = random(50, canvasWidth - 50);
|
||||
moleY = random(50, canvasHeight - 50);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void draw() {
|
||||
drawing.clear();
|
||||
drawing.circle(moleX, moleY, moleRadius);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void mouseClicked() {
|
||||
if( distance(moleX, moleY, mouseX, mouseY) < moleRadius ) {
|
||||
moleX = random(50, canvasWidth - 50);
|
||||
moleY = random(50, canvasHeight - 50);
|
||||
redraw();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
!!! warning ""
|
||||
|
||||
Der Aufruf von {{ jdm("Zeichenmaschine", "redraw()") }} zeichnet
|
||||
die Zeichenfläche neu, indem die `draw()` Methode erneut aufgerufen wird.
|
||||
Du solltest `draw()` niemals direkt aufrufen.
|
||||
|
||||
Nun springt der Kreis an eine andere Stelle, wenn er direkt mit der Maus
|
||||
angeklickt wird.
|
||||
|
||||
<figure markdown>
|
||||
{ width=400 }
|
||||
</figure>
|
||||
|
||||
## Ein paar Details zur Zeichenmaschine
|
||||
|
||||
Die _Zeichenmaschine_ wurde stark von der kreativen Programmierumgebung
|
||||
[Processing](https://processing.org) inspiriert. Wenn Du Processing schon
|
||||
kennst, dann werden Dir einige der Konzepte der _Zeichenmaschine_ schon bekannt
|
||||
vorkommen.
|
||||
|
||||
### Farben
|
||||
|
||||
Farben können auf verschiedene Weisen angegeben werden. Unser Beispiel nutzt
|
||||
bisher zwei Arten:
|
||||
|
||||
1. Die einfachste Möglichkeit sind die _Farbkonstanten_
|
||||
wie {{ jdm('Constants', 'BLUE') }} oder {{ jdm('Constants', 'RED') }}. Im
|
||||
Beispiel setzen wir den Hintergrund auf die Farbe `BLUE`.
|
||||
2. Farben werden häufig im RGB-Farbraum definiert. Dazu wird jeweils der Rot-,
|
||||
Grün- und Blauanteil der Farbe als Wert zwischen 0 und 255 angegeben. Im
|
||||
Beispiel setzen wir die Farbe der Kreise auf `255, 223, 34`, also viel Rot
|
||||
und Grün und nur ein wenig Blau.
|
||||
|
||||
### Ebenen
|
||||
|
||||
Die Zeichenfläche besteht aus einzelnen {{ jdl("Layer", title="Ebenen") }}, die
|
||||
auf übereinander liegen. Bis auf die unterste Ebene sind die Ebenen zunächst
|
||||
durchsichtig, wodurch die Zeichnungen unterer Ebenen durchscheinen.
|
||||
|
||||
<figure markdown>
|
||||
{ width=600 }
|
||||
</figure>
|
||||
|
||||
Eine _Zeichenmaschine_ besitzt zu Beginn drei Ebenen:
|
||||
|
||||
1. Die unterste Ebene ist ein {{ jdc("layers.ColorLayer") }}, die nur aus einer
|
||||
Farbe (oder einem Farbverlauf) besteht und keine durchsichtigen Bereiche
|
||||
besitzt. Im Beispiel setzen wir diese Ebene auf die Farbe `BLUE`.
|
||||
2. Die nächste Ebene ist ein {{ jdc("layers.DrawingLayer") }}, auf die wir
|
||||
unsere Formen zeichnen können. Die Ebene ist zunächst komplett durchsichtig.
|
||||
3. Die oberste Ebene ist ein {{ jdc("layers.ShapesLayer") }}, die zur
|
||||
Darstellung von Form-Objekten der Klasse {{ jdc("shapes.Shape") }} genutzt
|
||||
werden kann.
|
||||
|
||||
Du kannst einer Zeichenfläche aber auch beliebige neue oder selbst programmierte
|
||||
Ebenen hinzufügen.
|
||||
|
||||
### Ablauf
|
||||
|
||||
Die _Zeichenmaschine_ ruft nach dem Start die Methoden in einem festen Ablauf
|
||||
auf.
|
||||
|
||||
<figure markdown>
|
||||
{ width=500 }
|
||||
</figure>
|
||||
|
||||
Erstellst Du eine _Zeichenmaschine_ (beziehungsweise ein Objekt einer
|
||||
Unterklasse), dann wird zuerst die {{ jdm('Zeichenmaschine', 'setup()') }}
|
||||
Methode ausgeführt. Danach folgt einmalig die
|
||||
{{ jdm('Zeichenmaschine', 'draw()') }} Methode und dann endet das Hauptprogramm.
|
||||
|
||||
Die Eingaben der Maus werden in einem parallelen Ablauf (einem _Thread_)
|
||||
abgefangen und daraufhin die {{ jdm('Zeichenmaschine', 'mouseClicked()') }}
|
||||
Methode aufgerufen. In unserem Programm prüfen wir, ob mit der Maus
|
||||
innerhalb des Kreises geklickt wurde und rufen dann
|
||||
{{ jdm('Zeichenmaschine', 'redraw()') }} auf, woraufhin ein weiteres Mal
|
||||
`draw()` ausgeführt wird.
|
||||
|
||||
In _Processing_ wird dies der "statische" Modus genannt, weil das Programm nur
|
||||
einmal abläuft und dann stoppt. "Statisch" trifft es nicht ganz, da das Programm
|
||||
ja zum Beispiel durch Mauseingaben auch verändert werden kann. Wichtig ist aber,
|
||||
dass mit `redraw()` die Zeichenfläche manuell neu gezeichnet werden muss, damit
|
||||
sich der Inhalt ändert.
|
||||
|
||||
## Dynamische Programme
|
||||
|
||||
Wir wollen unser kleines Spiel dynamischer machen, indem die Kreise nur drei
|
||||
Sekunden angezeigt werden und dann von selbst an einen neuen Ort springen.
|
||||
Schafft man es, den Kreis in dieser Zeit anzuklicken, bekommt man einen Punkt.
|
||||
|
||||
Als zusätzliche Herausforderung lassen wir jeden Kreis in den drei Sekunden
|
||||
immer kleiner werden.
|
||||
|
||||
### Die Update-Draw-Schleifen
|
||||
|
||||
{ width=200 align=right }
|
||||
|
||||
Bisher hat die _Zeichenmaschine_ einmalig `draw()` aufgerufen und dann nur noch
|
||||
auf Benutzereingaben mit der Maus reagiert. Nun wollen wir das gezeichnete Bild
|
||||
aber laufend anpassen. Der Kreis soll schrumpfen und nach 3 Sekunden
|
||||
verschwinden.
|
||||
|
||||
Dazu ergänzen wir ein {{ jdl('Zeichenmaschine', 'update(double)', c=False) }}
|
||||
Methode in unserem Programm. Nun schaltet die _Zeichenmaschine_ in einen
|
||||
dynamischen Modus und startet die _Update-Draw-Schleife_. Das beduetet, nach
|
||||
Aufruf von `setup()` wird fortlaufend immer wieder zuerst `update()` und dann
|
||||
`draw()` aufgerufen.
|
||||
|
||||
Jeder Aufruf der `draw()` Methode zeichnet nun die Zeichenfläche neu. Jedes
|
||||
Bild, das gezeichnet wird (auch, wenn es genauso aussieht, wie das davor), nennt
|
||||
man ein _Frame_. Von Videospielen kennst Du vielleicht schon den Begriff "
|
||||
_Frames per second_" (Fps, dt. Bilder pro Sekunde). Er bedeutet, wie oft das
|
||||
Spiel neue Frames zeichnet, oder in der _Zeichenmaschine_, wie oft `draw()` pro
|
||||
Sekunde aufgerufen wird. Normalerweise passiert dies genau 60-mal pro Sekunde.
|
||||
|
||||
### Lebenszeit eines Kreises
|
||||
|
||||
Jeder Kreis soll drei Sekunden zu sehen sein. Daher fügen wir eine neue
|
||||
Objektvariable namens `moleTime` ein, die zunächst auf drei steht. Da wir auch
|
||||
Bruchteile von Skeunden abziehen wollen, wählen wir als Datentyp `double`:
|
||||
|
||||
```Java
|
||||
private double moleTime=3.0;
|
||||
```
|
||||
|
||||
Der Parameter `delta`, der `update()` Methode ist der Zeitraum in Sekunden, seit
|
||||
dem letzten Frame. Subtrahieren wir diesen Wert bei jedem Frame von `moleTime`,
|
||||
wird der Wert immer kleiner. Dann müssen wir nur noch prüfen, ob er kleiner Null
|
||||
ist und in dem Fall den Kreis auf eine neue Position springen lassen.
|
||||
|
||||
Die Größe des Kreises passen wir so an, dass der Anteil der vergangenen Zeit die
|
||||
Größe des Kreises bestimmt:
|
||||
|
||||
```Java
|
||||
drawing.circle(moleX,moleY,moleRadius*(moleTime/3.0));
|
||||
```
|
||||
|
||||
??? example "Quelltext"
|
||||
|
||||
```Java
|
||||
import schule.ngb.zm.Zeichenmaschine;
|
||||
|
||||
public class Shapes extends Zeichenmaschine {
|
||||
|
||||
private int moleRadius = 20;
|
||||
|
||||
private int moleX;
|
||||
|
||||
private int moleY;
|
||||
|
||||
private double moleTime;
|
||||
|
||||
public Shapes() {
|
||||
super(800, 800, "Shapes");
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setup() {
|
||||
background.setColor(BLUE);
|
||||
|
||||
drawing.setFillColor(255, 223, 34);
|
||||
drawing.noStroke();
|
||||
|
||||
randomizeMole();
|
||||
}
|
||||
|
||||
private void randomizeMole() {
|
||||
moleX = random(moleRadius*2, canvasWidth - moleRadius*2);
|
||||
moleY = random(moleRadius*2, canvasHeight - moleRadius*2);
|
||||
moleTime = 3.0;
|
||||
}
|
||||
|
||||
@Override
|
||||
public void update( double delta ) {
|
||||
moleTime -= delta;
|
||||
|
||||
if( moleTime <= 0 ) {
|
||||
randomizeMole();
|
||||
}
|
||||
}
|
||||
|
||||
@Override
|
||||
public void draw() {
|
||||
drawing.clear();
|
||||
drawing.circle(moleX, moleY, moleRadius * (moleTime / 3.0));
|
||||
}
|
||||
|
||||
@Override
|
||||
public void mouseClicked() {
|
||||
if( distance(moleX, moleY, mouseX, mouseY) < moleRadius ) {
|
||||
randomizeMole();
|
||||
redraw();
|
||||
}
|
||||
}
|
||||
|
||||
public static void main( String[] args ) {
|
||||
new Shapes();
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
<figure markdown>
|
||||
{ width=400 }
|
||||
</figure>
|
||||
|
||||
!!! tip ""
|
||||
|
||||
Der Maulwurf muss mittlerweile an drei verschiedenen Stellen im Programm
|
||||
auf eine zufällige Position gesetzt werden (am Anfang, wenn er angeklickt
|
||||
wurde und wenn die drei Sekunden abgelaufen sind). Daher wurde das Versetzen
|
||||
in eine eigene Methode `randomizeMole()` ausgelagert.
|
||||
|
||||
### Punktezähler
|
||||
|
||||
Zum Schluss wollen wir noch bei jedem Treffer mit der Maus die Punkte Zählen und
|
||||
als Text auf die Zeichenfläche schreiben.
|
||||
|
||||
Dazu ergänzen wir eine weitere Objektvariable `score`, die in `mouseClicked()`
|
||||
erhöht wird, falls der Kreis getroffen wurde.
|
||||
|
||||
Um den Punktestand anzuzeigen ergänzen wir in `draw()` einen Aufruf von
|
||||
{{ jdl('layers.DrawingLayer', 'text(java.lang.String,double,double,schule.ngb.zm.Options.Direction)') }}
|
||||
mit dem Inhalt von `score` und den Koordinaten, an denen der Text gezeigt
|
||||
werden soll.
|
||||
Die Zeichenebene zeichnet im Moment alle Formen und Text ausgehend vom Zentrum
|
||||
der Form. Damit der Text 10 Pixel vom Rand entfernt links oben angezeigt wird,
|
||||
können wir der Text Methode (und allen anderen, die etwas zeichnen) eine {{
|
||||
jdl('Options.Direction', title='Richtung') }} übergeben, die festlegt, von
|
||||
welchem Ausgangspunkt (oder _Ankerpunkt_) die Form gezeichnet werden soll.
|
||||
|
||||
```Java
|
||||
drawing.setFillColor(BLACK);
|
||||
drawing.text("Punkte: "+score,10,10,NORTHWEST);
|
||||
```
|
||||
|
||||
<figure markdown>
|
||||
{ width=400 }
|
||||
</figure>
|
||||
|
||||
??? example "Quelltext"
|
||||
|
||||
```Java
|
||||
import schule.ngb.zm.Zeichenmaschine;
|
||||
|
||||
public class Shapes extends Zeichenmaschine {
|
||||
|
||||
private int moleRadius = 20;
|
||||
|
||||
private int moleX;
|
||||
|
||||
private int moleY;
|
||||
|
||||
private double moleTime;
|
||||
|
||||
private int score = 0;
|
||||
|
||||
public Shapes() {
|
||||
super(800, 800, "Shapes");
|
||||
}
|
||||
|
||||
@Override
|
||||
public void setup() {
|
||||
background.setColor(BLUE);
|
||||
|
||||
drawing.noStroke();
|
||||
drawing.setFontSize(24);
|
||||
|
||||
randomizeMole();
|
||||
}
|
||||
|
||||
private void randomizeMole() {
|
||||
moleX = random(moleRadius*2, canvasWidth - moleRadius*2);
|
||||
moleY = random(moleRadius*2, canvasHeight - moleRadius*2);
|
||||
moleTime = 3.0;
|
||||
}
|
||||
|
||||
@Override
|
||||
public void update( double delta ) {
|
||||
moleTime -= delta;
|
||||
|
||||
if( moleTime <= 0 ) {
|
||||
randomizeMole();
|
||||
}
|
||||
}
|
||||
|
||||
@Override
|
||||
public void draw() {
|
||||
drawing.clear();
|
||||
|
||||
drawing.setFillColor(255, 223, 34);
|
||||
drawing.circle(moleX, moleY, moleRadius * (moleTime / 3.0));
|
||||
|
||||
drawing.setFillColor(BLACK);
|
||||
drawing.text("Punkte: " + score, 10, 10, NORTHWEST);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void mouseClicked() {
|
||||
if( distance(moleX, moleY, mouseX, mouseY) < moleRadius ) {
|
||||
score += 1;
|
||||
randomizeMole();
|
||||
redraw();
|
||||
}
|
||||
}
|
||||
|
||||
public static void main( String[] args ) {
|
||||
new Shapes();
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
## Wie es weitergehen kann
|
||||
|
||||
In diesem Schnellstart-Tutorial hast Du die Grundlagen der _Zeichenmaschine_
|
||||
gelernt. Um weiterzumachen, kannst Du versuchen, das Whack-a-mole Spiel um diese
|
||||
Funktionen zu erweitern:
|
||||
|
||||
- Mehrere "Maulwürfe" gleichzeitig.
|
||||
- Unterschiedliche Zeiten pro Maulwurf.
|
||||
|
||||
Wenn Du mehr über die Möglichkeiten lernen möchtest, die Dir die
|
||||
_Zeichenmaschine_ bereitstellt, kannst Du Dir die weiteren Tutorials in dieser
|
||||
Dokumentation ansehen. Ein guter Startpunkt ist das
|
||||
[Aquarium](tutorials/aquarium/aquarium1.md).
|
||||
|
||||
Viele verschiedene Beispiele, ohne detailliertes Tutorial, findest Du in der
|
||||
Kategorie Beispiele und auf GitHub im Repository
|
||||
[jneug/zeichenmaschine-examples](https://github.com/jneug/zeichenmaschine-examples).
|
||||
|
||||
19
docs/tutorials/aquarium/aquarium1.md
Normal file
19
docs/tutorials/aquarium/aquarium1.md
Normal file
@@ -0,0 +1,19 @@
|
||||
# Tutorial: Aquarium
|
||||
|
||||
In diesem Tutorial wollen wir mithilfe der _Zeichenmaschine_ ein (bonbonbuntes)
|
||||
interaktives Aquarium entwickeln. Dabei werden wir in verschiedenen Ausbaustufen
|
||||
zunächst das System Modellieren und dann implementieren.
|
||||
|
||||
!!! info "Mein bonbonbuntes Aquarium"
|
||||
|
||||
Das Projekt [Mein bonbonbuntes Aquarium](http://blog.schockwellenreiter.de/2021/02/2021021201.html)
|
||||
stammt ursprünglich aus dem Blog [Schockwellenreiter](http://blog.schockwellenreiter.de)
|
||||
von [Jörg Kantel](http://cognitiones.kantel-chaos-team.de/cv.html).
|
||||
|
||||
Das Endprodukt soll folgendes umfassen:
|
||||
|
||||
- Darstellung eines hübschen Aquariums mit Fischen, die hin und her schwimmen.
|
||||
- Zur Darstellung wollen wir wie im Original die Sprites aus dem [Fish Pack von Kenny.nl](https://www.kenney.nl/assets/fish-pack) nutzen.
|
||||
- Das Aquarium soll durch passende Geräusche untermalt werden.
|
||||
- Bei einem Klick in das Aquarium soll ein zufälliger Fisch erscheinen.
|
||||
- Bei einem Druck auf die Leertaste soll ein Hai durch das Aquarium schwimmen und alle Fische auf seinem Weg auffressen.
|
||||
11
mkdocs.yml
11
mkdocs.yml
@@ -40,6 +40,10 @@ nav:
|
||||
- Einführung: index.md
|
||||
- Schnellstart: quickstart.md
|
||||
- Installation: install.md
|
||||
- Tutorials:
|
||||
- Aquarium: tutorials/aquarium/aquarium1.md
|
||||
- Beispiele:
|
||||
- Mondrian: beispiele/mondrian.md
|
||||
|
||||
markdown_extensions:
|
||||
- admonition
|
||||
@@ -62,8 +66,11 @@ markdown_extensions:
|
||||
- pymdownx.inlinehilite
|
||||
- pymdownx.snippets
|
||||
- pymdownx.details
|
||||
- pymdownx.superfences
|
||||
|
||||
- pymdownx.superfences:
|
||||
custom_fences:
|
||||
- name: mermaid
|
||||
class: mermaid
|
||||
format: !!python/name:pymdownx.superfences.fence_code_format
|
||||
plugins:
|
||||
- search:
|
||||
lang: de
|
||||
|
||||
@@ -52,38 +52,67 @@ public class Color implements Paint {
|
||||
* Die Farbe Zeichenmaschinen-Rot.
|
||||
*/
|
||||
public static final Color RED = new Color(240, 80, 37);
|
||||
|
||||
/**
|
||||
* Die Farbe Rot.
|
||||
*/
|
||||
public static final Color PURE_RED = new Color(255, 0, 0);
|
||||
|
||||
/**
|
||||
* Die Farbe Zeichenmaschinen-Grün.
|
||||
*/
|
||||
public static final Color GREEN = new Color(98, 199, 119);
|
||||
|
||||
/**
|
||||
* Die Farbe Grün.
|
||||
*/
|
||||
public static final Color PURE_GREEN = new Color(0, 255, 0);
|
||||
|
||||
/**
|
||||
* Die Farbe Zeichenmaschinen-Blau.
|
||||
*/
|
||||
public static final Color BLUE = new Color(49, 197, 244);
|
||||
public static final Color BLUE = new Color(43, 128, 243); // 49, 197, 244
|
||||
|
||||
/**
|
||||
* Die Farbe Blau.
|
||||
*/
|
||||
public static final Color PURE_BLUE = new Color(0, 0, 255);
|
||||
|
||||
/**
|
||||
* Die Farbe Zeichenmaschinen-Gelb.
|
||||
*/
|
||||
public static final Color YELLOW = new Color(248, 239, 34);
|
||||
|
||||
/**
|
||||
* Die Farbe Gelb.
|
||||
*/
|
||||
public static final Color PURE_YELLOW = new Color(255, 255, 0);
|
||||
|
||||
/**
|
||||
* Die Farbe Zeichenmaschinen-Orange.
|
||||
*/
|
||||
public static final Color ORANGE = new Color(248, 158, 80);
|
||||
|
||||
/**
|
||||
* Die Farbe Zeichenmaschinen-Türkis.
|
||||
*/
|
||||
public static final Color CYAN = new Color(java.awt.Color.CYAN);
|
||||
|
||||
/**
|
||||
* Die Farbe Zeichenmaschinen-Magenta.
|
||||
*/
|
||||
public static final Color MAGENTA = new Color(java.awt.Color.MAGENTA);
|
||||
|
||||
/**
|
||||
* Die Farbe Zeichenmaschinen-Rosa.
|
||||
*/
|
||||
public static final Color PINK = new Color(240, 99, 164);
|
||||
|
||||
/**
|
||||
* Die Farbe Zeichenmaschinen-Lila.
|
||||
*/
|
||||
public static final Color PURPLE = new Color(101, 0, 191);
|
||||
|
||||
/**
|
||||
* Die Farbe Zeichenmaschinen-Braun.
|
||||
*/
|
||||
@@ -93,6 +122,7 @@ public class Color implements Paint {
|
||||
* Die Farbe Helmholtz-Grün.
|
||||
*/
|
||||
public static final Color HGGREEN = new Color(0, 165, 81);
|
||||
|
||||
/**
|
||||
* Die Farbe Helmholtz-Rot.
|
||||
*/
|
||||
@@ -272,10 +302,7 @@ public class Color implements Paint {
|
||||
color = color.toLowerCase().strip();
|
||||
|
||||
// Parse colornames file and return first match
|
||||
try(
|
||||
InputStream in = Color.class.getResourceAsStream("colornames.csv");
|
||||
BufferedReader reader = new BufferedReader(new InputStreamReader(in))
|
||||
) {
|
||||
try( InputStream in = Color.class.getResourceAsStream("colornames.csv"); BufferedReader reader = new BufferedReader(new InputStreamReader(in)) ) {
|
||||
String line;
|
||||
while( (line = reader.readLine()) != null ) {
|
||||
String[] parts = line.split(",");
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
package schule.ngb.zm;
|
||||
|
||||
import schule.ngb.zm.anim.Easing;
|
||||
import schule.ngb.zm.util.Validator;
|
||||
import schule.ngb.zm.util.io.ImageLoader;
|
||||
import schule.ngb.zm.util.Noise;
|
||||
|
||||
@@ -785,6 +786,30 @@ public class Constants {
|
||||
|
||||
// Mathematische Funktionen
|
||||
|
||||
/**
|
||||
* Berechnet das Minimum aller angegebenen Werte.
|
||||
*
|
||||
* <pre><code>
|
||||
* int minimum = min(1, 5, 3); // 1
|
||||
* </code></pre>
|
||||
*
|
||||
* @param numbers Die Werte, aus denen das Minimum ermittelt werden soll.
|
||||
* @return Das Minimum der Werte.
|
||||
* @throws IllegalArgumentException Wenn die Eingabe {@code null} oder leer
|
||||
* ist.
|
||||
*/
|
||||
public static final int min( int... numbers ) {
|
||||
if( numbers == null || numbers.length == 0 ) {
|
||||
throw new IllegalArgumentException("Array may not be <null> or empty.");
|
||||
}
|
||||
|
||||
int min = numbers[0];
|
||||
for( int i = 1; i < numbers.length; i++ ) {
|
||||
min = Math.min(min, numbers[i]);
|
||||
}
|
||||
return min;
|
||||
}
|
||||
|
||||
/**
|
||||
* Berechnet das Minimum aller angegebenen Werte.
|
||||
*
|
||||
@@ -809,6 +834,30 @@ public class Constants {
|
||||
return min;
|
||||
}
|
||||
|
||||
/**
|
||||
* Berechnet das Maximum aller angegebenen Werte.
|
||||
*
|
||||
* <pre><code>
|
||||
* double maximum = max(1, 5, 3); // 5
|
||||
* </code></pre>
|
||||
*
|
||||
* @param numbers Die Werte, aus denen das Maximum ermittelt werden soll.
|
||||
* @return Das Maximum der Werte.
|
||||
* @throws IllegalArgumentException Wenn die Eingabe {@code null} oder leer
|
||||
* ist.
|
||||
*/
|
||||
public static final int max( int... numbers ) {
|
||||
if( numbers == null || numbers.length == 0 ) {
|
||||
throw new IllegalArgumentException("Array may not be <null> or empty.");
|
||||
}
|
||||
|
||||
int max = numbers[0];
|
||||
for( int i = 1; i < numbers.length; i++ ) {
|
||||
max = Math.max(max, numbers[i]);
|
||||
}
|
||||
return max;
|
||||
}
|
||||
|
||||
/**
|
||||
* Berechnet das Maximum aller angegebenen Werte.
|
||||
*
|
||||
@@ -1204,6 +1253,12 @@ public class Constants {
|
||||
return interpolate(toMin, toMax, (value - fromMin) / (fromMax - fromMin));
|
||||
}
|
||||
|
||||
public static final double distance( double fromX, double fromY, double toX, double toY ) {
|
||||
double diffX = toX - fromX;
|
||||
double diffY = toY - fromY;
|
||||
return sqrt(diffX*diffX + diffY*diffY);
|
||||
}
|
||||
|
||||
/**
|
||||
* Geteilte {@code Random}-Instanz für einheitliche Zufallszahlen.
|
||||
*/
|
||||
@@ -1340,9 +1395,9 @@ public class Constants {
|
||||
* @param values Ein Array mit Werten, die zur Auswahl stehen.
|
||||
* @return Ein zufälliges Element aus dem Array.
|
||||
*/
|
||||
public static final int choice( int[] values ) {
|
||||
/*public static final int choice( int... values ) {
|
||||
return values[random(0, values.length - 1)];
|
||||
}
|
||||
}*/
|
||||
|
||||
/**
|
||||
* Wählt ein zufälliges Element aus dem Array aus.
|
||||
@@ -1350,9 +1405,9 @@ public class Constants {
|
||||
* @param values Ein Array mit Werten, die zur Auswahl stehen.
|
||||
* @return Ein zufälliges Element aus dem Array.
|
||||
*/
|
||||
public static final double choice( double[] values ) {
|
||||
/*public static final double choice( double... values ) {
|
||||
return values[random(0, values.length - 1)];
|
||||
}
|
||||
}*/
|
||||
|
||||
/**
|
||||
* Wählt ein zufälliges Element aus dem Array aus.
|
||||
@@ -1361,7 +1416,7 @@ public class Constants {
|
||||
* @param <T> Datentyp des Elements.
|
||||
* @return Ein zufälliges Element aus dem Array.
|
||||
*/
|
||||
public static final <T> T choice( T[] values ) {
|
||||
public static final <T> T choice( T... values ) {
|
||||
return values[random(0, values.length - 1)];
|
||||
}
|
||||
|
||||
|
||||
@@ -165,6 +165,9 @@ public abstract class Layer extends Constants implements Drawable, Updatable {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritDoc}
|
||||
*/
|
||||
@Override
|
||||
public boolean isVisible() {
|
||||
return visible;
|
||||
@@ -180,7 +183,7 @@ public abstract class Layer extends Constants implements Drawable, Updatable {
|
||||
/**
|
||||
* Zeigt die Ebene an, falls sie versteckt war.
|
||||
*/
|
||||
@SuppressWarnings("unused")
|
||||
@SuppressWarnings( "unused" )
|
||||
public void show() {
|
||||
visible = true;
|
||||
}
|
||||
@@ -189,18 +192,42 @@ public abstract class Layer extends Constants implements Drawable, Updatable {
|
||||
* Versteckt oder zeigt die Ebene, je nachdem, welchen Zustand sie derzeit
|
||||
* hat.
|
||||
*/
|
||||
@SuppressWarnings("unused")
|
||||
@SuppressWarnings( "unused" )
|
||||
public void toggle() {
|
||||
visible = !visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritDoc}
|
||||
*/
|
||||
@Override
|
||||
public void update( double delta ) {
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritDoc}
|
||||
*/
|
||||
@Override
|
||||
public boolean isActive() {
|
||||
return active;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prüft, ob die angegebenen Koordinaten innerhalb der Ebene liegen, oder
|
||||
* nicht.
|
||||
* <p>
|
||||
* Eine Koordinate liegt in der Ebene, wenn die {@code x}- und
|
||||
* {@code y}-Koordinaten größer oder gleich Null und kleiner als die Breite
|
||||
* bzw. Höhe der Ebene sind.
|
||||
*
|
||||
* @param x Die x-Koordinate.
|
||||
* @param y Die y-Koordinate.
|
||||
* @return {@code true}, wenn die Koordinaten innerhalb der Ebene liegen,
|
||||
* {@code false}, wenn sie außerhalb liegen.
|
||||
*/
|
||||
@SuppressWarnings( "unused" )
|
||||
public boolean isInBounds( int x, int y ) {
|
||||
return (x >= 0 && y >= 0 && x < getWidth() && y < getHeight());
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1447,14 +1447,19 @@ public class Zeichenmaschine extends Constants {
|
||||
Thread.yield();
|
||||
}
|
||||
updateThreadExecutor.shutdownNow();
|
||||
try {
|
||||
updateThreadExecutor.awaitTermination(500, TimeUnit.MILLISECONDS);
|
||||
} catch( InterruptedException ex ) {
|
||||
|
||||
// Cleanup
|
||||
shutdown();
|
||||
cleanup();
|
||||
state = Options.AppState.TERMINATED;
|
||||
} finally {
|
||||
// Cleanup
|
||||
shutdown();
|
||||
cleanup();
|
||||
state = Options.AppState.TERMINATED;
|
||||
|
||||
if( quitAfterShutdown ) {
|
||||
quit();
|
||||
if( quitAfterShutdown ) {
|
||||
quit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -67,16 +67,14 @@ public class ColorLayer extends Layer {
|
||||
}
|
||||
|
||||
/**
|
||||
* Gibt die Hintergrundfarbe der Ebene zurück.
|
||||
*
|
||||
* @return Die aktuelle Hintergrundfarbe.
|
||||
* @return Die aktuelle Hintergrundfarbe der Ebene.
|
||||
*/
|
||||
public Color getColor() {
|
||||
return color;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die Farbe der Ebene neu.
|
||||
* Setzt die Farbe der Ebene auf die angegebene Farbe.
|
||||
*
|
||||
* @param color Die neue Hintergrundfarbe.
|
||||
*/
|
||||
@@ -86,22 +84,69 @@ public class ColorLayer extends Layer {
|
||||
clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die Farbe der Ebene auf einen Grauwert mit der angegebenen
|
||||
* Intensität. 0 entspricht schwarz, 255 entspricht weiß.
|
||||
*
|
||||
* @param gray Ein Grauwert zwischen 0 und 255.
|
||||
* @see Color#Color(int)
|
||||
*/
|
||||
public void setColor( int gray ) {
|
||||
setColor(gray, gray, gray, 255);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die Farbe der Ebene auf einen Grauwert mit der angegebenen
|
||||
* Intensität und dem angegebenen Transparenzwert. Der Grauwert 0 entspricht
|
||||
* schwarz, 255 entspricht weiß.
|
||||
*
|
||||
* @param gray Ein Grauwert zwischen 0 und 255.
|
||||
* @param alpha Ein Transparenzwert zwischen 0 und 255.
|
||||
* @see Color#Color(int, int)
|
||||
*/
|
||||
public void setColor( int gray, int alpha ) {
|
||||
setColor(gray, gray, gray, alpha);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die Farbe der Ebene auf die Farbe mit den angegebenen Rot-, Grün-
|
||||
* und Blauanteilen.
|
||||
*
|
||||
* @param red Der Rotanteil der Farbe zwischen 0 und 255.
|
||||
* @param green Der Grünanteil der Farbe zwischen 0 und 255.
|
||||
* @param blue Der Blauanteil der Farbe zwischen 0 und 255.
|
||||
* @see Color#Color(int, int, int)
|
||||
* @see <a
|
||||
* href="https://de.wikipedia.org/wiki/RGB-Farbraum">https://de.wikipedia.org/wiki/RGB-Farbraum</a>
|
||||
*/
|
||||
public void setColor( int red, int green, int blue ) {
|
||||
setColor(red, green, blue, 255);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die Farbe der Ebene auf die Farbe mit den angegebenen Rot-, Grün-
|
||||
* und Blauanteilen und dem angegebenen Transparenzwert.
|
||||
*
|
||||
* @param red Der Rotanteil der Farbe zwischen 0 und 255.
|
||||
* @param green Der Grünanteil der Farbe zwischen 0 und 255.
|
||||
* @param blue Der Blauanteil der Farbe zwischen 0 und 255.
|
||||
* @param alpha Ein Transparenzwert zwischen 0 und 25
|
||||
* @see Color#Color(int, int, int, int)
|
||||
* @see <a
|
||||
* href="https://de.wikipedia.org/wiki/RGB-Farbraum">https://de.wikipedia.org/wiki/RGB-Farbraum</a>
|
||||
*/
|
||||
public void setColor( int red, int green, int blue, int alpha ) {
|
||||
setColor(new Color(red, green, blue, alpha));
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die Füllung der Ebene auf einen linearen Farbverlauf, der in die
|
||||
* angegebene Richtung verläuft.
|
||||
*
|
||||
* @param from Farbe am Startpunkt.
|
||||
* @param to Farbe am Endpunkt.
|
||||
* @param dir Richtung des Farbverlaufs.
|
||||
*/
|
||||
public void setGradient( Color from, Color to, Options.Direction dir ) {
|
||||
double halfW = getWidth() * .5;
|
||||
double halfH = getHeight() * .5;
|
||||
@@ -116,6 +161,18 @@ public class ColorLayer extends Layer {
|
||||
setGradient(fromX, fromY, from, toX, toY, to);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die Füllung der Ebene auf einen linearen Farbverlauf, der am Punkt
|
||||
* ({@code fromX}, {@code fromY}) mit der Farbe {@code from} startet und am
|
||||
* Punkt (({@code toX}, {@code toY}) mit der Farbe {@code to} endet.
|
||||
*
|
||||
* @param fromX x-Koordinate des Startpunktes.
|
||||
* @param fromY y-Koordinate des Startpunktes.
|
||||
* @param from Farbe am Startpunkt.
|
||||
* @param toX x-Koordinate des Endpunktes.
|
||||
* @param toY y-Koordinate des Endpunktes.
|
||||
* @param to Farbe am Endpunkt.
|
||||
*/
|
||||
public void setGradient( double fromX, double fromY, Color from, double toX, double toY, Color to ) {
|
||||
this.color = from;
|
||||
background = new GradientPaint(
|
||||
@@ -125,10 +182,30 @@ public class ColorLayer extends Layer {
|
||||
clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die Füllung der Ebene auf einen kreisförmigen (radialen)
|
||||
* Farbverlauf, der im Zentrum beginnt.
|
||||
*
|
||||
* @param from Farbe im Zentrum.
|
||||
* @param to Farbe am Rand.
|
||||
*/
|
||||
public void setGradient( Color from, Color to ) {
|
||||
setGradient(getWidth() * .5, getHeight() * .5, Math.min(getWidth() * .5, getHeight() * .5), from, to);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die Füllung der Ebene auf einen kreisförmigen (radialen)
|
||||
* Farbverlauf, mit dem Zentrum im Punkt ({@code centerX}, {@code centerY})
|
||||
* und dem angegebenen Radius. Der Verlauf starte im Zentrum mit der Farbe
|
||||
* {@code from} und endet am Rand des durch den Radius beschriebenen Kreises
|
||||
* mit der Farbe {@code to}.
|
||||
*
|
||||
* @param centerX x-Koordinate des Kreismittelpunktes.
|
||||
* @param centerY y-Koordinate des Kreismittelpunktes.
|
||||
* @param radius Radius des Kreises.
|
||||
* @param from Farbe im Zentrum des Kreises.
|
||||
* @param to Farbe am Rand des Kreises.
|
||||
*/
|
||||
public void setGradient( double centerX, double centerY, double radius, Color from, Color to ) {
|
||||
this.color = from;
|
||||
background = new RadialGradientPaint(
|
||||
@@ -138,6 +215,9 @@ public class ColorLayer extends Layer {
|
||||
clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet den Hintergrund der Ebene mit der gesetzten Füllung neu.
|
||||
*/
|
||||
@Override
|
||||
public void clear() {
|
||||
drawing.setPaint(background);
|
||||
|
||||
@@ -254,12 +254,18 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
}
|
||||
|
||||
/**
|
||||
* Entfernt den Farbverlauf von der Form.
|
||||
* Entfernt einen Farbverlauf von der Füllung.
|
||||
*/
|
||||
public void noGradient() {
|
||||
shapeDelegate.noGradient();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt den Linienstil für Konturlinien direkt auf das angegebene
|
||||
* {@code Stroke}-Objekt.
|
||||
*
|
||||
* @param stroke Ein {@code Stroke}-Objekt.
|
||||
*/
|
||||
@Override
|
||||
public void setStroke( Stroke stroke ) {
|
||||
shapeDelegate.setStroke(stroke);
|
||||
@@ -412,62 +418,159 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
shapeDelegate.setStrokeType(type);
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritDoc}
|
||||
*/
|
||||
@Override
|
||||
public Stroke getStroke() {
|
||||
return shapeDelegate.getStroke();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt den Standard-ANker für die Zeichenebene auf die angegebene
|
||||
* Richtung.
|
||||
* <p>
|
||||
* Zu Beginn ist der Standardanker immer auf
|
||||
* {@link Options.Direction#CENTER CENTER} gesetzt. Alle Formen werden von
|
||||
* der Mitte aus gezeichnet. Wir der Anker mit {@code setAnchor(NORTHWEST)}
|
||||
* beispielsweise auf {@link Options.Direction#NORTHWEST NORTHWEST} gesetzt,
|
||||
* werden alle Formen von der linken oberen Ecke aus gezeichnet.
|
||||
*
|
||||
* @param anchor Der neue Anker.
|
||||
*/
|
||||
public void setAnchor( Options.Direction anchor ) {
|
||||
shapeDelegate.setAnchor(anchor);
|
||||
}
|
||||
|
||||
/**
|
||||
* Übermalt die komplette Ebene mit einem Grauwert mit der angegebenen
|
||||
* Intensität. 0 entspricht schwarz, 255 entspricht weiß.
|
||||
*
|
||||
* @param gray Ein Grauwert zwischen 0 und 255.
|
||||
* @see Color#Color(int)
|
||||
*/
|
||||
public void clear( int gray ) {
|
||||
clear(gray, gray, gray, 255);
|
||||
}
|
||||
|
||||
/**
|
||||
* Übermalt die komplette Ebene mit einem Grauwert mit der angegebenen
|
||||
* Intensität und dem angegebenen Transparenzwert. Der Grauwert 0 entspricht
|
||||
* schwarz, 255 entspricht weiß.
|
||||
*
|
||||
* @param gray Ein Grauwert zwischen 0 und 255.
|
||||
* @param alpha Ein Transparenzwert zwischen 0 und 255.
|
||||
* @see Color#Color(int, int)
|
||||
*/
|
||||
public void clear( int gray, int alpha ) {
|
||||
clear(gray, gray, gray, alpha);
|
||||
}
|
||||
|
||||
/**
|
||||
* Übermalt die komplette Ebene mit der Farbe mit den angegebenen Rot-,
|
||||
* Grün- und Blauanteilen.
|
||||
*
|
||||
* @param red Der Rotanteil der Farbe zwischen 0 und 255.
|
||||
* @param green Der Grünanteil der Farbe zwischen 0 und 255.
|
||||
* @param blue Der Blauanteil der Farbe zwischen 0 und 255.
|
||||
* @see Color#Color(int, int, int)
|
||||
* @see <a
|
||||
* href="https://de.wikipedia.org/wiki/RGB-Farbraum">https://de.wikipedia.org/wiki/RGB-Farbraum</a>
|
||||
*/
|
||||
public void clear( int red, int green, int blue ) {
|
||||
clear(red, green, blue, 255);
|
||||
}
|
||||
|
||||
/**
|
||||
* Übermalt die komplette Ebene mit der Farbe mit den angegebenen Rot-,
|
||||
* Grün- und Blauanteilen und dem angegebenen Transparenzwert.
|
||||
*
|
||||
* @param red Der Rotanteil der Farbe zwischen 0 und 255.
|
||||
* @param green Der Grünanteil der Farbe zwischen 0 und 255.
|
||||
* @param blue Der Blauanteil der Farbe zwischen 0 und 255.
|
||||
* @param alpha Ein Transparenzwert zwischen 0 und 25
|
||||
* @see Color#Color(int, int, int, int)
|
||||
* @see <a
|
||||
* href="https://de.wikipedia.org/wiki/RGB-Farbraum">https://de.wikipedia.org/wiki/RGB-Farbraum</a>
|
||||
*/
|
||||
public void clear( int red, int green, int blue, int alpha ) {
|
||||
clear(new schule.ngb.zm.Color(red, green, blue, alpha));
|
||||
}
|
||||
|
||||
public void clear( schule.ngb.zm.Color pColor ) {
|
||||
/**
|
||||
* Übermalt die komplette Ebene mit der angegebenen Farbe.
|
||||
*
|
||||
* @param color Die neue Füllfarbe oder {@code null}.
|
||||
* @see Color
|
||||
*/
|
||||
public void clear( schule.ngb.zm.Color color ) {
|
||||
/*graphics.setBackground(pColor);
|
||||
graphics.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());*/
|
||||
java.awt.Color currentColor = drawing.getColor();
|
||||
pushMatrix();
|
||||
resetMatrix();
|
||||
drawing.setColor(pColor.getJavaColor());
|
||||
drawing.setColor(color.getJavaColor());
|
||||
drawing.fillRect(0, 0, buffer.getWidth(), buffer.getHeight());
|
||||
drawing.setColor(currentColor);
|
||||
popMatrix();
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet eine gerade Line zwischen den angegebenen Koordinaten.
|
||||
*
|
||||
* @param x1 Die x-Koordinate des Startpunktes.
|
||||
* @param y1 Die y-Koordinate des Startpunktes.
|
||||
* @param x2 Die x-Koordinate des Endpunktes.
|
||||
* @param y2 Die y-Koordinate des Endpunktes.
|
||||
*/
|
||||
public void line( double x1, double y1, double x2, double y2 ) {
|
||||
line.setLine(x1, y1, x2, y2);
|
||||
drawShape(line);
|
||||
}
|
||||
|
||||
/**
|
||||
* Färbt den Pixel an der angegebenen Koordinate ein.
|
||||
*
|
||||
* @param x Die x-Koordinate.
|
||||
* @param y Die y-Koordinate.
|
||||
*/
|
||||
public void pixel( double x, double y ) {
|
||||
buffer.setRGB((int) x, (int) y, shapeDelegate.getFontColor().getRGBA());
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet ein Quadrat an den angegebenen Koordinaten mit der angegebenen
|
||||
* Kantenlänge in die Zeichenebene.
|
||||
* <p>
|
||||
* Als Ankerpunkt wird der Standardanker verwendet.
|
||||
*
|
||||
* @param x Die x-Koordinate des Ankerpunktes.
|
||||
* @param y Die y-Koordinate des Ankerpunktes.
|
||||
* @param w Die Kantenlänge des Quadrats.
|
||||
* @see #square(double, double, double, Options.Direction)
|
||||
*/
|
||||
public void square( double x, double y, double w ) {
|
||||
rect(x, y, w, w, shapeDelegate.getAnchor());
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet ein Quadrat an den angegebenen Koordinaten mit der angegebenen
|
||||
* Kantenlänge und dem angegebenen Ankerpunkt in die Zeichenebene.
|
||||
*
|
||||
* @param x Die x-Koordinate des Ankerpunktes.
|
||||
* @param y Die y-Koordinate des Ankerpunktes.
|
||||
* @param w Die Kantenlänge des Quadrats.
|
||||
* @see #square(double, double, double, Options.Direction)
|
||||
*/
|
||||
public void square( double x, double y, double w, Options.Direction anchor ) {
|
||||
rect(x, y, w, w, anchor);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet ein Rechteck in die Zeichenebene.
|
||||
* Zeichnet ein Rechteck an den angegebenen Koordinaten mit der angegebenen
|
||||
* Breite und Höhe in die Zeichenebene.
|
||||
* <p>
|
||||
* Als Ankerpunkt wird der Standardanker verwendet.
|
||||
*
|
||||
* @param x x-Koordinate des Rechtecks.
|
||||
* @param y y-Koordinate des Rechtecks.
|
||||
@@ -479,7 +582,8 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet ein Rechteck mit in die Zeichenebene.
|
||||
* Zeichnet ein Rechteck an den angegebenen Koordinaten mit der angegebenen
|
||||
* Breite und Höhe und dem angegebenen Ankerpunkt in die Zeichenebene.
|
||||
*
|
||||
* @param x x-Koordinate des Rechtecks.
|
||||
* @param y y-Koordinate des Rechtecks.
|
||||
@@ -495,7 +599,8 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet ein Rechteck mit abgerundeten Ecken in die Zeichenebene.
|
||||
* Zeichnet ein Rechteck mit abgerundeten Ecken an den angegebenen
|
||||
* Koordinaten mit der angegebenen Breite und Höhe in die Zeichenebene.
|
||||
* <p>
|
||||
* Jede Ecke wird als Viertelkreis eines Kreises mit dem Radius
|
||||
* {@code radius} gezeichnet.
|
||||
@@ -511,7 +616,9 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet ein Rechteck mit abgerundeten Ecken in die Zeichenebene.
|
||||
* Zeichnet ein Rechteck mit abgerundeten Ecken an den angegebenen
|
||||
* Koordinaten mit der angegebenen Breite und Höhe und dem angegebenen
|
||||
* Ankerpunkt in die Zeichenebene.
|
||||
* <p>
|
||||
* Jede Ecke wird als Viertelkreis eines Kreises mit dem Radius
|
||||
* {@code radius} gezeichnet.
|
||||
@@ -530,22 +637,64 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
drawShape(rect);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet einen Punkt in die Zeichenebene.
|
||||
* <p>
|
||||
* Im Gegensatz zu einem {@link #pixel(double, double) Pixel}, besitzt ein
|
||||
* Punkt einen Radius und nimmt mehr als ein Pixel auf der Ebene ein.
|
||||
*
|
||||
* @param x x-Koordinate des Punktes.
|
||||
* @param y y-Koordinate des Punktes.
|
||||
*/
|
||||
public void point( double x, double y ) {
|
||||
ellipse(x - 1, y - 1, 2, 2, shapeDelegate.getAnchor());
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet einen Kreis an den angegebenen Koordinaten mit dem angegebenen
|
||||
* Radius.
|
||||
*
|
||||
* @param x
|
||||
* @param y
|
||||
* @param r
|
||||
*/
|
||||
public void circle( double x, double y, double r ) {
|
||||
ellipse(x, y, r + r, r + r, shapeDelegate.getAnchor());
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet einen Kreis an den angegebenen Koordinaten mit dem angegebenen
|
||||
* Radius und dem angegebenen Ankerpunkt.
|
||||
*
|
||||
* @param x
|
||||
* @param y
|
||||
* @param r
|
||||
*/
|
||||
public void circle( double x, double y, double r, Options.Direction anchor ) {
|
||||
ellipse(x, y, r + r, r + r, anchor);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet eine Ellipse in die Zeichenebene.
|
||||
*
|
||||
* @param x
|
||||
* @param y
|
||||
* @param w
|
||||
* @param h
|
||||
*/
|
||||
public void ellipse( double x, double y, double w, double h ) {
|
||||
ellipse(x, y, w, h, shapeDelegate.getAnchor());
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet eine Ellipse in die Zeichenebene.
|
||||
*
|
||||
* @param x
|
||||
* @param y
|
||||
* @param w
|
||||
* @param h
|
||||
* @param anchor
|
||||
*/
|
||||
public void ellipse( double x, double y, double w, double h, Options.Direction anchor ) {
|
||||
Point2D.Double anchorPoint = getOriginPoint(x, y, w, h, anchor);
|
||||
ellipse.setFrame(anchorPoint.x, anchorPoint.y, w, h);
|
||||
@@ -553,10 +702,35 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
drawShape(ellipse);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet einen Kreisbogen in die Zeichenebene.
|
||||
* <p>
|
||||
* Der Kreisbogen liegt auf einem Kreis mit dem angegebenen Radius, beginnt
|
||||
* beim angegebenen Winkel und läuft bis zum zweiten Winkel.
|
||||
*
|
||||
* @param x
|
||||
* @param y
|
||||
* @param r
|
||||
* @param angle1
|
||||
* @param angle2
|
||||
*/
|
||||
public void arc( double x, double y, double r, double angle1, double angle2 ) {
|
||||
arc(x, y, r + r, r + r, angle1, angle2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet einen Ellipsenbogen in die Zeichenebene.
|
||||
* <p>
|
||||
* Der Ellipsenbogen liegt auf einer Ellipse mit der angegebenen Breite und
|
||||
* Höhe, beginnt beim angegebenen Winkel und läuft bis zum zweiten Winkel.
|
||||
*
|
||||
* @param x
|
||||
* @param y
|
||||
* @param w
|
||||
* @param h
|
||||
* @param angle1
|
||||
* @param angle2
|
||||
*/
|
||||
public void arc( double x, double y, double w, double h, double angle1, double angle2 ) {
|
||||
while( angle2 < angle1 ) angle2 += 360.0;
|
||||
|
||||
@@ -572,6 +746,15 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
drawShape(arc);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet einen Kreisausschnitt in die Zeichenebene.
|
||||
*
|
||||
* @param x
|
||||
* @param y
|
||||
* @param r
|
||||
* @param angle1
|
||||
* @param angle2
|
||||
*/
|
||||
public void pie( double x, double y, double r, double angle1, double angle2 ) {
|
||||
while( angle2 < angle1 ) angle2 += 360.0;
|
||||
|
||||
@@ -589,16 +772,50 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
drawShape(arc);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet eine quadratische Bézierkurve mit den angegebenen Start- und
|
||||
* Endkoordinaten, sowie dem angegebenen Kontrollpunkt.
|
||||
*
|
||||
* @param x1
|
||||
* @param y1
|
||||
* @param x2
|
||||
* @param y2
|
||||
* @param x3
|
||||
* @param y3
|
||||
*/
|
||||
public void curve( double x1, double y1, double x2, double y2, double x3, double y3 ) {
|
||||
QuadCurve2D curve = new QuadCurve2D.Double(x1, y1, x2, y2, x3, y3);
|
||||
drawShape(curve);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet eine kubische Bézierkurve mit den angegebenen Start- und
|
||||
* Endkoordinaten, sowie den angegebenen Kontrollpunkten.
|
||||
*
|
||||
* @param x1
|
||||
* @param y1
|
||||
* @param x2
|
||||
* @param y2
|
||||
* @param x3
|
||||
* @param y3
|
||||
* @param x4
|
||||
* @param y4
|
||||
*/
|
||||
public void curve( double x1, double y1, double x2, double y2, double x3, double y3, double x4, double y4 ) {
|
||||
CubicCurve2D curve = new CubicCurve2D.Double(x1, y1, x2, y2, x3, y3, x4, y4);
|
||||
drawShape(curve);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet ein Dreieck mit den angegebenen Eckpunkten in die Zeichenebene.
|
||||
*
|
||||
* @param x1
|
||||
* @param y1
|
||||
* @param x2
|
||||
* @param y2
|
||||
* @param x3
|
||||
* @param y3
|
||||
*/
|
||||
public void triangle( double x1, double y1, double x2, double y2, double x3, double y3 ) {
|
||||
Path2D path = new Path2D.Double();
|
||||
path.moveTo(x1, y1);
|
||||
@@ -610,6 +827,14 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
drawShape(path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet einen Rhombus in die Zeichenebene.
|
||||
*
|
||||
* @param x
|
||||
* @param y
|
||||
* @param width
|
||||
* @param height
|
||||
*/
|
||||
public void rhombus( double x, double y, double width, double height ) {
|
||||
rhombus(x, y, width, height, shapeDelegate.getAnchor());
|
||||
}
|
||||
@@ -677,11 +902,24 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Startet eine neue Freihand-Form.
|
||||
*/
|
||||
public void beginShape() {
|
||||
path.reset();
|
||||
pathStarted = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fügt einer zuvor {@link #beginShape() begonnenen} Freihand-Form eine
|
||||
* Linie zu den angegebenen Koordinaten hinzu.
|
||||
* <p>
|
||||
* Wurde seit dem Start der Form noch keine Linie hinzugefügt, wird zunächst
|
||||
* nur die angegebene Koordinate als Startpunkt der Freihand-Form gesetzt.
|
||||
*
|
||||
* @param x Die x-Koordinate.
|
||||
* @param y Die y-Koordinate.
|
||||
*/
|
||||
public void lineTo( double x, double y ) {
|
||||
if( !pathStarted ) {
|
||||
path.moveTo(x, y);
|
||||
@@ -691,6 +929,10 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Beendet eine zuvor {@link #beginShape() begonnene} Freihand-Form und
|
||||
* zeichent sie auf die Zeichenebene.
|
||||
*/
|
||||
public void endShape() {
|
||||
path.closePath();
|
||||
path.trimToSize();
|
||||
@@ -700,30 +942,88 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
drawShape(path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet das Bild von der angegebenen Quelle an der angegebenen Position
|
||||
* auf dei Zeichenebene.
|
||||
* <p>
|
||||
* Die Bildquelle wird mithilfe von {@link ImageLoader#loadImage(String)}
|
||||
* geladen. Schlägt dies fehl, wird nichts gezeichnet.
|
||||
*
|
||||
* @param imageSource Die Bildquelle.
|
||||
* @param x x-Koordinate des Ankerpunktes.
|
||||
* @param y y-Koordinate des Ankerpunktes.
|
||||
*/
|
||||
public void image( String imageSource, double x, double y ) {
|
||||
image(ImageLoader.loadImage(imageSource), x, y, 1.0, shapeDelegate.getAnchor());
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet das Bild von der angegebenen Quelle an der angegebenen Position
|
||||
* auf dei Zeichenebene.
|
||||
* <p>
|
||||
* Die Bildquelle wird mithilfe von {@link ImageLoader#loadImage(String)}
|
||||
* geladen. Schlägt dies fehl, wird nichts gezeichnet.
|
||||
*
|
||||
* @param imageSource Die Bildquelle.
|
||||
* @param x x-Koordinate des Ankerpunktes.
|
||||
* @param y y-Koordinate des Ankerpunktes.
|
||||
* @param anchor
|
||||
*/
|
||||
public void image( String imageSource, double x, double y, Options.Direction anchor ) {
|
||||
image(ImageLoader.loadImage(imageSource), x, y, 1.0, anchor);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param imageSource
|
||||
* @param x
|
||||
* @param y
|
||||
* @param scale
|
||||
*/
|
||||
public void image( String imageSource, double x, double y, double scale ) {
|
||||
image(ImageLoader.loadImage(imageSource), x, y, scale, shapeDelegate.getAnchor());
|
||||
}
|
||||
|
||||
/**
|
||||
* @param imageSource
|
||||
* @param x
|
||||
* @param y
|
||||
* @param scale
|
||||
* @param anchor
|
||||
*/
|
||||
public void image( String imageSource, double x, double y, double scale, Options.Direction anchor ) {
|
||||
image(ImageLoader.loadImage(imageSource), x, y, scale, anchor);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param image
|
||||
* @param x
|
||||
* @param y
|
||||
*/
|
||||
public void image( Image image, double x, double y ) {
|
||||
image(image, x, y, 1.0, shapeDelegate.getAnchor());
|
||||
}
|
||||
|
||||
/**
|
||||
* @param image
|
||||
* @param x
|
||||
* @param y
|
||||
* @param scale
|
||||
*/
|
||||
public void image( Image image, double x, double y, double scale ) {
|
||||
image(image, x, y, scale, shapeDelegate.getAnchor());
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeichnet das angegebene Bild an den angegebenen Koordinaten auf die
|
||||
* Zeichenebene. Das Bild wird skaliert und der angegebene Ankerpunkt
|
||||
* verwendet.
|
||||
*
|
||||
* @param image Das vorher geladene Bild.
|
||||
* @param x x-Koordinate des Ankerpunktes.
|
||||
* @param y y-Koordinate des Ankerpunktes.
|
||||
* @param scale Der Skalierungsfaktor des Bildes.
|
||||
* @param anchor Der Ankerpunkt.
|
||||
*/
|
||||
public void image( Image image, double x, double y, double scale, Options.Direction anchor ) {
|
||||
if( image != null ) {
|
||||
double neww = image.getWidth(null) * scale;
|
||||
@@ -733,39 +1033,111 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Git aktuelle verwendete Schriftart.
|
||||
*/
|
||||
public Font getFont() {
|
||||
return shapeDelegate.getFont();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die verwendete Schriftart für Texte direkt auf das angegebene
|
||||
* {@code Font}-Objekt.
|
||||
*
|
||||
* @param newFont Ein {@code Font}-Objekt.
|
||||
*/
|
||||
public void setFont( Font newFont ) {
|
||||
shapeDelegate.setFont(newFont);
|
||||
// fontMetrics = drawing.getFontMetrics();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die verwendete Schriftart für Texte auf eine Schriftart mit dem
|
||||
* angegebenen Namen.
|
||||
* <p>
|
||||
* Kann keine Schriftart mit einem passenden Namen geladen werden, wird die
|
||||
* Schriftart nicht geändert.
|
||||
*
|
||||
* @param fontName Der Name der Schriftart.
|
||||
* @see schule.ngb.zm.util.io.FontLoader#loadFont(String)
|
||||
*/
|
||||
public void setFont( String fontName ) {
|
||||
shapeDelegate.setFont(fontName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die verwendete Schriftart für Texte auf eine Schriftart mit dem
|
||||
* angegebenen Namen und der angegebenen Schriftgröße.
|
||||
* <p>
|
||||
* Kann keine Schriftart mit einem passenden Namen geladen werden, wird die
|
||||
* Schriftart nicht geändert.
|
||||
*
|
||||
* @param fontName Der Name der Schriftart.
|
||||
* @param size Die Schriftgröße.
|
||||
* @see schule.ngb.zm.util.io.FontLoader#loadFont(String)
|
||||
*/
|
||||
public void setFont( String fontName, int size ) {
|
||||
shapeDelegate.setFont(fontName, size);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die verwendete Schriftart für Texte auf eine Schriftart mit dem
|
||||
* angegebenen Namen, der angegebenen Schriftgröße und dem angegebenen
|
||||
* Schriftstil.
|
||||
* <p>
|
||||
* Der Schriftstil kann über die Stil-Konstanten
|
||||
* {@link schule.ngb.zm.Constants#PLAIN PLAIN},
|
||||
* {@link schule.ngb.zm.Constants#BOLD BOLD} und
|
||||
* {@link schule.ngb.zm.Constants#ITALIC ITALIC} gesetzt werden.
|
||||
* <p>
|
||||
* Kann keine Schriftart mit einem passenden Namen geladen werden, wird die
|
||||
* Schriftart nicht geändert.
|
||||
*
|
||||
* @param fontName Der Name der Schriftart.
|
||||
* @param size Die Schriftgröße.
|
||||
* @param style Der Schriftstil.
|
||||
* @see schule.ngb.zm.util.io.FontLoader#loadFont(String)
|
||||
*/
|
||||
public void setFont( String fontName, int size, int style ) {
|
||||
shapeDelegate.setFont(fontName, size, style);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Die aktuelle Schriftgröße für Texte.
|
||||
*/
|
||||
public double getFontSize() {
|
||||
return shapeDelegate.getFontSize();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt die Schriftgörße für Texte auf den angegebenen Wert.
|
||||
*
|
||||
* @param size Die neue Schriftgröße.
|
||||
*/
|
||||
public void setFontSize( double size ) {
|
||||
shapeDelegate.setFontSize(size);
|
||||
}
|
||||
|
||||
/**
|
||||
* Schreibt einen Text an der angegebenen Position auf die Zeichenebene.
|
||||
*
|
||||
* @param text Der zu schreibende Text.
|
||||
* @param x Die x-Koordinate des Ankerpunktes.
|
||||
* @param y Die y-Koordinate des Ankerpunktes.
|
||||
*/
|
||||
public void text( String text, double x, double y ) {
|
||||
text(text, x, y, shapeDelegate.getAnchor());
|
||||
}
|
||||
|
||||
/**
|
||||
* Schreibt einen Text an der angegebenen Position auf die Zeichenebene und
|
||||
* nutzt den angegebenen Ankerpunkt.
|
||||
*
|
||||
* @param text Der zu schreibende Text.
|
||||
* @param x Die x-Koordinate des Ankerpunktes.
|
||||
* @param y Die y-Koordinate des Ankerpunktes.
|
||||
* @param anchor Position des Ankerpunktes.
|
||||
*/
|
||||
public void text( String text, double x, double y, Options.Direction anchor ) {
|
||||
drawing.setFont(shapeDelegate.getFont());
|
||||
FontMetrics fm = drawing.getFontMetrics();
|
||||
@@ -782,7 +1154,7 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
* Koordinaten {@code (300, 300)} und den Abmessungen {@code (100, 50)}
|
||||
* würde für den Anker {@link Options.Direction#NORTHWEST} also den Ursprung
|
||||
* {@code (300, 300)} haben. Für den Anker {@link Options.Direction#CENTER}
|
||||
* wäre der Ursprung zu den Koordinaten um die hälfte der Abmessungen nach
|
||||
* wäre der Ursprung zu den Koordinaten um die Hälfte der Abmessungen nach
|
||||
* links und oben verschoben bei {@code (250, 275)}. Beim Zeichnen liegen
|
||||
* die Koordinaten {@code (300, 300)} dann in der Mitte der Form.
|
||||
*
|
||||
@@ -800,11 +1172,20 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
return ap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Speichert die aktuellen Einstellungen für Farben, Konturlinie und
|
||||
* Schriftarten ab, sodass sie zu einem späteren Zeitpunkt mit
|
||||
* {@link #popStyle()} wiederhergestellt werden können.
|
||||
*/
|
||||
public void pushStyle() {
|
||||
styleStack.push(shapeDelegate);
|
||||
shapeDelegate = new Text(shapeDelegate);
|
||||
}
|
||||
|
||||
/**
|
||||
* Stellt die zuletzt mit {@link #pushStyle()} gespeicherten Einstellungen
|
||||
* für Farben, Konturlinien und Texte wieder her.
|
||||
*/
|
||||
public void popStyle() {
|
||||
if( styleStack.isEmpty() ) {
|
||||
resetStyle();
|
||||
@@ -813,6 +1194,10 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt alle Einstellungen für Farben, Konturlinien und Texte auf die
|
||||
* Standardwerte.
|
||||
*/
|
||||
public void resetStyle() {
|
||||
Text newDelegate = new Text(0, 0, "");
|
||||
newDelegate.setFillColor(DEFAULT_FILLCOLOR);
|
||||
@@ -823,34 +1208,92 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
shapeDelegate = newDelegate;
|
||||
}
|
||||
|
||||
/**
|
||||
* Verschiebt den Ursprung der Zeichenebene um die angegebenen Werte entlang
|
||||
* der x- und y-Achse.
|
||||
*
|
||||
* @param dx Verschiebung entlang der x-Achse.
|
||||
* @param dy Verschiebung entlang der y-Achse.
|
||||
*/
|
||||
public void translate( double dx, double dy ) {
|
||||
drawing.translate(dx, dy);
|
||||
}
|
||||
|
||||
/**
|
||||
* Skaliert die Zeichenebene um den angegebenen Faktor.
|
||||
* <p>
|
||||
* Ein Abstand von zehn Einheiten wird bei einem Faktor von 2.0 zu einem
|
||||
* Abstand von 20 Einheiten. Bei einem Faktor von 0.5 zu fünf Einheiten.
|
||||
* <p>
|
||||
* Der Skalierungsfaktor wird entlang der x- und y-Achse gleich angewandt.
|
||||
*
|
||||
* @param factor Der Skalierungsfaktor.
|
||||
*/
|
||||
public void scale( double factor ) {
|
||||
drawing.scale(factor, factor);
|
||||
}
|
||||
|
||||
/**
|
||||
* Rotiert die Zeichenebene um den angegebenen Winkel um den Ursprung.
|
||||
*
|
||||
* @param pAngle Rotationswinkel in Grad.
|
||||
*/
|
||||
public void rotate( double pAngle ) {
|
||||
drawing.rotate(Math.toRadians(pAngle));
|
||||
}
|
||||
|
||||
/**
|
||||
* Rotiert die Zeichenebene um den angegebenen Winkel um das angegebene
|
||||
* Drehzentrum.
|
||||
*
|
||||
* @param pAngle Rotationswinkel in Grad.
|
||||
* @param centerX x-Koordinate des Rotationszentrums.
|
||||
* @param centerY y-Koordinate des Rotationszentrums.
|
||||
*/
|
||||
public void rotate( double pAngle, double centerX, double centerY ) {
|
||||
drawing.rotate(Math.toRadians(pAngle), centerX, centerY);
|
||||
}
|
||||
|
||||
/**
|
||||
* Wendet eine Scherung auf die Zeichenebene an.
|
||||
* <p>
|
||||
* Bei einer Scherung werden die x-Koordinaten parallel zur x-Achse abhängig
|
||||
* von ihrer y-Koordinate verschoben. Ebenso die y-Koordinaten parallel zur
|
||||
* y-Achse abhängig von ihrer x-Koordinate.
|
||||
*
|
||||
* @param dx Scherungsfaktor entlang der x-Achse.
|
||||
* @param dy Scherungsfaktor entlang der y-Achse.
|
||||
*/
|
||||
public void shear( double dx, double dy ) {
|
||||
drawing.shear(dx, dy);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Die aktuelle <a
|
||||
* href="https://de.wikibrief.org/wiki/Transformation_matrix">Transformationsmatrix</a>
|
||||
* der Zeichenebene.
|
||||
*/
|
||||
public AffineTransform getMatrix() {
|
||||
return drawing.getTransform();
|
||||
}
|
||||
|
||||
/**
|
||||
* Speichert eine Kopie der aktuellen Transformationen der Zeichenebene ab.
|
||||
* <p>
|
||||
* Die zuletzt gespeicherten Transformationen können mit
|
||||
* {@link #popMatrix()} wiederhergestellt werden.
|
||||
*/
|
||||
public void pushMatrix() {
|
||||
transformStack.push(drawing.getTransform());
|
||||
}
|
||||
|
||||
/**
|
||||
* Ersetzt die aktuellen Transformationen der Zeichenebene durch die zuletzt
|
||||
* mit {@link #pushMatrix()} gespeicherten.
|
||||
* <p>
|
||||
* Wurden keine Transformationen gespeichert, werden alle wird der
|
||||
* Ursprungszustand wiederhergestellt.
|
||||
*/
|
||||
public void popMatrix() {
|
||||
if( transformStack.isEmpty() ) {
|
||||
resetMatrix();
|
||||
@@ -859,6 +1302,9 @@ public class DrawingLayer extends Layer implements Strokeable, Fillable {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt alle Transformationen der Zeichenebene zurück.
|
||||
*/
|
||||
public void resetMatrix() {
|
||||
drawing.setTransform(new AffineTransform());
|
||||
}
|
||||
|
||||
@@ -6,17 +6,41 @@ import schule.ngb.zm.util.io.ImageLoader;
|
||||
import java.awt.Graphics2D;
|
||||
import java.awt.Image;
|
||||
|
||||
/**
|
||||
* Eine Ebene, die ein statisches Bild anzeigt.
|
||||
* <p>
|
||||
* Die Ebene wird mit einem Bild initialisiert und zeigt dieses Bild als
|
||||
* einzigen Inhalt an. Optional kann die Position des Bildes verändert werden,
|
||||
* sodass es nicht im Ursprung der Ebene gezeichnet wird.
|
||||
*/
|
||||
@SuppressWarnings( "unused" )
|
||||
public class ImageLayer extends Layer {
|
||||
|
||||
/**
|
||||
* Das Bild, das angezeigt wird.
|
||||
*/
|
||||
protected Image image;
|
||||
|
||||
/**
|
||||
* x-Koordinate der oberen linken Ecke auf der Ebene.
|
||||
*/
|
||||
protected double x = 0;
|
||||
|
||||
/**
|
||||
* y-Koordinate der oberen linken Ecke auf der Ebene.
|
||||
*/
|
||||
protected double y = 0;
|
||||
|
||||
/**
|
||||
* Interner Schalter, ob die Ebene neu gezeichnet werden muss.
|
||||
*/
|
||||
protected boolean redraw = true;
|
||||
|
||||
/**
|
||||
* Erstellt eine Bildebene aus der angegebenen Bildquelle.
|
||||
*
|
||||
* @param source Eine Bildquelle.
|
||||
*/
|
||||
public ImageLayer( String source ) {
|
||||
image = ImageLoader.loadImage(source);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user