XI: Computer Programming

Be an editor

For computer programming, the most important thing is to understand what’s the meaning of your codes. If you don’t know their meaning, your website will become a mess. For me, I try something easy with p5 to learn how to be an editor.

Canvas

function setup() {
  createCanvas(40, 40);
}
function draw() {
  background(22);
}

In this program, it means that I gonna create a canvas whose height and width are both 40. The number in the function of background is describing the color of the canvas. As you see, “22” means that the color you see will be black.

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
}

As you’ve already seen in the last image, the parameter in the creatCanvas function mean height & width And the number in the background function means color. In this image, I make some modifications with all of them. Firstly, I change the height and width to 400 and 400. At the same time, I change the parameter describing the color to 220, which is gray as you can see from the image.

function setup() {
  createCanvas(4000, 4000);
}
function draw() {
  background(2200);
}

Now you must be familiar about what’s the meaning of every argument in the function of the program. So I make some more “brave” modification. You can see that all the arguments become 10 times as they were in the last image, which is a exponential increase. As a result, everything you see on the right side of this image is all white. Because my setting defines that there will be a huge area in white.

Slogan

function setup() {
  createCanvas(500, 500);
  background(200);
}

function draw() {
  fill(255,100,100);
  text("Hola digital fabrication!", 100,100)
}

In this image, the arguments in the creatCanvas and background functions just have the same meanings as I’ve just written. You can see that the programming is more complicated this time since we need to describe more things.

For the fill function, it describes the color of the words shown on your website–slogan. In this time, the programming to describe the color becomes RGB format. RGB are the three primary colors: Red, Green, and Blue. As a result, in this time, you are a painter right now. You need to find the coordination between this three colors to create the color you want.

For the text function, the first argument is very direct: you can just put your slogan inside it. The second and the third argument is describing the position of the slogan in the canvas: x and y position.

Bar Graph

If you are learning or going to learn AP Statistics, I bet that this program will really help you because it can make a bar graph for you, which must be better than the one in your TI-84 or TI-Nspire.

function setup() {
	createCanvas(500, 500);
	fill(255,0,0);
	rect(0, 0, 260, 50);
	text('Dogs - 260', 0, 75);
	fill(0,255,0);
	rect(0, 100, 300, 50);
	text('Cats - 300', 0, 175);
	fill(0,0,255);
	rect(0, 200, 100, 50);
	text('Hamsters - 100', 0, 275);
	fill(200,100,0);
	rect(0, 300, 50, 50);
	text('Rabbits - 50', 0, 375);
	fill(0,200,200);
	rect(0, 400, 10, 50);
	text('Spiders - 10', 0, 475);
}

In this image, there is a new function–rect. As you can see from the shapes in the image, rect means create a rectangle. The first two arguments in this function describes the x and y positions of the rectangle. The third and forth argument respectively describe the length and width of the rectangle. For our bar graph, every bar has the same width–50.

Addition & Summary

If you want to leanr the processing and p5 JavaScript, visit this WEBSITE!

If you want to be an editor and test your program, WEB EDITOR is for you.

In this internet era, computer science is becoming more and more popular. No matter in the university or in the job, knowing something about CS seems to be basic requirement for everybody, especially the people learning science or working in science circle. As a result, this is a great lesson for us to start our learning about computer programming. It will help us get a really important skill.