Flags with Methods - Revision history

Andr3w: /* China */

2023-06-28T10:09:35Z

China

← Older revision		Revision as of 10:09, 28 June 2023
Line 166:		Line 166:
	star(10,2.24,58.3);		star(10,2.24,58.3);

	You can reuse the function star from the earlier tutorial [[Flags with Stars]]		You can reuse the function <code>star</code> from the earlier tutorial [[Flags with Stars]]

	[[Image:flagchina.png\|left\|frame\|China]]		[[Image:flagchina.png\|left\|frame\|China]]

Andr3w: /* China */

2023-06-28T10:08:46Z

China

← Older revision		Revision as of 10:08, 28 June 2023
Line 166:		Line 166:
	star(10,2.24,58.3);		star(10,2.24,58.3);

	You can reuse the function star from the earlier tutorial [[~~Flags_with_Stars~~]]		You can reuse the function star from the earlier tutorial [[Flags with Stars]]

	[[Image:flagchina.png\|left\|frame\|China]]		[[Image:flagchina.png\|left\|frame\|China]]

Andr3w: /* China */

2023-06-28T10:08:26Z

China

← Older revision		Revision as of 10:08, 28 June 2023
Line 166:		Line 166:
	star(10,2.24,58.3);		star(10,2.24,58.3);

	You can reuse the function star from the earlier tutorial [Flags_with_Stars]		You can reuse the function star from the earlier tutorial [[Flags_with_Stars]]

	[[Image:flagchina.png\|left\|frame\|China]]		[[Image:flagchina.png\|left\|frame\|China]]

Andr3w: /* China */

2023-06-28T10:08:15Z

China

← Older revision		Revision as of 10:08, 28 June 2023
Line 165:		Line 165:
	star(10,1.85,72.8);		star(10,1.85,72.8);
	star(10,2.24,58.3);		star(10,2.24,58.3);

			You can reuse the function star from the earlier tutorial [Flags_with_Stars]

	[[Image:flagchina.png\|left\|frame\|China]]		[[Image:flagchina.png\|left\|frame\|China]]
Line 198:		Line 200:
	</pre>		</pre>
	</div>		</div>


	== United States ==		== United States ==

Andr3w at 09:24, 26 September 2021

2021-09-26T09:24:27Z

← Older revision		Revision as of 09:24, 26 September 2021
Line 1:		Line 1:
	<pre id='shellbody' data-qtp='canvas'></pre>		<pre id='shellbody' data-qtp='canvas'></pre>
			<htmltag tagname="video" src="videos/flags_with_methods.mp4" width="400px" controls ></htmltag>

	== Three colours ==		== Three colours ==

Andr3w: /* United States */

2021-09-24T10:14:20Z

United States

← Older revision		Revision as of 10:14, 24 September 2021
Line 205:		Line 205:
	*Radius of star: 5		*Radius of star: 5
	*Horizontal grid offset: 8		*Horizontal grid offset: 8
	*Vertical grid offset: 7		*Vertical grid offset: 7

	[[Image:flagusa.png\|left\|frame\|Stars and Stripes]]		[[Image:flagusa.png\|left\|frame\|Stars and Stripes]]

Andr3w: /* United States */

2021-09-24T10:12:45Z

United States

← Older revision		Revision as of 10:12, 24 September 2021
Line 210:		Line 210:
	<pre class=usr>		<pre class=usr>
	function drawFlag(ctx){		function drawFlag(ctx){
	}		let w = 246;
	</~~pre>~~		let h = 130;
	~~<pre class~~=~~ans>~~		let stripe = 13;
	~~function drawFlag~~(ctx){		for(let i=0;i<stripe;i++){
	function star(~~radius~~,~~angle~~,~~distance~~){		ctx.fillStyle = ['red','white'][i%2];
	~~ctx.rotate~~(~~angle~~);		ctx.fillRect(0,i*h/stripe,w,h/stripe);
	ctx.translate(0,~~-distance~~);		}
	ctx.scale(~~radius~~/100,~~-radius~~/100);		ctx.fillStyle='blue';
			let xoff = 8;
			let yoff = 7;
			ctx.fillRect(0,0,6xoff2,5yoff2);
			ctx.fillStyle = 'white';
			ctx.translate(xoff,yoff);
			starGrid(6,5);
			ctx.translate(xoff,yoff);
			starGrid(5,4);

			function starGrid(x,y){
			for(let i=0;i<x;i++){
			for(let j=0;j<y;j++){
			star(i2xoff,j2yoff,5);
			}
			}
			}

			function star(x,y,r)
			{
			ctx.translate(x,y);
			ctx.scale(r/100.0,r/100.0);
	ctx.beginPath();		ctx.beginPath();
	[[0,-100],[22,-31],[95,-31],[36,12],[59,81],		[[0,-100],[22,-31],[95,-31],[36,12],[59,81],
	[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]		[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
	.forEach((xy)=>ctx.lineTo(xy[0],xy[1]));		.forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
	ctx.fill();		ctx.fill();
	ctx.scale(100/~~radius~~,-100/~~radius~~);		ctx.scale(100.0/r,100.0/r);
	ctx.translate(0,~~distance);~~		ctx.translate(-x,-y);
	~~ctx.rotate(~~-~~angle~~);
	}		}
	~~ctx.fillStyle = 'red';~~
	~~ctx.fillRect(0,0,300,200);~~
	~~ctx.fillStyle = 'gold';~~
	~~ctx.translate(50,50);~~
	~~star(30,3.14,0);~~
	~~star(10,1.03,58.3);~~
	~~star(10,1.42,70.7);~~
	~~star(10,1.85,72.8);~~
	~~star(10,2.24,58.3);~~
	}		}
	</pre>		</pre>
	</div>		</div>

Andr3w: /* China */

2021-09-24T09:49:58Z

China

@@ Line 166: / Line 166: @@
 [[Image:flagchina.png|left|frame|China]]
 <pre class=usr>
 function drawFlag(ctx){

Andr3w: /* China */

2021-09-11T06:50:36Z

China

← Older revision		Revision as of 06:50, 11 September 2021
Line 155:		Line 155:
	The flag of China requires 5 stars with a variety of size, orientation and distance from a fixed point.		The flag of China requires 5 stars with a variety of size, orientation and distance from a fixed point.
	* The whole flag is 300 by 200		* The whole flag is 300 by 200
			* The big star is at (50,50) it has radius 30
			* Each smaller star has radius 10
			* Each smaller star is at a different distance with a different angle

	star(30,3.14,0); // Radius 30, angle 3.14, distance 0		star(30,3.14,0); // Radius 30, angle 3.14, distance 0

Andr3w: /* China */

2021-09-11T06:47:31Z

China

← Older revision		Revision as of 06:47, 11 September 2021
Line 156:		Line 156:
	* The whole flag is 300 by 200		* The whole flag is 300 by 200

	star(30,3.14,0); // Radius 50, angle 3.14, distance 0		star(30,3.14,0); // Radius 30, angle 3.14, distance 0
	star(10,1.03,58.3); // Radius 10, angle 1.03, distance 58.3		star(10,1.03,58.3); // Radius 10, angle 1.03, distance 58.3
	star(10,1.42,70.7);		star(10,1.42,70.7);