Scribd
Upload
34 views15 pages

PEC 4 - CodeLAb

The document describes various functions and methods for working with images, text, and animation in p5.js. It covers loading images, applying filters to images, getting pixel data from images, displaying and animating text, using strings, noise, bouncing balls, curved motion, and applying trigonometric functions to color properties.

Uploaded by

Temet Nosce
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
34 views15 pages

PEC 4 - CodeLAb

The document describes various functions and methods for working with images, text, and animation in p5.js. It covers loading images, applying filters to images, getting pixel data from images, displaying and animating text, using strings, noise, bouncing balls, curved motion, and applying trigonometric functions to color properties.

Uploaded by

Temet Nosce
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

4.

1 Image – loadImage()

var img;
var cont = 0;

function preload() {
img = loadImage(
'[Link]
}

function setup() {
createCanvas(400,400);
}

function draw() {
image(img,random(width),random(height),150,84);
}

4.2 Image – filter()

var img;

function preload() {
img = loadImage('[Link]
[Link]');
}

function setup() {
createCanvas(500, 400);
}

function draw() {
image(img, 0, 0,width,height);

if (keyIsDown(49)) {
filter(THRESHOLD, 0.5);
}

if (keyIsDown(50)) {
filter(GRAY);
}

if (keyIsDown(51)) {
filter(BLUR);
}

if (keyIsDown(52)) {
filter(INVERT);
}

if (keyIsDown(53)) {
filter(POSTERIZE,4);
}

if (keyIsDown(54)) {
filter(BLUR,3);
}

if (keyIsDown(55)) {
filter(ERODE);
}

if (keyIsDown(56)) {
filter(DILATE);
}
}

4.3 Image – get()

var img;

function preload() {
img = loadImage('[Link]
[Link]');
}

function setup() {
createCanvas(500, 400);
}

function draw() {
image(img, 0, 0,width,height);
let c = get(mouseX, mouseY);
fill(c);
noStroke();
circle(mouseX, mouseY, 50);
}

4.4 Hello Text

function setup() {
createCanvas(1024, 768);
}

function draw() {
background("white");
textAlign(CENTER,CENTER);
textSize(200);

noFill();
stroke(0);
for(let n = 3; n < 100; n=n+3){
text("Laura", 0 + n, 0, width, height);
}

fill(0);
text("Laura",0,0, width, height);
}

4.5 Text Animation

let tamTexto = 0;

function setup() {
createCanvas(1024, 768);
}

function draw() {
background("white");
textAlign(CENTER,CENTER);
tamTexto = map(mouseY,0,height,12,200);
textSize(tamTexto);

noFill();
stroke(0);
for(let n = 3; n < 100; n=n+3){
text("Laura", 0 + n, 0, width, height);
}

fill(0);
text("Laura",0,0, width, height);
}

4.6 Párrafos

// Esta variable contiene un "String"


// String = Cadena de caracteres
var parrafo = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.';

function setup() {
createCanvas(500, 500);
}

function draw() {
background("white");

fill(200);
textSize(12);
textLeading(14);
text(parrafo, width / 2, 100, 200, 300); // text(texto, x, y, ancho, altura)
}

4.9 Strings I – length

var parrafo = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.';

function setup() {
createCanvas(500, 500);
[Link]([Link]);
noLoop();
}

function draw() {
background("white");
fill(200);
textSize(12);
textLeading(15);
text(parrafo, width / 2, 20, 100, 460); // text(texto, x, y, ancho, altura)
}

4.10 Strings II – substring()

let parrafo = "Laura";


let n = 0;

function setup() {
createCanvas(400,400);
[Link]([Link]);
textSize(200);
textAlign(CENTER,CENTER);
frameRate(1)
}

function draw() {
background(220);

let letra = [Link](n, n+1);


text(letra,0,0,width,height);
n++;
if(n == [Link]) {
n = 0;
}
}

4.12 Strings II – substring()

var canvasW = 400;


var canvasH = 200;

var palabra = "LAURA";


var pos = 0;
var x = 55;
var velPares = 0;
var incrementoPares = 0.5;
var velImpares = 0;
var incrementoImpares = -0.5;
var fontType;
var fontSize = 50;

function setup() {
createCanvas(canvasW, canvasH);
fontType = 'Major Mono Display';
}

function draw() {
background('#3669c9');

fill('white');
textFont(fontType);
textSize(fontSize);

velPares += incrementoPares;
if (velPares > 10 || velPares < -10) {
incrementoPares *= -1;
}
velImpares += incrementoImpares;
if (velImpares > 10 || velImpares < -10) {
incrementoImpares *= -1;
}

for (pos = 0; pos < [Link]; pos++) {


if (pos % 2) {
text([Link](pos, pos + 1), x + pos * 50, canvasH / 2 +
fontSize / 4 + velPares);
} else {
text([Link](pos, pos + 1), x + pos * 50, canvasH / 2 +
fontSize / 4 + velImpares);
}
}
}

4.13 Strings III – keyTyped()

var parrafo = "Escribe...";

function setup() {
createCanvas(500, 500);
}

function draw() {
background("white");
fill(50);
textSize(24);
textLeading(30);
text(parrafo, width / 2, 100, 100, 300); // text(texto, x, y, ancho, altura)
}

function keyTyped() {
parrafo += key;
}

4.14 Hello Animation

// Variables globales
var canvasWH = 500;
var circleX = canvasWH / 2;
var circleY = canvasWH / 2;
var circleDiameter = 100;
var circleFill = 255;
var backgroundColor = "#B3A47D";

function setup() {
createCanvas(canvasWH, canvasWH);
circleX = width/2;
circleY = height/2;
}

function draw() {
background(backgroundColor);

circleY--;
circleX++;
noStroke();
fill(circleFill);
circle(circleX, circleY, circleDiameter);
}

4.15 Velocidad I
var a;

function setup() {
createCanvas(720, 400);
a = height / 2;
}

function draw() {
background(0);

noStroke();
var col = map(a, 0, height, 0, 255);
fill(col);
circle(width / 2, height / 2, 200);

strokeWeight(1);
stroke(255);
line(0, a, width, a);
a += 0.5;

if (a > height) {
a = 0;
}
}

4.16 Velocidad II
let x,y,d = 20;
let velX = 1;
let opacidad = 0;

function setup() {
createCanvas(500,500);
x = 0;
y = height/2;
noStroke();
}

function draw() {
background(0,10);

if (x<width/4) {
velX = 3;
} else if (x<width/2) {
velX = 5;
}

x = x + velX;
circle(x,y,d);
}

4.17a - noise
var t = 1;
var noiseScale = 0.02

function setup() {
createCanvas(400, 400);
t = 0;
}

function draw() {
// fondo negro con opacidad muy baja
background(0, 5);

var x = width/2;
var y = height/2;

noStroke();
fill(255);
ellipse(noise(t)*width, noise(t)*height, 120, 120);

/*
stroke(255);
line(x, height, x, height-32);
line(0, y, 32, y);
*/

// incrementamos t de una cantidad muy pequeña


t += 0.005;
}

4.18 Rebote I
// Variables globales
var x,y,d = 50;
var velX = 5;
var canvasWH = 500;

function setup() {
createCanvas(canvasWH, canvasWH);
x = width/2;
y = height/2;
noStroke();
}

function draw() {
background('#858585');

x = x + velX;
if(x<d/2 || x>width-d/2) {
velX *= -1;
}
circle(x,y,d);
}

4.19 Rebote II
// Variables para el canvas
var canvasW = 100;
var canvasH = 300;
var backgroundColor = 220;

// Variables para el círculo


var col;
var posX = 50;
var posY = 50;
var radio = 25;
var velY = 5;

function setup() {
createCanvas(canvasW, canvasH);
noStroke();
col = color(random(0, 255), random(0, 255), random(0, 255));
}

function draw() {
background(backgroundColor);

if (posY < 0 + radio) {


posY = 25;
velY = -velY;
colorB = random(0, 255);
col = color(random(0, 255), random(0, 255), random(0, 255));
}

if (posY > height - radio) {


posY = height - radio;
velY = -velY;
backgroundColor = random(0, 255);
col = color(random(0, 255), random(0, 255), random(0, 255));
}

posY = posY + velY;


fill(col);
circle(posX, posY, radio * 2);
}

4.21 Movimientos curvos I

var x,y,d = 25;


var angulo = 0.1;
var amplitud = 100;

function setup() {
createCanvas (500,500);
x = 0;
y = height/2;
}

function draw() {
background(255,255,255,15);

x += 2;
angulo += 0.1;

noStroke();
fill(0)
ellipse(x,y+sin(angulo)*amplitud,d); // sin empieza en el 0
ellipse(x,y+cos(angulo)*amplitud,d); // cos empieza en el -1
ellipse(x,y+tan(angulo)*amplitud,d); // tan empieza por arriba
}

4.22 Movimientos curvos II


var x,y;
var ampX = 100;
var ampY = -100;
var angulo = 0.1;

function setup() {
createCanvas(600,400);
x = width/2;
y = height/2;
}

function draw() {
// Añadimos alpha al color de fondo así podemos ver las posiciones anteriores
background(255, 255, 255, 15);

var tamaño = 50;

angulo += 0.03;
var sepaX = ampX * cos(angulo);
var sepaY = ampY * sin(angulo);
tamaño = map(abs(sin(angulo)), 0,1,0,50);

noStroke();
fill(0);
ellipse(x + sepaX,y + sepaY, tamaño);
}

4.23 sin() y cos() aplicados a color


var tono = 15; // Valor para el tono -> Amarillo
var sat = 20; // Variable para variar la saturación de los colores
var lum = 100; // Valor para la luminosidad -> Máxima

var cont = 0; // 3_Añadimos un componente dinámico al sketch

function setup() {
createCanvas(500, 240);
background(25);
frameRate(8);
}

function draw() {
cont++; // 3_Vamos incrementando el valor de cont

// Definimos las propiedades de las líneas


strokeCap(SQUARE);
strokeWeight(3);

/*
Usamos el método HSB
H -> tono
S -> saturación
B -> luminosidad
Los tres parámetros tienen rangos de 0 a 100
*/

colorMode(HSB, 100);

/*
Bucle para llenar el canvas de líneas:
utilizaremos i como coordenada vertical de las líneas
y también como ángulo a partir del cual calcular
el valor de las funciones sin() y cos()
*/

for (i = 20; i < height; i = i+20) { // Version 0


//for (i = 5; i < height; i = i+5) { // 3_Se aumenta la densidad de las lineas
// sat = random(100); // 4_Se añade aleatoriedad a la saturacion

////// Parte izquierda del canvas - Exploramos la función sin()

/*
Mapeamos los valores de sin(i) para adaptarlos al rango de la saturación
Recuerda que la función sin() devuelve valores de -1 a 1
*/

// tono = 85; // 1_Se modifica el tono de sin() al rosa


sat = map(sin(i),-1,1,0,100); // Version 0
// lum = map(sin(i),-1,1,0,100); // 2_Se modifica paralelamente la luminosidad
// tono = map(sin(i),-1,1,0,100); // 3_Se modifica paralelamente el tono
tono = map(sin(i+cont),-1,1,0,100); // 4_ Ponemos cont para la variacion del
tono
stroke(tono, sat, lum); // Se usa la saturación creada por el mapeado de
sin(i)
line(0, i, width / 2 - 3, i); // Se dibuja la línea

////// Parte derecha del canvas - Exploramos la función cos()

/*
Mapeamos los valores de cos(i) para adaptarlos al rango de la saturación
Recuerda que la función cos() también devuelve valores de -1 a 1,
aunque tiene una periodicidad distinta con respeto a sin():
lo puedes comprobar mirando el canvas
*/

// tono = 65; // 1_Se modifica el tono de cos() al azul


sat = map(cos(i),-1,1,0,100); // Version 0
// lum = map(cos(i),-1,1,0,100); // 2_Se modifica paralelamente la luminosidad
// tono = map(cos(i),-1,1,0,100); // 3_Se modifica paralelamente el tono
tono = map(cos(i+cont),-1,1,0,100); // 4_ Ponemos cont para la variacion del
tono
stroke(tono, sat, lum); // Se usa la saturación creada por el mapeado de
cos(i)
line(width / 2 + 3, i, width, i); // Se dibuja la línea
}
}

4.24 Pac-Man 5
var pacManPosX = 90;
var pacManAncho = 100;
var pacManAnguloInicio = 30;
var pacManAnguloFinal = 330;
var mostrarBola1 = true,
mostrarBola2 = true,
mostrarBola3 = true;
var maxApertura = 50;
var angulo = 0.1;
var apertura;

var mirarDerecha = true;


function setup() {
createCanvas (600,400);
angleMode(DEGREES);
}

function draw() {
background (0);

angulo += 12;
apertura = map(sin(angulo), -1,1,0,maxApertura);
print(apertura);

if (mirarDerecha) {
pacManAnguloInicio = 0 + apertura;
pacManAnguloFinal = 0 - apertura;
} else {
pacManAnguloInicio = 180 + apertura;
pacManAnguloFinal = 180 - apertura;
}

if (keyIsDown(LEFT_ARROW)) {
pacManPosX -= 5;
mirarDerecha = false;
}
if (keyIsDown(RIGHT_ARROW)) {
pacManPosX += 5;
mirarDerecha = true;
}

// PacMan
fill(255,255,0);
arc(pacManPosX, height/2, pacManAncho, pacManAncho, pacManAnguloInicio,
pacManAnguloFinal);

fill (255)
// Bola 1
if (dist(pacManPosX,height/2,width/2-100,height/2) < pacManAncho/2+10) {
mostrarBola1 = false;
}
if (mostrarBola1 == true) {
ellipse (width/2 - 100, height/2, 20);
}
// Bola 2
if (dist(pacManPosX,height/2,width/2, height/2) < pacManAncho/2+10) {
mostrarBola2 = false;
}
if (mostrarBola2) {
ellipse (width/2, height/2, 20);
}
// Bola 3
if (dist(pacManPosX,height/2,width/2 + 100, height/2) < pacManAncho/2+10) {
mostrarBola3 = false;
}
if (mostrarBola3) {
ellipse (width/2 + 100, height/2, 20);
}
}

4.27 Tetris 6
// Variables canvas
var canvasW = 400;
var canvasH = 600;

// Variables Comunes
var modulo = 30; // Dimensión del cuadrado base
var dista = 5; // Distancia entre cuadrados
var transp = 100; // Valor de opacidad del relleno
var strk = 2; // Grosor del contorno

var ident = 0; // Tipo de pieza


var anchoAct = 0; // Ancho de la ficha actual
var altoAct = 0; // Alto de la ficha actual

var transX = canvasW / 2; // La ajustaremos según el ancho de la pieza para


centrarla
var transY = modulo * -4 ; // Nos aseguramos de desplazar el dibujo suficientemente
arriba
var velY = 5; // Velocidad que aplicaremos en vertical

// Variable fichas
// Caja amarilla - 0
var colorBox = {
r: 255,
g: 255,
b: 0
}

// L - 1
var colorL = {
r: 0,
g: 0,
b: 255
}

// I - 2
var colorI = {
r: 255,
g: 0,
b: 0
}

// S - 3
var colorS = {
r: 0,
g: 255,
b: 0
}

// T - 4
var colorT = {
r: 255,
g: 0,
b: 255
}

var i, j = 0; // Variables para los fors anidados - las podemos reaprovechar


function setup() {
createCanvas(canvasW, canvasH);
ident = int(random(5)); // Definir la pieza que se dibuja al principio
}

function draw() {
background(0);

// Definimos el grosor y los cantos


strokeWeight(strk);
strokeJoin(ROUND);

// Movemos la pieza hacia abajo


translate(transX - int(anchoAct / 2), transY); // La primera vez que se dibuje la
pieza estará arriba
if (transY < height + altoAct) {
transY = transY + velY; // Se actualiza la posición
} else {
ident = int(random(5)); // Se vuelve a poner la pieza que se dibuja a
continuación
transY = modulo * -4; // Se restablece la posición inicial de la pieza
}

// Se controla la variable ident para saber què pieza dibujar


if (ident == 0) {

// Caja amarilla – Ident 0


// Se calcula el ancho y el alto de la pieza
anchoAct = altoAct = modulo * 2 + dista;
// Se dibuja la pieza
fill(colorBox.r, colorBox.g, colorBox.b, transp); // Relleno con transparencia
stroke(colorBox.r, colorBox.g, colorBox.b); // Contorno sin transparencia
for (i = 0; i < 2; i++) { // For encadenado para crear una retícula de 2x2
cuadrados
for (j = 0; j < 2; j++) {
// Dibujamos un cuadrado vinculando su posición a las variables del for
square(modulo * i + dista * i, modulo * j + dista * j, modulo);
}
}

} else if (ident == 1) {
// L – Ident 1
// Se calcula el ancho y el alto de la pieza
anchoAct = modulo * 2 + dista;
altoAct = modulo * 3 + dista * 2;
// Se dibuja la pieza
fill(colorL.r, colorL.g, colorL.b, transp); // Relleno con transparencia
stroke(colorL.r, colorL.g, colorL.b); // Contorno sin transparencia
for (i = 0; i < 2; i++) { // For encadenado para crear una retícula de 2x3
cuadrados
for (j = 0; j < 3; j++) {
// Dibujamos solamente si estamos en la primera columna o en la última fila
if (j < 2 && i < 1 || j == 2) {
// Dibujamos un cuadrado vinculando su posición a las variables del for
square(modulo * i + dista * i, modulo * j + dista * j, modulo);
}
}
}
} else if (ident == 2) {
// I - Ident 2
// Se calcula el ancho y el alto de la pieza
anchoAct = modulo * 1;
altoAct = modulo * 4 + dista * 3;
// Se dibuja la pieza
fill(colorI.r, colorI.g, colorI.b, transp); // Relleno con transparencia
stroke(colorI.r, colorI.g, colorI.b); // Contorno sin transparencia
for (j = 0; j < 4; j++) { // For para crear una columna de 4 cuadrados
// Dibujamos un cuadrado vinculando su posición vertical a la variable del for
square(0, modulo * j + dista * j, modulo);
}

} else if (ident == 3) {
// S – Ident 3
// Se calcula el ancho y el alto de la pieza
anchoAct = modulo * 2 + dista;
altoAct = modulo * 3 + dista * 2;
// Se dibuja la pieza
fill(colorS.r, colorS.g, colorS.b, transp); // Relleno con transparencia
stroke(colorS.r, colorS.g, colorS.b); // Contorno sin transparencia
for (i = 0; i < 2; i++) { // For encadenado para crear una retícula de 2x3
cuadrados
for (j = 0; j < 3; j++) {
// Dibujamos solamente si estamos en la primera celda de la primera fila
// o en toda la segunda fila o en la segunda celda de la tercera fila
if (j == 0 && i == 0 || j == 1 || j == 2 && i == 1) {
// Dibujamos un cuadrado vinculando su posición a las variables del for
square(modulo * i + dista * i, modulo * j + dista * j, modulo);
}
}
}

} else if (ident == 4) {
// T – Ident 4
// Se calcula el ancho y el alto de la pieza
anchoAct = modulo * 3 + dista * 2;
altoAct = modulo * 2 + dista;
// Se dibuja la pieza
fill(colorT.r, colorT.g, colorT.b, transp); // Relleno con transparencia
stroke(colorT.r, colorT.g, colorT.b); // Contorno sin transparencia
for (i = 0; i < 3; i++) { // For encadenado para crear una retícula de 3x2
cuadrados
for (j = 0; j < 2; j++) {
// Dibujamos solamente si estamos en la segunda celda de la primera fila
// o en toda la segunda fila
if (i == 1 && j == 0 || j == 1) {
// Dibujamos un cuadrado vinculando su posición a las variables del for
square(modulo * i + dista * i, modulo * j + dista * j, modulo);
}
}
}
}}

4.31 Image - get - puntillismo

/* Creo que al final con este cogido se crea lo mismo que se pedia
y a mi parecer lo veo mas sencillo, o para mi que me cuesta
realizar segun que cosas de codigo, creo que es mas facil
el que he realizado
*/

let img;
let smallPoint, largePoint;

function preload() {
img = loadImage("[Link]
Obama_482.jpg");
}

function setup() {
createCanvas(482, 482);
smallPoint = 4;
largePoint = 40;
imageMode(CENTER);
noStroke();
background(255);
[Link]();
}

function draw() {
let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
let x = floor(random([Link]));
let y = floor(random([Link]));
let pix = [Link](x, y);

let c = color ('hsb(60, 100%, 50%)');


let b = brightness(c);

fill(pix, 128);
ellipse(x, y, pointillize, pointillize);
}

You might also like