for (var i = 0; i < 7; i++) {
//código
}
Ya aprendimos:
if()
/ else if()
/ else
function nombreFuncion(argumentoFuncion){
//instruccion1;
//instruccion2;
///etc
return valorRetorno;
}
function
declara la funciónreturn
retorna el resultado
getFecha()
var alto = 130;
var ancho = 200;
var colorRect;
function setup(){
createCanvas(800,500);
background(255,150,0,200);
}
function draw(){
if(mouseX > width/2 - ancho/2 && mouseX < width/2 + ancho/2 && mouseY < height/2 + alto/2 && mouseY > height/2 - alto/2 ){
colorRect = color(0);
}
else {
colorRect = color(100,100,180);
}
noStroke();
fill(colorRect);
rectMode(CENTER);
rect(width/2,height/2,ancho,alto);
}
function draw(){
if(mouseX > width/2 - ancho/2 && mouseX < width/2 + ancho/2 && mouseY < height/2 + alto/2 && mouseY > height/2 - alto/2 ){
colorRect = color(0);
}
else {
colorRect = color(100,100,180);
}
noStroke();
fill(colorRect);
rectMode(CENTER);
rect(width/2,height/2,ancho,alto);
}
draw()
verifica si el cursor está en el rectángulo
function checkInside(){
if(mouseX > width/2 - ancho/2 && mouseX < width/2 + ancho/2 && mouseY < height/2 + alto/2 && mouseY > height/2 - alto/2 ){
colorRect = color(0);
}
else {
colorRect = color(100,100,180);
}
}
function updateRect(){
noStroke();
fill(colorRect);
rectMode(CENTER);
rect(width/2,height/2,ancho,alto);
}
var alto = 130;
var ancho = 200;
var colorRect;
function setup(){
createCanvas(800,500);
background(255,150,0,200);
}
function draw(){
checkInside();
updateRect();
}
function checkInside(){//verifica si el cursor está dentro o fuera del rectángulo
if(mouseX > width/2 - ancho/2 && mouseX < width/2 + ancho/2 && mouseY < height/2 + alto/2 && mouseY > height/2 - alto/2 ){
colorRect = color(0);
}
else {
colorRect = color(100,100,180);
}
}
function updateRect(){ //actualiza el rectángulo
noStroke();
fill(colorRect);
rectMode(CENTER);
rect(width/2,height/2,ancho,alto);
}
x
:var x = [];
//Arreglos
var x = [];
var y = [];
var diam = [];
var numEstrellas = 100;
function setup(){
createCanvas(800,500);
background(30);
for (var i = 0; i < numEstrellas; i++) {
x[i] = random(0,width);
y[i] = random(0,height);
diam[i] = random(1,7);
}
}
function draw(){
for (var i = 0; i < numEstrellas; i++) {
noStroke();
fill(240);
ellipse(x[i],y[i],diam[i],diam[i]);
}
}
var num = 30;
var x = [];
var y = [];
function setup(){
createCanvas(800,500);
noStroke();
for (var i = 0; i < num; i++) {
x[i] = 0;
y[i] = 0;
}
}
function draw(){
background(0);
frameRate(100);
for (var i = num-1; i >0 ; i--) {
x[i] = x[i-1];
y[i] = y[i-1];
}
x[0] = mouseX;
y[0] = mouseY;
for (var i = 0; i < num; i++) {
fill(255 - i*4);
ellipse(x[i], y[i], 40, 40);
}
}
preload()
, usando loadImage()
y la variable creadaimage()
var foto;
function preload(){ //preload() es ejecutado antes de setup()
foto = loadImage("coded.png");
}
function setup(){
createCanvas(500,500);
}
function draw(){
image(foto,0,0);
}
image(foto,x1,y1,x2,y2)
dibuja el archivo entre un par ordenado y otro
var foto;
function preload(){
foto = loadImage("coded.png");
}
function setup(){
createCanvas(500,500);
}
function draw(){
background(255);
image(foto,0,0,mouseX,mouseY);
}
var foto;
function preload(){
foto = loadImage("pinera.gif");
}
function setup(){
createCanvas(800,700);
}
function draw(){
background(204);
image(foto,mouseX-foto.width/2,mouseY-foto.height/2);
}
function setup(){
createCanvas(600,100);
textFont("Arial");
}
function draw(){
background(220);
textSize(32);
text("Taller de p5.js para cabros bacanes",0,50);
}
textFont("Arial")
carga la fuente del textotextSize(32)
define el tamaño del textotext("bla bla bla")
escribe el texto
var camara;
function setup(){
createCanvas(800,500);
camara = createCapture(VIDEO);
camara.hide();
}
function draw(){
image(camara,0,0);
}
filter(INVERT);
tint(color);