Note d'intention pour l'utilisation de P5.js avec des formes.
L'objectif de ce projet est de développer et d'explorer diverses manières de manipuler des formes circulaires à l'aide de P5.js. À travers une série de sketches, j'ai cherchée à démontrer la diversité et la flexibilité de la représentation graphique des cercles et leur animation.
1. Ballons qui montent. L'intention derrière ce sketch est de simuler des ballons rouges flottant dans les airs. Chaque ballon se déplace vers le haut de manière aléatoire et revient en bas une fois qu'il quitte la zone . Cette animation représente la légèreté et la fluidité des mouvements des ballons dans l'air.
2. Grille tetris. Ce sketch crée une grille dynamique où certaines grilles sont remplies de cercles rouges. Le but est de démontrer comment des cercles peuvent être intégrés dans une structure en grille, permettant ainsi de jouer avec des motifs ronds et de visualiser les jeux de tetrice avec les ronds et pas avec des rectangle habituelle..
3. Formes aléatoires. Ici, l'accent est mis sur la génération sur une forme ronde.
4.Cercle en rotation. Ce sketch présente un cercle en rotation avec du texte "circle" disposé le long de sa circonférence. L'animation tourne constamment, illustrant le mouvement circulaire et comment des éléments textuels peuvent être intégrés dans l'animation.
5. Cercles mangeant. Ce dernier sketch montre trois cercles rouges avec des bouches qui s'ouvrent et se ferment, ressemblant à des "Pac-Man". L'intention ici est de jouer avec l'idée d'un cercle dynamique dont une partie est animée pour donner l'impression de "manger".
Conclusion: en utilisant ces différents animations et configurations, j'ai voulu démontrer la richesse des possibilités offertes par P5.js pour manipuler des formes circulaires. Chaque sketch présente une approche unique et met en avant des techniques spécifiques de dessin et d'animation, permettant ainsi de découvrir de nouvelles façons de visualiser et d'interagir avec des formes simulations.
let balloons = []; const sketch1 = (p) => { p.setup = () => { p.createCanvas(400, 400); for (let i = 0; i < 30; i++) { let balloon = new Balloon(p.random(p.width), p.height, p.random(20, 40)); balloons.push(balloon); } }; p.draw = () => { p.background(300); for (let balloon of balloons) { balloon.move(); balloon.display(p); } }; class Balloon { constructor(x, y, diameter) { this.x = x; this.y = y; this.diameter = diameter; this.speed = p.random(1, 3); } move() { this.y -= this.speed; if (this.y < -this.diameter) { this.y = p.height + this.diameter; } } display(p) { p.fill(255, 0, 0); p.ellipse(this.x, this.y, this.diameter); } } }; new p5(sketch1, 'canvas1');
let grid; let blockSize = 30; let cols = 10; let rows = 20; let currentPiece; let fallSpeed = 1; let lastFallTime = 0; const pieces = [ [[1, 1], [1, 1]], [[1], [1], [1], [1]], [[0, 1, 0], [1, 1, 1]], [[1, 0], [1, 0], [1, 1]], [[0, 1], [0, 1], [1, 1]], [[0, 1, 1], [1, 1, 0]], [[1, 1, 0], [0, 1, 1]], ]; const sketch2 = (p) => { p.setup = () => { p.createCanvas(300, 600); grid = createEmptyGrid(cols, rows); spawnPiece(); }; p.draw = () => { p.background(220); drawGrid(p); if (p.millis() - lastFallTime > fallSpeed * 1000) { movePieceDown(); lastFallTime = p.millis(); } }; p.keyPressed = () => { if (p.keyCode === p.LEFT_ARROW) movePiece(-1, 0); if (p.keyCode === p.RIGHT_ARROW) movePiece(1, 0); if (p.keyCode === p.DOWN_ARROW) movePieceDown(); if (p.keyCode === p.UP_ARROW) rotatePiece(); }; const createEmptyGrid = (cols, rows) => { let emptyGrid = []; for (let i = 0; i < rows; i++) { emptyGrid.push(Array(cols).fill(0)); } return emptyGrid; }; const drawGrid = (p) => { for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { p.fill(255); p.rect(j * blockSize, i * blockSize, blockSize, blockSize); if (grid[i][j] === 1) { p.fill(255, 0, 0); p.ellipse(j * blockSize + blockSize / 2, i * blockSize + blockSize / 2, blockSize, blockSize); } } } drawPiece(p); }; const spawnPiece = () => { let pieceType = pieces[Math.floor(Math.random() * pieces.length)]; currentPiece = { shape: pieceType, x: Math.floor(cols / 2) - Math.floor(pieceType[0].length / 2), y: 0 }; }; const drawPiece = (p) => { for (let i = 0; i < currentPiece.shape.length; i++) { for (let j = 0; j < currentPiece.shape[i].length; j++) { if (currentPiece.shape[i][j] === 1) { p.fill(255, 0, 0); p.ellipse((currentPiece.x + j) * blockSize + blockSize / 2, (currentPiece.y + i) * blockSize + blockSize / 2, blockSize, blockSize); } } } }; const movePiece = (dx, dy) => { currentPiece.x += dx; currentPiece.y += dy; if (collision()) { currentPiece.x -= dx; currentPiece.y -= dy; if (dy === 1) { lockPiece(); clearLines(); spawnPiece(); } } }; const movePieceDown = () => { movePiece(0, 1); }; const rotatePiece = () => { let newShape = []; for (let y = 0; y < currentPiece.shape[0].length; y++) { newShape[y] = []; for (let x = 0; x < currentPiece.shape.length; x++) { newShape[y][x] = currentPiece.shape[currentPiece.shape.length - 1 - x][y]; } } let oldShape = currentPiece.shape; currentPiece.shape = newShape; if (collision()) currentPiece.shape = oldShape; }; const collision = () => { for (let i = 0; i < currentPiece.shape.length; i++) { for (let j = 0; j < currentPiece.shape[i].length; j++) { if (currentPiece.shape[i][j] === 1) { let x = currentPiece.x + j; let y = currentPiece.y + i; if (x < 0 || x >= cols || y >= rows || grid[y][x] === 1) { return true; } } } } return false; }; const lockPiece = () => { for (let i = 0; i < currentPiece.shape.length; i++) { for (let j = 0; j < currentPiece.shape[i].length; j++) { if (currentPiece.shape[i][j] === 1) { grid[currentPiece.y + i][currentPiece.x + j] = 1; } } } }; const clearLines = () => { for (let i = rows - 1; i >= 0; i--) { let fullLine = true; for (let j = 0; j < cols; j++) { if (grid[i][j] === 0) { fullLine = false; break; } } if (fullLine) { for (let k = i; k > 0; k--) { for (let j = 0; j < cols; j++) { grid[k][j] = grid[k - 1][j]; } } for (let j = 0; j < cols; j++) { grid[0][j] = 0; } i++; } } }; }; new p5(sketch2, 'canvas2');
let circleX1, circleX2, circleX3; const sketch3 = (p) => { p.setup = () => { p.createCanvas(400, 400); p.frameRate(30); circleX1 = p.random(100, 300); circleX2 = p.random(100, 300); circleX3 = p.random(100, 300); }; p.draw = () => { p.background(300); p.noFill(); p.stroke(255, 0, 0); p.strokeWeight(4); p.ellipse(circleX1, 50, 100); p.ellipse(circleX2, 150, 100); p.ellipse(circleX3, 250, 100); circleX1 += p.random(-5, 5); circleX2 += p.random(-5, 5); circleX3 += p.random(-5, 5); }; }; new p5(sketch3, 'canvas3');
let angle = 0; let radius = 100; let speed = 0.05; const sketch4 = (p) => { p.setup = () => { p.createCanvas(400, 400); p.textAlign(p.CENTER, p.CENTER); p.textSize(24); }; p.draw = () => { p.background(400); p.translate(p.width / 2, p.height / 2); p.rotate(angle); p.fill(255, 0, 0); for (let i = 0; i < 360; i += 30) { let x = p.cos(p.radians(i)) * radius; let y = p.sin(p.radians(i)) * radius; p.text('circle', x, y); } angle += speed; }; }; new p5(sketch4, 'canvas4');
const sketch5 = (p) => { p.setup = () => { p.createCanvas(200, 400); }; p.draw = () => { p.background(300); p.noStroke(); p.fill(255, 30, 20); let biteSize = p.PI / 16; let startAngle = biteSize * p.sin(p.frameCount * 0.1) + biteSize; let endAngle = p.TWO_PI - startAngle; p.arc(50, 100, 80, 80, startAngle, endAngle, p.PIE); p.arc(70, 250, 80, 80, startAngle, endAngle, p.PIE); p.arc(150, 150, 80, 80, startAngle, endAngle, p.PIE); }; }; new p5(sketch5, 'canvas5');