# M2D3 – ITP1 Nested Iterations and more with Arrays

function setup()
{
createCanvas(800, 800);

}

function draw()
{
background(0);
fill(255, 0, 255);
noStroke();

for(var j = 0; j < 20; j ++) // rows
{
for(var i = 0; i < 20; i ++) // columns
{
ellipse(50 + i * 30,
50 + j * 30,
i + j,
i + j);
}
}
// i is the columns value, so using it as the width and height size it becomes smaller to bigger from left to right ( 0-19 size)
// j is the rows value, so using it as the width and height size it becomes smaller to bigger from top to bottom ( 0-19 size)

}
var maxDist;

function setup()
{
createCanvas(800, 800);
maxDist = dist(0, 0, width/2, height/2); //0, 0 is the farthest corner, and width/2 and height/2 is the center of the canvas
}

function draw()
{
background(0);
fill(255, 0, 255);
noStroke();

for(var j = 0; j < 20; j ++) // rows
{
for(var i = 0; i < 20; i ++) // columns
{
if(i%2 == 0)//it divides the number on the left by the number on the right, and sees if the remainder is 0 or something else. If it's even number, if I divide it by two, will then there will be no remainder, so that means it's an even column, otherwise there will be a remainder, so the value will be higher and therefore, it's an odd column
{
fill(255);
}
else
{
fill(255, 0, 255);
}
var d = dist(mouseX, mouseY, 50 + i * 30, 50 + j * 30/*this value is the center of each ellipse*/);//distance of each ellipse from the center
var r = d/maxDist; // goes to the center of the canvas
//consider the longest distance and scale my radius by it, longest distance is from the center to any of the corner
//            var r = i + j * 2; // added this variable instead of repeating the equation - i + j * 2
ellipse(50 + i * 30,
50 + j * 30,
r * 30,
r * 30);
}
}
// i is the columns value, so using it as the width and height size it becomes smaller to bigger from left to right ( 0-19 size)
// j is the rows value, so using it as the width and height size it becomes smaller to bigger from top to bottom ( 0-19 size)

}

## %

4%2 is same as 4/2.

i%2 == 0

This means to divide the value of i to 2, and if the quotient is equal to 0 (no remainder), then the condition will happen.

# Dynamic adding items to arrays with .push and .length

.push – append new items to the array, always adds items to the end of the array

    wordCloud.push("first", "second"); // I can put everything in one command
wordCloud.push("third"); // I can also separate them

.length – counts the number of arrays

This could get a little complex, but I think I understand the idea.

var wordCloud;
var wordsX;
var wordsY;
var currentWord;

function setup()
{
createCanvas(500,500);
wordCloud = [];
wordsX = [];
wordsY = [];

//    wordCloud.push("first", "second");
//    wordCloud.push("third", "fourth");

currentWord = "";
}

function draw()
{

background(0);
fill(255);

text("Add to the word cloud: " + currentWord, 20,20);

//    for(var i = 0; i < wordCloud.length; i++)
//    {
//        text(wordCloud[i], wordPositionsX[i], wordPositionsY[i]);
//        wordPositionsX[i] += random(-1,1);
//        wordPositionsY[i] += random(-1,1);
//    }
for(var i = 0; i < wordCloud.length; i++)//wordCloud.length adjusts to whatever the number of the items in the wordCloud array
{
text(wordCloud[i], wordsX[i], wordsY[i]);
wordsX[i] += random(-1, 1); // makes the item from the array to float in between -1 to 1 in the x position
wordsY[i] += random(-1, 1); // makes the item from the array to float in between -1 to 1 in the y position
}

}

function keyPressed()
{
console.log(keyCode,key); //DELETE = 8, RETURN = 13

//    currentWord += key;//whatever the user types in is "key"

if(keyCode == 13)//13 is the keycode of "Return" or "Enter"
{
wordCloud.push(currentWord);//enters whatever the user types in
currentWord = "";//after entering, resets the value back to empty
wordsX.push(random(width/4, width * 3/4)); // the value of X is being added to the array
wordsY.push(random(height/4, height * 3/4));
}
else
{
currentWord += key; //if not "Return" or "Enter" is pressed, carry on typing the letters the user enters // currentWord is equals to every character the user types in, till enter or return is pressed
}

//    if(keyCode == 8)
//    {
//        currentWord = currentWord.substr(0,currentWord.length -1);
//    }
//    else if(keyCode == 13)
//    {
//        wordCloud.push(currentWord);
//        wordPositionsX.push(random(width/4, width *3/4));
//        wordPositionsY.push(random(height/4, height *3/4));
//        currentWord = "";
//    }
//    else
//    {
//        currentWord += key;
//    }
}

Example from the Quiz:

    var roseArray = [0];

for(var i = 0; i < 100; i ++) // 0-99 times this loop happens, or equal to 100 times of the value of 1 added to the array, with an existing 0 item in the array, makes it 101 total items
{
roseArray.push(roseArray[0] + 1);//first value in the array + 1
console.log(roseArray);
}

This example above returns 101 numbers in the array, first number is 0 and the 100 rest is all 1s.

    var a = [1, 2, 3];

for(var i = 0; i < 3; i ++)
{
a = []; // this empties the array in every loop
a.push(i); // added 0, 1, 2
}
console.log(a); // returns 2 because that is the last value in the loop

This example above returns 2 item in the console log in a loop.

Animated Star Field

var starPositionsX;
var starPositionsY;
var starDirectionsX;
var starDirectionsY;

var numStars;
var maxDist;

function setup()
{
createCanvas(800,800);

starPositionsX = [];
starPositionsY = [];
starDirectionsX = [];
starDirectionsY = [];
numStars = 1000;

for(var i = 0; i < numStars; i++)
{
starPositionsX.push(width/2);
starPositionsY.push(height/2);
starDirectionsX.push(random(-1,1));
starDirectionsY.push(random(-1,1));
}

maxDist = dist(width/2, height/2, width, height);
}

function draw()
{

background(0);
fill(255);
noStroke();

for(var i = 0; i < starPositionsX.length; i++)
{
var d = dist(starPositionsX[i],starPositionsY[i], width/2,height/2);
var r = d * 20/maxDist;
ellipse(starPositionsX[i],starPositionsY[i], r,r);
starPositionsX[i] += starDirectionsX[i] * max(0.01, r);
starPositionsY[i] += starDirectionsY[i] * max(0.01, r);

if(d > maxDist)
{
starPositionsX[i] = width/2;
starPositionsY[i] = height/2;
}
}

}


This entry was posted in Study Notes and tagged , , , . Bookmark the permalink.