• teste P5 3D
    https://open.spotify.com/album/5WsOL5oJ5TGQmAbkNbdvS5?si=p22lD1QEQEihs7nFa2XaCg

  • Hello world!
    Interactive Logo Animation body { margin: 0; padding: 0; overflow: hidden; } /* Constants and Variables */ const SPIN_MULTIPLIER = 45; const MIN_PARTICLE_COUNT = 200; const MAX_PARTICLE_COUNT = 700; const MIN_PARTICLE_SIZE = 12; const MAX_PARTICLE_SIZE = 50; const MIN_FORCE = 0.4; const MAX_FORCE = 0.6; const REPULSION_RADIUS = 100; const REPULSION_STRENGTH = 0.25; const IMG_RESIZED_WIDTH = 300; const IMG_SCAN_STEPS = 2; const DrawTypes = { Rect: 0, Ellipse: 1, Triangle: 2 }; var imgNames = [“facebook.png”, “amazon.png”, “twitter.png”, “visa.png”, “mcdonalds.png”, “mastercard.png”]; var particles = []; var indices = []; var imgIndex = 0; var drawType = 0; var particleCount = 550; var maxSize = 0; var img; /* Main Functions */ function setup() { let canvas = createCanvas(windowWidth, windowHeight); canvas.canvas.oncontextmenu = () => false; loadImg(imgNames[0]); } function draw() { background(0); fill(255); noStroke(); text( `** How to interact ** Move mouse over to interact with it. ** Controls ** Left-click : Switch image Right-click: Show source image + : Increase count – : Decrease count Space: Change particle type`, 50, 50); if (img == null) { return; } push(); translate(width / 2 – img.width / 2, height / 2 – img.height / 2); fill(255); noStroke(); rectMode(CENTER); particles.forEach(particle => { particle.move(); push(); translate(particle.pos.x, particle.pos.y); let spin = particle.vel.mag() * SPIN_MULTIPLIER; rotate(radians(particle.mapped_angle + spin)); fill(particle.color); switch(drawType) { case DrawTypes.Ellipse: ellipse(0, 0, particle.size, particle.size); break; case DrawTypes.Rect: rect(0, 0, particle.size, particle.size); break; case DrawTypes.Triangle: triangle( particle.size * -0.5, particle.size * -0.5, 0, particle.size, particle.size * 0.5, particle.size * -0.5); } pop(); }); rectMode(CORNER); if (mouseIsPressed && mouseButton == RIGHT) { image(img, 0, 0); } pop(); } function keyPressed() { if (key == ‘+’) { particleCount = min(particleCount + 50, MAX_PARTICLE_COUNT); spawnParticles(); } if (key == ‘-‘) { particleCount = max(particleCount – 50, MIN_PARTICLE_COUNT); spawnParticles(); } if (key == ‘ ‘) { nextDrawType(); } } function mousePressed() { if (mouseButton == LEFT) { loadNextImg(); } } /* Particle Class */ function Particle(_x, _y, _size, _color) { this.pos = new p5.Vector(img.width / 2, img.height / 2); this.vel = new p5.Vector(0, 0); this.acc = new p5.Vector(0, 0); this.target = new p5.Vector(_x, _y); this.size = _size; this.mapped_angle = map(_x, 0, img.width, -180, 180) + map(_y, 0, img.height, -180, 180); this.color = _color; this.maxForce = random(MIN_FORCE, MAX_FORCE); this.goToTarget = function() { let steer = new p5.Vector(this.target.x, this.target.y); let distance = dist(this.pos.x, this.pos.y, this.target.x, this.target.y); if (distance > 0.5) { let distThreshold = 20; steer.sub(this.pos); steer.normalize(); steer.mult(map(min(distance, distThreshold), 0, distThreshold, 0, this.maxForce)); this.acc.add(steer); } } this.avoidMouse = function() { let mx = mouseX – width / 2 + img.width / 2; let my = mouseY – height / 2 + img.height / 2; let mouseDistance = dist(this.pos.x, this.pos.y, mx, my); if (mouseDistance = imgNames.length) { imgIndex = 0; } loadImg(imgNames[imgIndex]); } function loadImg(imgName) { loadImage(imgName, newImg => { img = newImg; img.loadPixels(); img.resize(IMG_RESIZED_WIDTH, 0); spawnParticles(); }); } function setupImg() { indices = []; for (let x = 0; x < img.width; x+=IMG_SCAN_STEPS * 4) { for (let y = 0; y 10) { indices.push(index); } } } } function spawnParticles() { particles = []; setupImg(); maxSize = map( particleCount, MIN_PARTICLE_COUNT, MAX_PARTICLE_COUNT, MAX_PARTICLE_SIZE, MIN_PARTICLE_SIZE); if (indices.length == 0) { return; } for (let i = 0; i 0) { let smallestSize = null; for (let i = 0; i < particles.length; i++) { let otherParticle = particles[i]; let d = dist(x, y, otherParticle.target.x, otherParticle.target.y); let newSize = (d – (otherParticle.size / 2)) * 2; if (smallestSize == null || newSize 0) { newParticle = new Particle( x, y, min(smallestSize, maxSize) * 0.75, color(r, g, b, a)); } } else { newParticle = new Particle( x, y, maxSize, color(r, g, b, a)); } attempts += 1; if (attempts > max_attempts) { break; } } if (newParticle != null) { particles.push(newParticle); } } } function nextDrawType() { drawType++; if (drawType >= Object.keys(DrawTypes).length) { drawType = 0; } } function windowResized() { resizeCanvas(windowWidth, windowHeight); }
    • ehagaegarg
    • erg
    • qe
    • rg
    • qer
    • g