DEV Community: Adem Deliaslan

Arrays in Javascript - 00014

Adem Deliaslan — Wed, 23 Oct 2019 09:34:01 +0000

// Arrays!
//ignore xPos and yPos.

var myFriend = "Sophia";

var myFriends = ["Sophia", "John", "Leif", "Winston", "OhNoes Guy!!"];

// myFriends[1]
fill(255, 0, 0);
text( myFriends[0], 10, 30);

Output: Sophia

text( myFriends[1], 10, 80);

Output: John

text( myFriends[2], 10, 130);

Output: Leif

text("I have " + myFriends.length + " friends!!!", 10, 150);

Output: I have 5 friends!!!

Local and global variables in Javascript - 00013

Adem Deliaslan — Sun, 06 Oct 2019 14:34:04 +0000

please ignore xPos and yPos values
codesample from khan academy

var lifeInches = 20; //

var calcInches = function(startAge, endAge, inchesPerYear) {
var totalInches = inchesPerYear * (endAge - startAge);
lifeInches += totalInches;
return totalInches;
};

fill(255, 0, 0);

text("From 0-8 years:", 10, 20);
text(calcInches(0, 8, 2.5), 10, 40);

text("From 8-16 years:", 10, 100);
text(calcInches(8, 16, 2), 10, 120);

text("Total grown over life:", 10, 168);
text(lifeInches, 10, 200);

output:
"From 0-8 years: 20"
"From 8-16 years: 16"
"Total grown over life: 56"

lifeInches -> global variable

totalInches -> local variable

calcInches -> local variable

Functions with parameters in Javascript - 00012

Adem Deliaslan — Sun, 06 Oct 2019 13:52:28 +0000

simple using sample

var add = function(num1, num2) {
return num1 + num2;
};

add(3,4);

output: "7"

parametreler sayesinde aynı fonksiyonu bir çok yerde farklı şekillerde kullanabiliriz.

Functions in Javascript - 00011

Adem Deliaslan — Sun, 06 Oct 2019 12:18:55 +0000

note: please ignore xPos and yPos values all my posts.

var yourNameFunc = function(){
var textX = random(0, 300);
var textY = random(0, 300);
var yourName = "Adem Deliaslan";
fill(255, 0, 0);
textSize(30);
text("Hiiii, " + yourName, textX, textY);
};

yourNameFunc();

output: "Hiiii, Adem Deliaslan"

Text in Javascript -00010

Adem Deliaslan — Sun, 06 Oct 2019 12:11:51 +0000

text(string, xPos, yPos);

var text1 = "merhaba ";

text(text1+text1,0,150);

output: 'merhaba merhaba '

Javascript - Challenge: Brown bear eyes from khanAcademy -00009

Adem Deliaslan — Tue, 01 Oct 2019 08:22:28 +0000

Dependency of the shapes sizes and positions
(with process.JS)
__x, y ve faceSize değişse dahi oran/orantı ve pozisyonları sabit kalacaktır.

noStroke();
var x = 197;
var y = 275;
var faceSize = 400;

// ears
var earSize=faceSize*1/2;
fill(89, 52, 17);
ellipse(x-faceSize*2/5, y-faceSize*2/5, earSize, earSize);
ellipse(x+faceSize*2/5, y-faceSize*2/5, earSize, earSize);

// face
fill(163, 113, 5);
ellipse(x, y, faceSize, faceSize);

//eyes
fill(0, 0, 0);
ellipse(x-faceSize/4, y-faceSize/8, faceSize*1/8, faceSize*1/8);
ellipse(x+faceSize/4, y-faceSize/8, faceSize*1/8, faceSize*1/8);

//nose
fill(89, 52, 20);
ellipse(x, y+faceSize/8, faceSize*4/15, faceSize/5);

Javascript Learning From Scratch -00008

Adem Deliaslan — Tue, 01 Oct 2019 06:32:23 +0000

Using math expressions in JS

var x = 10;
var a = x + 5; // add 5, result is 15
var b = x - 5; // subtract 5, result is 5
var c = x * 2; // multiply by 2, result is 20
var d = x / 4; // divide by 4, result is 2.5
var e = x % 3; // divide by 3 & return remainder, result is 1

Javascript Learning From Scratch -00007

Adem Deliaslan — Tue, 01 Oct 2019 06:30:28 +0000

var rectWidth = 20;
rect(10, 10, rectWidth, rectWidth);

Question_0001: How wide is the rectangle?

Answer_0001: Obviously 20 :)

We're drawing eyes for a face, and we want the eyes to both be in the same y position and to be the same size. We use the following code to draw them:

var y = 70;
var size = 30;
ellipse(100, y, size, size);
ellipse(150, y, size, size);

Question_0002: At what y position are the eyes drawn?

Answer_0002: 70

Javascript Learning From Scratch -00006

Adem Deliaslan — Sun, 29 Sep 2019 21:22:11 +0000

Shortcuts of writing codes

var x = 200;
var y = 350;

x = x * y; is the same of x *= y;
x = x + y; is the same of x += y;

Javascript Learning From Scratch -00005

Adem Deliaslan — Sun, 29 Sep 2019 12:12:58 +0000

fill(0, 0, 0); // make black,

fill(255, 255, 255); //make white

but we if we need to "no fill" area use below function

noFill();

Javascript Learning From Scratch -00004

Adem Deliaslan — Sun, 29 Sep 2019 11:54:32 +0000

****face draw and coloring

noStroke(); // it means no border for shapes. *şekillerin kenar kalınlığı olmayacağını ifade eder.

// face
fill(255, 255, 0); //filling with this color inside of the shape
ellipse(202, 208, 300, 300);

// eyes
fill(46, 46, 41); // each new fill command disables the previous same command.
ellipse(157, 151, 40, 40);
ellipse(304, 142, 40, 40);

// mouth
fill(252, 65, 65);
ellipse(257, 240, 120, 136);

output:

Javascript Learning From Scratch -00003

Adem Deliaslan — Sun, 29 Sep 2019 11:21:02 +0000

****** this is the point of aligment hierarchy.
****** eğer büyük nesneyi sonra çizer ve kesişim içerisinde olursa küçük olan nesne alt katmanda kaldığından görünür olamaz.

----first drawing

rect(76, 45, 250, 300); // face

rect(126, 250, 152, 60); // mouth

rect(140, 150, 30, 30); // left eye

rect(240, 150, 30, 30); // right eye

rect(175, 345, 50, 50); // neck

// unibrow
line(140, 129, 270, 129);

output:

----second drawing

rect(126, 250, 152, 60); // mouth

rect(76, 45, 250, 300); // face

rect(140, 150, 30, 30); // left eye

rect(240, 150, 30, 30); // right eye

rect(175, 345, 50, 50); // neck

// unibrow
line(140, 129, 270, 129);

output: