Schnellstart Tutorial fertig
This commit is contained in:
parent
90e043e5f8
commit
03945e029a
|
|
@ -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": {}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 411 KiB |
|
|
@ -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": {}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 821 KiB |
|
|
@ -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": {}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
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,27 +1,29 @@
|
|||
# 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 {
|
||||
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
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 {
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
```
|
||||
???+ example "Quelltext"
|
||||
|
||||
Nun haben wir einen gelben Kreis (ohne Konturlinie) auf einem blauen Hintergrund
|
||||
gezeichnet.
|
||||
```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);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Wir sehen einen gelben Kreis (ohne Konturlinie) auf einem blauen Hintergrund.
|
||||
|
||||
<figure markdown>
|
||||
{ width=400 }
|
||||
|
|
@ -83,40 +91,44 @@ 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
|
||||
Im Beispiel setzen wir nun die Grundeinstellungen in der `setup()` Methode. In
|
||||
`draw()` werden zehn gelbe Kreise an Zufallskoordinaten gezeichnet.
|
||||
|
||||
<figure markdown>
|
||||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue