Hour Of Code

For the last weeks we have been working on a project called ¨one hour of drawing with code¨. This project is from Khan Academy, here we learn how to draw with code.This guide took a lot of time (much hours of work), but at the end the hole class could achive the chllenges of the guide and finished the guide. Khan Academy is a great Website were yo can learn how to code and others subjects. I will show a few of my works that i do with khan academy during this week.




This image show the many different scripts you have to create an image. Professionals can do with this scripts very cool things. 




(I use the image from the post from Ignacio)


This challenge for me was the best and more fun to do. This image was created only with codes!
I have more ideas but i mus to keep going with the work.

This is the code from the Snowman
//background
background(0, 191, 255);
noStroke();
//ground
fill(205, 206, 207);
rect(-2, 240, 402, 278);
//sun
fill(251, 255, 0);
ellipse(63, 73, 100, 100);
strokeWeight(1);
//simple snowman
fill(252, 249, 249);
ellipse(200, 300, 150, 150);
ellipse(200, 200, 100, 100);
ellipse(200, 120, 75, 75);
//arms
strokeWeight(10);
stroke(145, 42, 7);
line(238, 198, 295, 110);
line(162, 198, 102, 110);
//hat
strokeWeight(7);
stroke(3, 3, 3);
line(239, 96, 158, 96);
fill(0, 0, 0);
rect(176, 96, 46, -49);
//nose
strokeWeight(7);
stroke(252, 136, 3);
line(200, 132, 234, 132);
line(200, 127, 234, 132);
//eyes
fill(3, 3, 3);
stroke(0, 0, 0);
ellipse(185, 112, 2, 2);
ellipse(214, 112, 2, 2);
//bottons
fill(3, 3, 3);
stroke(0, 0, 0);
strokeWeight(5);
ellipse(200, 270, 12, 12);
strokeWeight(4);
ellipse(200, 230, 9, 9);
strokeWeight(3);
ellipse(200, 190, 6, 6);



To end with... this a video to learn for what is Khan Academy:

Using Khan Academy

HOUR OF DRAWING WHIT CODE

For the last weeks we have been working on a project called ¨one hour of drawing with code¨. This project is from Khan Academy, a website that our teacher showed us. In this post I want to explain a bit how it feels working with Khan Academy, in the way of having fun or being bored. I will also show some of my works, which they are scripts to créate and image. I will also explain some important concepts releated whit this work.

This image show the many different scripts you have to create an image. My work is not as complex as the one that a professional can do. But I think this is not difficult you just need to like this kind of things and be imaginative.

One very good thing that Khan Academy has is , that they give you points for especificas challenges. This makes you want more and more points, and maybe crease like a friendly competition between your friends. Which can make someone have very good fun.

This is one of my projects called Super Snowman wchich I thing it was the best one, because is the one I had more creative ideas. The following image is the one that comes from the scripts that are written down after this image. It looks much more difficult that what it is.

//background
background(0, 191, 255);
noStroke();
//ground
fill(205, 206, 207);
rect(-2, 240, 402, 278);
//sun
fill(251, 255, 0);
ellipse(63, 73, 100, 100);
strokeWeight(1);
//simple snowman
fill(252, 249, 249);
ellipse(200, 300, 150, 150);
ellipse(200, 200, 100, 100);
ellipse(200, 120, 75, 75);
//arms
strokeWeight(10);
stroke(145, 42, 7);
line(238, 198, 295, 110);
line(162, 198, 102, 110);
//hat
strokeWeight(7);
stroke(3, 3, 3);
line(239, 96, 158, 96);
fill(0, 0, 0);
rect(176, 96, 46, -49);
//nose
strokeWeight(7);
stroke(252, 136, 3);
line(200, 132, 234, 132);
line(200, 127, 234, 132);
//eyes
fill(3, 3, 3);
stroke(0, 0, 0);
ellipse(185, 112, 2, 2);
ellipse(214, 112, 2, 2);
//bottons
fill(3, 3, 3);
stroke(0, 0, 0);
strokeWeight(5);
ellipse(200, 270, 12, 12);
strokeWeight(4);
ellipse(200, 230, 9, 9);
strokeWeight(3);
ellipse(200, 190, 6, 6);

Hour of code: My experience

During approximately a week we`ve been working with Khan Academy and it`s programming course "Hour of code". I`ve completed the hole course and it`s 3 ending projects. It has been quite an experience that I think was very fullfilling to me, especially because it made me realise of some of the issues proffesionals like game designers face while working on their own projects. It made me also appreciate more how and why some changes and decisions are taken in said games. Plus, it was quite a fun experience. I`ll be showing some of my work in the challenges that the course handed to me, in addition to one of my projects.

This is an example of the different challenges that the work guide handed to us 

Some of the concepts that we "dealt with" at doing these work on class, would totally appear in an in-development game. For example, the code algorithms must be in order, just like in a normal algorithm, for the to work properly. And just like algorithms, code has the need of being optimised, because if you do it incorrectly, you could end up with double the lines. Other concept that I widely used, was that of the convergent and divergent thinking, because as in everythiing, ideas are needed, but refining those ideas is as (or more) important. 

This one of the projects that we wre asked to do at the end.

During the experience, sometimes Khan Academy would hand in some badges, as a price for an action done. They serve mainly as an incentive to keep going, and not drop it off. You also gain Energy points too. They serve as another reward system, which are handed away depending on your activity in a lesson. Although they drop down after a while.

This is a picture of a part of my profile, showcasing my badges and Energy points.

''Hour of drawing with code''

In many lessons of this subject the hole class were working in a guide. This guide had challenges, projects, teachings, and more. The main topic/objective of this guide was to learn how to draw with code. This guide took a lot of time (much hours of work), but at the end the hole class could achive the chllenges of the guide and finished the guide. Kahn Academy is a very good website to study/learn about computing, biology and more. I recomend it if you want to learn something, but only for the beginning. The topic of this Blog would be the hole guide.

_____________________________________________________________________________

This is a challenge that I could achieve during this guide, some challenges were more difficult than others, but this was a good way to improve what we have learned in these hours of class. It was a good way to practise for a future, so we can do easlier the projects that we have to do in the future. In general challanges are a good way to improve what you know, but this post is more specific for this, so I will not talk a lot about things in general.

This is the code of the drawing, of one of the challenges:




ellipse (200, 300, 150, 150 );

ellipse (200, 220, 100, 100 );


ellipse (200, 150, 75, 75 );



This is the drawing, of the same challenge:

(this was a very easy and simple challenge)

_____________________________________________________________________________

This is project that I had to do during this guide, for me this was the most difficult project that I had to do during this guide. Finally I could finish it, but it took a lot of time. Projects are for me a good and funny way to learn, and this can make that students study or do something else with more enthusiasm.

This is the code of the project:



noStroke();
background (75, 104, 173);

// sun
fill (251, 255, 0);
ellipse (50, 50, 80, 80);

// igloo
fill (255, 255, 255);
ellipse (75, 300, 270, 270);
fill (67, 68, 102);
ellipse ( 75, 300, 100, 100);

// ice floor

// water
fill (40, 195, 212);
rect (0, 350, 401, 50);

// ice
fill (181, 255, 244);
rect (0, 300, 400, 50);

// simple penguin

// arms
fill (0, 0, 0);
triangle (90, 170, 180, 200, 180, 250);
triangle (220, 190, 170, 280, 310, 170);

// body
fill(0, 0, 0);
ellipse(200, 230, 120, 140);
fill (255, 255, 255);
ellipse (200, 230, 100, 120);

// head
fill(0, 0, 0);
ellipse(200, 140, 70, 69);
fill (255, 255, 255);
ellipse ( 200, 140, 50, 50);
fill (0, 0, 0);
ellipse (190, 135, 7, 7);
ellipse (210, 135, 7, 7);
fill (255, 187, 0);
triangle (190, 145, 210, 145, 200, 160);

// feet
fill (255, 187, 0);
triangle (150, 300, 190, 300, 170, 280);

triangle (210, 300, 250, 300, 230, 280);



This is the final Drawing/Project:

________________________________________________________________

They are many concepts that we saw in class related to this guide of Khan Academy. One of them is the concept of Algorithm. This is completely related to that. For example: an algorithm has to follow a strict orden of instructions, and this experience of drawing with code had to followed it too. Other two very important concepts are the Divergent and Convergent thinking. I had to use them a lot because I had to think in ideas for making the project, related to them, and I had to see, which were more important.

________________________________________________________________

During this guide they gave us badges and energy points. This was a reward system, we can win them doing things well and faster, and good at the same time. This gaves more enthusiasm and we wanted to still doing it and win more energy points and badges.

My energy points:

My badges:

________________________________________________________________
To end with... this a video to learn for what is Khan Academy:



_____________________________________________________________________________

 The last week we have been working a lot on a page called Khan Academy. Its a page about programming. Yes programming sounds a littel scary but actually it was very simple. The page work like this. There were different challenges we need to do , and for each chanllenge you get points for it. Before each challege there is a video explaining who to do several things that after you have to do it on your own. There were also documents that explain it to give you more information , that was great so you could understand the topic very good.The challenges were dreawing some stuff with  some codes . After compleating several challenges you have to do 3 different projects. For one procejt you have to draw a self-portrait for other a wild animal and for the other a snowman. For have a perfect project you have to use all the concepts you learn in the challanges. 

Challenge: Waving Snowmann

rect(0,326,404,71);
ellipse(200, 300, 150, 150);
ellipse(200, 200, 100, 100);
ellipse(200, 120, 75, 75);
line(160,200,92,100);
line(240,200,306,100);

Project: Super Snowmann 

background(21, 132, 217);
// The ground

fill(25, 232, 56);
rect(0, 300, 400, 100); 

// The sun
fill(255, 251, 0);
ellipse(80, 64, 100, 100);
// simple snowman
fill(202, 235, 252);
ellipse(200, 300, 150, 150);
ellipse(200, 200, 100, 100);
ellipse(200, 120, 75, 75);

//arms

line(163,200,94,134);
line(240,200,306,134);

//eyes
fill(255, 0, 255);
ellipse(185,108,11,12);
ellipse(215,108,11,12);
//mouth
fill(255, 0, 0);
ellipse(200,139,32,4);

//nose

fill(232, 151, 30);
triangle(145,128,201,130,200,117);

//hat
strokeWeight(7);
line(243,94,155,91);
fill(15, 9, 9);
rect(164,32,70,55);
//points
fill(204, 20, 207);
strokeWeight(7);
point(200, 195);
strokeWeight(5);
point(200,176);
strokeWeight(9);
point(200,217);



For drawing this amazing project we need codes . A code is what we use to draw this different figures. For exaple if you want to draw a rectangle you write rect(coordinates); and the you have your rectangle. With out the (;) it wont draw your figure because its like it is not confirm your code. In case you forgot to write it, it will apeare a poster talling you.

If you want to add a littel color to your drawing is actually really simple. You just have to write the right code that we use to color things. The code is fill(3coorfinates); and you have your color. If you change the coordinates your color will change. The color code have to been witen before the figure code , if not it wont appear the color on your shape.

For each challenge and project you get points and when you have a certain amount of point you get badges. Thats actually really great becuase it cause you want to do more challenge so you can earn the points. I have got 13000 points and 7 badges I am really happy about it because I do have a lot of pionts , thats why I did everything and I did not skip any step. With the point you can also change you avatar. 

So hire is a simple video tutorial about who to create a simple snowmann on Khan Academy. Hope you enjoy it 

My experience with "Hour of code"

Welcome back! For the last week and a bit I've been working on the Khan Academy's hour of code. It's not my first hour of code, so... yeah. Actually, my first hour of code was in Khan Academy a few years ago. It was a bit different but in summary I've redone what I had already done. Anyway, it was a great way to refresh knowledge. From my point of view, knowing something about coding, I think is a pretty good start point for learning. I'll give you a quick look at my projects and how the platform works.

First things first. I'll tell you some things about the platform. Khan Academy was founded in 2007, it doesnt only feature computer science courses, but also maths, traditional science and finantial. The hour of code course is meant to be done over an hour-ish and teaches you the very basics of Javascript. From there on you could take a Javascript course in codecademy or sololearn, both of them really great. My first coding course was actually that one. From there I went on and learned some Java on codecademy and some python, after that I migrated to sololearn to take a course in C++. Now I'm taking a course about C#.

It walks you through some basic coding notions and finally give you 3 projects to do. In between lessons there are some challenges to help you put to the test what you just learn. I'll list my own solutions to one challenge and one project down here,

Here goes the challenge:

//Background

background(0, 221, 255);

// The ground

fill(47, 255, 0);

rect(0, 300, 400, 100);  

// The sun

fill(242, 255, 0);

ellipse(80, 64, 100, 100);  

// The snowman

fill(255, 255, 255);

ellipse(200, 300, 150, 150);

ellipse(200, 200, 100, 100);

ellipse(200, 120, 75, 75);

And here goes the project:

//Background

background(0, 221, 255); 

// The ground

fill(47, 255, 0);

rect(0, 300, 400, 100);  

// The sun

fill(242, 255, 0);

ellipse(80, 64, 100, 100);  

// The snowman

fill(255, 255, 255);

ellipse(200, 300, 150, 150);

ellipse(200, 200, 100, 100);

ellipse(200, 120, 75, 75);

The "//" mean that´s a comment and won´t be readen by the program once it´s run. There only there for humans to read.



By coding there are some key concepts that are not explained in the hour of code that I think you guys should know.

The first one is pseudo code. It is very useful before starting to write code because it helps you get organized. It is, basically, writing code in human language, like:

Draw a rectangle;

Fill it with red ;

and then you try to "port" it to the programing language you're using.

Another important concept is a variable. You could imagine variable like a box in which you can store information and access it every time you need. You label that box so that you can recall it easily:

If you manage to complete the projects and challenges you'll earn badges. One of them is 10⁴. It means you've got more than 10000 energy points. This is what the other reward system is based on. To earn energy points it's taken into account how much time you've been active while on lessons or challenges/projects.

I really encourage you guys to start coding by your own. Me having some hours behind me I can tell you it´s amazing to see something come out of nothing. Something you´ve done by your own, letter by letter, word by word. Thanks for your time.

If you're not so sure about programming I'll leave you a very nice video I think you should watch anyway:

Hour of drawing code- Sofia

 In this post im going to show you part of my progress in the project from "Hour of drawing code" with the Khan Academy. This project was created to lear how to programm and drive in the computer with codes. You will see one of the challenges successfully achieved with its corresponding code, and one of my personall projects. About my personall projects, i have did 3 of them, but you are going to see only the one from the "Wild Animal".Khan Academy is a Web page where you can learn different things by playing. You must to complete some challenges and create your own projects while you're earning points! So its much funnier than learning by Youtube tutorials. 



This one is one of the challenges that i have done, its neme is ''Simple snowman''. khan Academy already gives you the three first codifications from the three first ellipses, but then you must complete it with all the elements and codifications that you have learned with some helping videos.

And this is the code:

background(132, 238, 240);

ellipse(200,305,150,150);

ellipse(200,216,110,110);

ellipse(200,150,70,70);

line(240,200,302,130);

line(156,197,92,127);

line(211,168,191,168);

fill(0, 0, 0);

ellipse(186,137,11,11);

ellipse(213,137,11,11);

ellipse(200,211,10,10);

ellipse(200,229,10,10);

ellipse(200,249,10,10);

And this one is one of my succesful projects, that is called "the wild animal''. It is not an offensive animal, but i find it cute, thats why i pick this project instead of the other projects.

Code:
background(31, 135, 83);
fill(255, 255, 255);
ellipse(200, 171, 130, 138);//body
ellipse(200, 97, 85, 80);//head
ellipse(200,111,44,20);//mouth

fill(0, 0, 0);
ellipse(232,65,31,31);//right ear
ellipse(166,65,31,31);//left ear
ellipse(240,214,50,50);//right foot
ellipse(163,214,50,50);//left foot
ellipse(151,146,40,40);//left hand
ellipse(249,146,40,40); //right hand
ellipse(200,107,-19,10);//nose
line(209,116,188,115);//mouth
ellipse(213,87,11,10);//right eye
ellipse(188,87,11,10);//left eye

fill(124, 201, 106);
rect(-1,239,400,161);//floor
fill(242, 232, 89);
ellipse(31,32,50,50);
fill(118, 209, 102);
strokeWeight(5); stroke (132, 240, 168);
line(109,43,112,239);
line(82,127,84,237);

A code is what we use for drawing for example rect, we use it to draw a rectangle. There are some codes that are useless, we only une it to remind us what does code do, for example //floor, it is only for remind us that this rect was for drawing the floor. 

Another concept is the dubble point (;) it is to ''confirm'' that you want to draw for example the sun. When you already finished to write the codification between the ( ), if you dont write the ;, your drawing will not appear. it is like something nesessary.

About your earned energy points, they are to make your learning a bit more fun. In your porfile will apear all your projects and lessons, also will appear the number of earned points in all your time within Kahn Academy.

This is a video tutorial about what is Kahn Academy:

The Hour Of Code

For the last week I have been working on a project called  in a webside very famed called . Although some of my friends have already used this page, but this week was the first time for me, and i can actually say that i enjoyed pretty much.

Khan Academy is a educational organization that provides free videos tutorials and interactive exercises. The mission of Khan Academy is changing the education for the better by providing a free world-class education to anyone anywhere.
The lessons were conceived primarily for distance learning but are also suitable for use in the classroom. The tutorials are informal in style and organized one concept or lesson at a time.
Also Khan Academy webside users can maintain records of their progress. Teachers can also monitor the progress of students who are using the site. In pilot experiments, schools are using a concept called "flipping the classroom", which involves students watching the Khan Academy lectures at home and the using classroom time for exercise and testing. In this model, the teacher´s role is changed from lecturer to tutor and progress monitor.

One of the projects was a self portrait. Here I leave my personal project:

PICTURE


CODE

// background
background(108, 186, 183);

// hair 
fill(217, 168, 104);
rect(101, 21, 195, 156, 10);
//neck
fill(209, 158, 107);
rect(153,314,90,85);

// face 
fill(222, 146, 113);
ellipse(200, 200, 197, 285);
fill (230, 196, 196);
ellipse (232,145,56,34);
ellipse (162,146,56,34);
fill(133, 166, 152);
ellipse (232,146,20,20);
ellipse (162,146,20,20);
fill(230, 151, 106);
triangle(172,233,232,234,200,176);
fill(207, 64, 64);
ellipse(200,287,79,33);
fill(33, 24, 24);
ellipse(162,146,5,5);

ellipse(232,146,5,5);


Here is the other project that I personally realised. This is a "wild animal":

PICTURE

CODE

// background

background(19, 207, 163);

strokeWeight(1);

fill(255, 230, 0);

ellipse(53,47,73,73);

fill(73, 150, 14);

rect(1,333,398,66);

// ears

fill (191, 151, 40);

ellipse (233,101,51,51);

fill (191, 151, 40);

ellipse (170,103,51,51);

// ears inside

fill (115, 69, 9);

ellipse (230,109,30,30);

fill (115, 69, 9);

ellipse (172,109,30,30);

// body

fill(115, 69, 9);

ellipse(129,206,30,30);

ellipse(269,206,30,30);

ellipse(255,319,30,30);

ellipse(144,319,30,30);

fill(191, 151, 40);

ellipse(200, 253, 155, 178);

fill(191, 151, 40);

ellipse(200, 151, 90, 90);

// face 

fill(212, 123, 157);

ellipse(201,171,15,15);

strokeWeight (15);

point(219,137);

point(182,137);

Here I leave you a video of the basis data of The Hour Of Code:

  By Jero Behrens.