Flags with Rectangles - Revision history

Andr3w at 21:33, 28 August 2023

2023-08-28T21:33:15Z

2023-07-09T16:46:49Z

Movement in Squares

2023-07-09T16:44:46Z

Movement in Squares

2023-07-09T16:44:05Z

Movement in Squares

← Older revision		Revision as of 16:44, 9 July 2023
Line 3:		Line 3:

	<div class='qu' data-width="240" data-height="240">		<div class='qu' data-width="240" data-height="240">
			For each of the first 16 columns the width is 90% of the previous. This pattern is reversed for the remainder. There are 31 columns.
	<pre class='usr'>		<pre class='usr'>
	function drawFlag(ctx)		function drawFlag(ctx)
Line 20:		Line 21:
	function drawFlag(ctx)		function drawFlag(ctx)
	{		{
	ctx.fillStyle = '~~green~~';		ctx.fillStyle = 'white';
	ctx.fillRect(0,0,~~150~~,~~100~~);		ctx.fillRect(0,0,240,240);
			ctx.fillStyle = 'black';
			let a = 0;
			let w = 240/12;
			for(let x=0;x<31;x++){
			for(let y=0;y<12;y++){
			if ((x+y)%2==1){
			ctx.fillRect(a,240*y/12,w,240/12);
			}
			}
			if (x<16){
			w *= 0.9;
			}else{
			w *= 1/0.9;
			}
			a += w;
			}
	}		}
	</pre>		</pre>
	</div>		</div>

2023-07-09T16:32:55Z

@@ Line 1: / Line 1: @@
 <pre id='shellbody' data-qtp='canvas'></pre>
-You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin|Flag of Benin]]
+==Movement in Squares==
-==Libya==
+<div class='qu' data-width="240" data-height="240">
 <pre class='usr'>
 function drawFlag(ctx)
+{
-   ctx.fillStyle = 'green';
+   ctx.fillStyle = 'white';
-   ctx.fillRect(0,0,75,100);
+   ctx.fillRect(0,0,240,240);
+}
 </pre>
@@ Line 23: / Line 23: @@
    ctx.fillRect(0,0,150,100);
+}
 </pre>
 </div>

2021-09-12T05:52:44Z

← Older revision		Revision as of 05:52, 12 September 2021
Line 1:		Line 1:
	<pre id='shellbody' data-qtp='canvas'></pre>		<pre id='shellbody' data-qtp='canvas'></pre>
	You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin\|Flag of Benin]]		You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin\|Flag of Benin]]
			*You will need to use the method [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect fillRect]
			*You will need to use the property [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle fillStyle]

	==Libya==		==Libya==
Line 7:		Line 9:
	The flag of Libya, until 2011, was a simple green rectangle.		The flag of Libya, until 2011, was a simple green rectangle.
	Try the program as it is given, then change it so that the green rectangle is 150 wide.		Try the program as it is given, then change it so that the green rectangle is 150 wide.
	*You will need to use the method [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect fillRect]
	*You will need to use the property [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle fillStyle]
	[[Image:flaglibya.png\|border]]		[[Image:flaglibya.png\|border]]
	<pre class='usr'>		<pre class='usr'>

2021-09-12T05:52:10Z

Libya

← Older revision		Revision as of 05:52, 12 September 2021
Line 7:		Line 7:
	The flag of Libya, until 2011, was a simple green rectangle.		The flag of Libya, until 2011, was a simple green rectangle.
	Try the program as it is given, then change it so that the green rectangle is 150 wide.		Try the program as it is given, then change it so that the green rectangle is 150 wide.
			*You will need to use the method [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect fillRect]
			*You will need to use the property [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle fillStyle]
	[[Image:flaglibya.png\|border]]		[[Image:flaglibya.png\|border]]
	<pre class='usr'>		<pre class='usr'>

2021-09-04T17:30:54Z

← Older revision		Revision as of 17:30, 4 September 2021
Line 1:		Line 1:
	<pre id='shellbody' data-qtp='canvas'></pre>		<pre id='shellbody' data-qtp='canvas'></pre>
	You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin\|Flag of Benin]~~] [https://napier.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=40d77c01-abda-4333-805a-ad8800e8f121 Benin Video~~]		You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin\|Flag of Benin]]

	==Libya==		==Libya==

2021-09-04T11:38:34Z

← Older revision		Revision as of 11:38, 4 September 2021
Line 1:		Line 1:
	<pre id='shellbody' data-qtp='canvas'></pre>		<pre id='shellbody' data-qtp='canvas'></pre>
	You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin\|Flag of Benin]]		You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin\|Flag of Benin]] [https://napier.cloud.panopto.eu/Panopto/Pages/Viewer.aspx?id=40d77c01-abda-4333-805a-ad8800e8f121 Benin Video]

	==Libya==		==Libya==

	<div class='qu' data-width="150" data-height="100">		<div class='qu' data-width="150" data-height="100">
	The flag of Libya, until 2011, was a simple green rectangle.		The flag of Libya, until 2011, was a simple green rectangle.

	Try the program as it is given, then change it so that the green rectangle is 150 wide.		Try the program as it is given, then change it so that the green rectangle is 150 wide.

2021-08-18T14:20:55Z

← Older revision		Revision as of 14:20, 18 August 2021
Line 1:		Line 1:
	<pre id='shellbody' data-qtp='canvas'></pre>		<pre id='shellbody' data-qtp='canvas'></pre>
	You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin]]		You can dive right in and start programming - or you can watch this worked example: [[Worked example Benin\|Flag of Benin]]
	==Libya==		==Libya==