Example 0
function setup() {
createCanvas(400, 400);
}
function draw() {
circle(50,50,40)
}
Example 1
- The colors change because the fill() function calls random() to return random RBG values to produce a fill color, and since the draw function() executes continuously unless explicitly told to break the loop, the circle has a new background color each iteration.
- The setup() function establishes an area of the screen where that other functions, such as draw, will execute within. The draw() function executes the code of other functions written within it. This makes up what we see in a project.
//this function runs one
function setup() {
createCanvas(400, 400);
}
function draw() {
fill(random(255), random(255), random(255));
ellipse(width/2, height/2, 50, 50)
}
Example 2
- The tail appears because the the looping draw() functions a new circle one pixel to the right of the previous (x = x +1) with each iteration, so the outline of the previous shows for each circle drawn previously to make up the tail. In order to remove the tail, you would have to remove the circle drawn previously with each successive pass through the loop.
- I used the frameRate() function to change the speed of the speed of the circle moving across the screen. By deafult, the circle will move at 60 frames per second, and it cannot move faster, at least with the frameRate() function, only slower.
let x = 0;
function setup() {
createCanvas(500, 500)
background(100);
frameRate(25);
}
function draw() {
my_ellipse = ellipse(x, height/2, 20, 20);
x = x + 1;
}
let x = 0;
function setup() {
createCanvas(500, 500)
background(100);
frameRate(25);
}
function draw() {
my_ellipse = ellipse(x, height/2, 20, 20);
x = x + 1;
}
Example 4
- To add space between the circles, I changed the horizontal positioning to be x*(r2), so that each new circle will be drawn 2 the radius from the first circles, instead of one, which put the circles right next to each other.
function setup() {
createCanvas(400, 400);
background(240)
}
function draw() {
noLoop();
noStroke();
fill('red');
let numCircles = 50;
let r = (width)/numCircles;
for (x = 0; x < numCircles; x++){
ellipse(x*(r*2), height/2, r);
}
}