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 loopThis 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;
}
}
}
