VisualEffects

bezier.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";

export default function Bezier() {
	var y1 = 0;
	var x2 = 5;

	function setup(p5, canvasParentRef) {
		p5.createCanvas(400, 400).parent(canvasParentRef);
		p5.background(220);
	}

	function draw(p5) {

		// y1 starts with a value of 0, and increases by 5 for each line
		// x1 starts with a value of 50, and increases by 5 for each line
		p5.line(0, y1, x2, 400);

		y1 = y1 + 5;
		x2 = x2 + 5;
	}

	if (typeof window !== "undefined") {
		const Sketch = loadable(() => import("react-p5"));
		return (
			<Sketch
				className="d-flex justify-content-center"
				setup={setup}
				draw={draw}
			/>
		);
	} else {
		return null;
	}
}

bricks.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";

export default function Bricks() {
	let brick1;
	let brick2;
	let xPos;
	let xSpeed;

	function setup(p5, canvasParentRef) {
		p5.createCanvas(720, 400).parent(canvasParentRef);
		xPos = 0;
		xSpeed = 1;
	}

	function draw(p5) {
		p5.background(255);
		if (p5.mouseIsPressed) {
			p5.background(100);
		}

		xPos += xSpeed;
		if (xPos + 100 >= p5.width || xPos <= 0) {
			xSpeed *= -1;
		}
		
		if (!p5.mouseIsPressed) {
			let len = 12;
			for (let i = 0; i < p5.width / len; i++) {
				if (i % 2 == 0) {
					let bar = p5.rect(i * len, p5.height, len, -p5.height);
					bar.fill("black");
				}
			}
		}
		brick1 = p5.rect(xPos, 100, 100, 50);
		brick1.fill("white");
		brick1.stroke("white");
		brick1.xSpeed = xSpeed;

		brick2 = p5.rect(xPos, 250, 100, 50);
		brick2.fill("black");
		brick2.stroke("black");
		brick2.xSpeed = xSpeed;
	}

	if (typeof window !== "undefined") {
		const Sketch = loadable(() => import("react-p5"));
		return (
			<Sketch
				className="d-flex justify-content-center"
				setup={setup}
				draw={draw}
			/>
		);
	} else {
		return null;
	}
}

cafeWall.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";

export default function CafeWall() {
	let anchoLineaY = 2;
	let anchoLineaX = 1;
	let alturaCelda = 26;
	let anchoCelda = 30;
	let filas = 9;

	const setup = (p5, canvasParentRef) => {
		p5.createCanvas(400,(alturaCelda + anchoLineaY) * filas + anchoLineaY).parent(canvasParentRef);
		p5.smooth();
	};

	const draw = (p5) => {
		p5.background("#888");
		for (var i = 0; i < filas; i++) {
			var yPos = i * (alturaCelda + anchoLineaY) + anchoLineaY;
			var numCells = Math.ceil(400 / anchoCelda) + 3;

			for (var j = -80; j < numCells; j++) {
				if (j % 2 === 0) 
					p5.fill(0);
				else 
					p5.fill("#fff");

				p5.noStroke();
				var pos = i % 4;
				if (pos === 3) 
					pos = 1;
				p5.rect(j * (anchoCelda + anchoLineaX) - (((pos * p5.mouseX) / 15) % (2 * anchoCelda)) + 15,yPos,anchoCelda,alturaCelda);
			}
		}
	};

	if (typeof window !== "undefined") {
		const Sketch = loadable(() => import("react-p5"));
		return <Sketch className="d-flex justify-content-center" setup={setup} draw={draw} />;
	} else {
		return null;
	}
}

cubik.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";
import imagen from "../../assets/lines.png";
import imagen2 from "../../assets/lines2.png";


export default function Cubik() {

  
  let img;
  let img2;
  let cam;
  let delta = 0.5;

  function preload(p5) {
    img = p5.loadImage(imagen);
    img2 = p5.loadImage(imagen2);
  }
  
  function setup(p5, canvasParentRef) {
    p5.createCanvas(400, 400, p5.WEBGL).parent(canvasParentRef);;
  
    cam = p5.createCamera();
  }
  
  function draw(p5) {
    p5.background(0);
  
    p5.texture(img2);
  
    if (p5.mouseIsPressed) {
      p5.push();
      cam.move(0, delta, 0);

      if (p5.frameCount % 100 === 0) {
        delta *= -1;
      }

      p5.rotateX(p5.millis() / 1000);
      p5.box(800, 800, 800);  
      p5.pop();
    
      p5.push();
      p5.rotateX(p5.millis() / 1000);
      p5.texture(img);
      p5.box(150, 150, 150);
      p5.pop();
    } 
    else {
      p5.push();
  
      cam.move(0, delta, 0);
      if (p5.frameCount % 100 === 0) {
        delta *= -1;
      }
  
      p5.box(970, 1050, 900);
      p5.pop();
    
      p5.push();
      p5.texture(img);
      p5.box(150, 150, 150);
      p5.pop();
    }
  }

  if (typeof window !== "undefined") {
    const Sketch = loadable(() => import("react-p5"));
    return <Sketch className="d-flex justify-content-center" setup={setup} draw={draw} preload={preload} />;
  } 
  else {
    return null;
  }
}

ebbinghaus.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";

export default function Ebbinghaus() {
	function setup(p5, canvasParentRef) {
		p5.createCanvas(550, 400).parent(canvasParentRef);
	}

	function draw(p5) {
		p5.background(220);
		let k = p5.map(p5.mouseX, 0, p5.width, 200, 0);

		p5.noStroke();
		p5.fill("yellow");
		p5.ellipse(160, 200, 50, 50);

		p5.fill(155, 0, 215, k);

		p5.ellipse(110, 120, 90, 90);
		p5.ellipse(210, 120, 90, 90);

		p5.ellipse(110, 280, 90, 90);
		p5.ellipse(210, 280, 90, 90);

		p5.ellipse(60, 200, 90, 90);
		p5.ellipse(260, 200, 90, 90);

		p5.fill("yellow");
		p5.ellipse(450, 200, 50, 50);

		p5.fill(155, 0, 215, k);

		p5.ellipse(450, 154, 25, 25);
		p5.ellipse(450, 246, 25, 25);

		p5.ellipse(400, 200, 25, 25);
		p5.ellipse(500, 200, 25, 25);

		p5.ellipse(415, 235, 25, 25);
		p5.ellipse(485, 235, 25, 25);

		p5.ellipse(415, 164, 25, 25);
		p5.ellipse(485, 164, 25, 25);
	}

	function setup(p5, canvasParentRef) {
		p5.createCanvas(600, 400).parent(canvasParentRef);
	}

	function draw(p5) {
		p5.background(220);
		let k = p5.map(p5.mouseX, 0, p5.width, 200, 0);

		p5.noStroke();
		p5.fill("red");
		p5.ellipse(160, 200, 50, 50);

		p5.fill(200, 150, 215, k);

		p5.ellipse(110, 120, 90, 90);
		p5.ellipse(210, 120, 90, 90);

		p5.ellipse(110, 280, 90, 90);
		p5.ellipse(210, 280, 90, 90);

		p5.ellipse(60, 200, 90, 90);
		p5.ellipse(260, 200, 90, 90);

		p5.fill("red");
		p5.ellipse(450, 200, 50, 50);

		p5.fill(200, 150, 215, k);

		p5.ellipse(450, 154, 25, 25);
		p5.ellipse(450, 246, 25, 25);

		p5.ellipse(400, 200, 25, 25);
		p5.ellipse(500, 200, 25, 25);

		p5.ellipse(415, 235, 25, 25);
		p5.ellipse(485, 235, 25, 25);

		p5.ellipse(415, 164, 25, 25);
		p5.ellipse(485, 164, 25, 25);
	}

	if (typeof window !== "undefined") {
		const Sketch = loadable(() => import("react-p5"));
		return (
			<Sketch
				className="d-flex justify-content-center"
				setup={setup}
				draw={draw}
			/>
		);
	} else {
		return null;
	}
}

gradient.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";

export default function Gradient() {
	let b1, b2, d;

	function setup(p5, canvasParentRef) {
		p5.createCanvas(720, 400).parent(canvasParentRef);

		// Definir colores
		b1 = p5.color(220);
		b2 = p5.color(30);
		d = p5.color(125);
	}

	function draw(p5) {
		// Fondo
		for (let i = 0; i <= p5.width; i++) {
			let inter = p5.map(i, 0, p5.width, 0, 1);
			let c = p5.lerpColor(b2, b1, inter);
			p5.stroke(c);
			p5.line(i, 0, i, p5.height);
		}

		if(p5.mouseIsPressed){
			p5.background(80);
		}

		p5.stroke(d);
		p5.rect(110, 150, 500, 100);
		p5.fill(d);
	}

	if (typeof window !== "undefined") {
		const Sketch = loadable(() => import("react-p5"));
		return (
			<Sketch
				className="d-flex justify-content-center"
				setup={setup}
				draw={draw}
			/>
		);
	} else {
		return null;
	}
}

grid.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";


export default function Grid () {

    function setup(p5, canvasParentRef) {
        p5.createCanvas(400, 400).parent(canvasParentRef);
        p5.strokeWeight(3);        // medium weight lines
        p5.smooth();               // antialias lines
        p5.stroke(100, 100, 100);  // dark grey colour for lines
        p5.noLoop();
    
    }
    
    function draw(p5) {
        p5.background(0);          // black background
        var step = 25;          // grid spacing
    
        //vertical lines
        for (var x = step; x < p5.width; x = x + step) {
            p5.line(x, 0, x, p5.height);
        }
    
        //horizontal lines
        for (var y = step; y < p5.height; y = y + step) {
            p5.line(0, y, p5.width, y);
        }
    
        // Circles
        p5.ellipseMode(p5.CENTER);
        p5.stroke(255, 255, 255);  // white circles
        for (var i = step; i < p5.width -5; i = i + step) {
            for (var j = step; j < p5.height -15; j = j + step) {
                p5.strokeWeight(6);
                p5.point(i, j);
                p5.strokeWeight(3);
            }
        }
    }
    
    if (typeof window !== "undefined") {
      const Sketch = loadable(() => import("react-p5"))
      return <Sketch className="d-flex justify-content-center" setup={setup} draw={draw} />;
    }
    else {
      return null
    }
};

mixer.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";

export default function Mixer() {
    var bugs = [];
    var speed = 10;
    
    const setup = (p5, canvasParentRef) => {
      p5.createCanvas(720, 400).parent(canvasParentRef);
      p5.rectMode(p5.CENTER);
      p5.angleMode(p5.DEGREES);
      
      for(var j = 0;j < 20; ++j){
        for(var i = 0; i < 20; ++i){
          var cr = new cross();
          cr.move(i*50, j*15);
          bugs.push(cr);      
        }    
      }
    }
    
    const draw = (p5) => {
      p5.background(0);
      for(var i = 0; i < bugs.length; ++i){
        bugs[i].display(p5);
      }
    }
    
    function keyPressed(p5) {        
        if(p5.keyCode === p5.LEFT_ARROW)
            speed -= 10;
        else if(p5.keyCode === p5.RIGHT_ARROW)
            speed += 10;
    }
    // clase cross
    class cross {
    
      constructor() {
        this.width = 50;
        this.height = 15;
        this.angle = 0;
        this.x = 0;
        this.y = 0;    
      }
    
      move(dx, dy) {
        this.x += dx;
        this.y += dy;
      }
    
      display(p5) {
        if(p5.mouseIsPressed){          
          this.angle += speed;
        }else
          this.angle = 0;
        p5.push();
        p5.fill(100);    
        p5.translate(this.x*1.5, this.y*0.9);        
        p5.rotate(this.angle);
        p5.rect(0,0, this.width, this.height);
        p5.rect(0,0, this.height, this.width);           
        p5.pop();
      }
    
    }

	if (typeof window !== "undefined") {
		const Sketch = loadable(() => import("react-p5"));
		return (
			<Sketch
				className="d-flex justify-content-center"
				setup={setup}
                draw={draw}
                keyPressed={keyPressed}
			/>
		);
	} else {
		return null;
	}
}

motion_binding.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";

export default function Motion_Binding() {
	let x1, x2, y1, y2;
	let lenght, pdist;
	let xSpeed1, xSpeed2;
	let margin;

	function setup(p5, canvasParentRef) {
		p5.createCanvas(700, 500).parent(canvasParentRef);
		x1 = 250;
		y1 = 260;
		x2 = 215;
		y2 = 225;
		lenght = 100;
		pdist = 150;
		xSpeed1 = 2;
		xSpeed2 = 2;
		margin = 5;
		p5.rectMode(p5.CENTER);
	}

	function draw(p5) {
		p5.background(125);
		
		p5.strokeWeight(6);
		p5.stroke("blue");
		p5.line(x1+margin, y1+margin, x1+lenght-margin, y1+lenght-margin);
		p5.line(x1+pdist+margin, y1-pdist+margin, x1+pdist+lenght-margin, y1-pdist+lenght-margin);
		p5.line(x2+margin, y2-margin, x2+lenght-margin, y2-lenght+margin);
		p5.line(x2+pdist+margin, y2+pdist-margin, x2+pdist+lenght-margin, y2+pdist-lenght+margin);

		if (p5.mouseIsPressed) {
			p5.push();
			p5.translate((p5.width/4)+30, (p5.height/2)+10);
			p5.rotate(p5.PI/4);
			p5.stroke("red");
			p5.fill("red");
			p5.rect(0, 0, 90, 90);
			p5.pop();

			p5.push();
			p5.translate(((p5.width/4)*3)-30, (p5.height/2)+10);
			p5.rotate(p5.PI/4);
			p5.stroke("red");
			p5.fill("red");
			p5.rect(0, 0, 100, 100);
			p5.pop();

			p5.push();
			p5.translate((p5.width/2), (p5.height/4)-10);
			p5.rotate(p5.PI/4);
			p5.stroke("red");
			p5.fill("red");
			p5.rect(0, 0, 100, 100);
			p5.pop();

			p5.push();
			p5.translate((p5.width/2), ((p5.height/4)*3)+30);
			p5.rotate(p5.PI/4);
			p5.stroke("red");
			p5.fill("red");
			p5.rect(0, 0, 100, 100);
			p5.pop();
		}

		x1 += xSpeed1;
		y1 -= xSpeed1;
		x2 += xSpeed2;
		y2 += xSpeed2;
		if (x1 > (p5.width / 2) - lenght || x1 < (p5.width / 2) - (50 + lenght)) {
			xSpeed1 *= -1;
		}
		if (x2 > (p5.width / 2) - lenght || x2 < (p5.width / 2) - (50 + lenght)) {
			xSpeed2 *= -1;
		}
	}

	if (typeof window !== "undefined") {
		const Sketch = loadable(() => import("react-p5"));
		return (
			<Sketch
				className="d-flex justify-content-center"
				setup={setup}
				draw={draw}
			/>
		);
	} else {
		return null;
	}
}

poggendorff.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";

export default function Poggendorff() {

	let d;

	function setup(p5, canvasParentRef) {
		p5.createCanvas(400, 400).parent(canvasParentRef);
		d = p5.color(125);
	}

	function draw(p5) {
		p5.background(255);

		p5.strokeWeight(4);
		p5.stroke("red");
		p5.line(100, 20, 200, 200);
		
		p5.strokeWeight(4);
		p5.stroke("green");
		p5.line(200, 200, 300, 380);
		
		p5.strokeWeight(4);
		p5.stroke("blue");
		p5.line(220, 200, 320, 380);

		if(!p5.mouseIsPressed){
			p5.fill(d);
			p5.stroke(d);
			p5.rect(160, 20, 80, 360);
		}

	}

	if (typeof window !== "undefined") {
		const Sketch = loadable(() => import("react-p5"));
		return (
			<Sketch
				className="d-flex justify-content-center"
				setup={setup}
				draw={draw}
			/>
		);
	} else {
		return null;
	}
}

squares.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";

export default function Squares() {
	let angle, xSpeed;

	function setup(p5, canvasParentRef) {
		p5.createCanvas(400, 400).parent(canvasParentRef);
		angle = 0.0;
		xSpeed = 6;
		p5.rectMode(p5.CENTER);
	}

	function draw(p5) {
		p5.background(255);
		
		p5.push();
		p5.translate(p5.width/2, p5.height/2);
		p5.rotate(p5.PI/360*angle);
		p5.stroke("blue");
		p5.fill("blue");
		p5.rect(0, 0, 250, 250);
		p5.pop();

		if (!p5.mouseIsPressed) {
			p5.push();
			p5.translate(83, 83);
			p5.stroke("orange");
			p5.fill("orange");
			p5.rect(0, 0, 195, 195);
			p5.pop();

			p5.push();
			p5.translate(317, 83);
			p5.stroke("orange");
			p5.fill("orange");
			p5.rect(0, 0, 195, 195);
			p5.pop();

			p5.push();
			p5.translate(83, 317);
			p5.stroke("orange");
			p5.fill("orange");
			p5.rect(0, 0, 195, 195);
			p5.pop();

			p5.push();
			p5.translate(317, 317);
			p5.stroke("orange");
			p5.fill("orange");
			p5.rect(0, 0, 195, 195);
			p5.pop();
		}

		angle += xSpeed;
		if (angle > 360 || angle < 0) {
			angle = 0;
		}
	}

	if (typeof window !== "undefined") {
		const Sketch = loadable(() => import("react-p5"));
		return (
			<Sketch
				className="d-flex justify-content-center"
				setup={setup}
				draw={draw}
			/>
		);
	} else {
		return null;
	}
}

stairs3Dillusion.js

function setup() {
  createCanvas(600, 600, WEBGL);
  rectMode(CENTER);
  stroke("white");
  angleMode(DEGREES);
  camera(-400, -300, 300, 0, 0, 0, 0, 1, 0);
}

function draw() {
  background(100);
  orbitControl();
  
  push();
    translate(0, -50, -50);
    rect(0, 0, 300, 300);
  pop();
  
  push();
    rotateX(90);
    translate(0, 100, -100);
    rect(0, 0, 300, 300);
  pop();
  
  push();
    stroke(180);
    strokeWeight(2);
    //Escalera sombra
    line(-100, 100, -48, -25, 100, -48);
    line(-100, 100, 0, -25, 100, 0);
    line(-100, 100, 50, -25, 100, 50);
    line(-100, 100, 100, -25, 100, 100);
    line(-100, 100, 150, -25, 100, 150);
    line(-100, 50, -50, -25, 50, -50);
    line(-100, 0, -50, -25, 0, -50);
    line(-100, -50, -50, -25, -50, -50);
    line(-100, -100, -50, -25, -100, -50);
  
    line(-100, -125, -50, -100, 100, -48);
    line(-25, -125, -50, -25, 100, -48);
    line(-100, 100, 175, -100, 100, -48);
    line(-25, 100, 175, -25, 100, -48);
    //Escalera
    stroke("black");
    strokeWeight(3);
    line(25, 99, -48, 130, 99, -48);
    line(-8, 99, 12, 89, 99, 12);
    strokeWeight(2);
    line(-38, 99, 64, 52, 99, 64);
    line(-65, 99, 111, 19, 99, 111);
    line(-88, 99, 152, -8, 99, 152);
  
    strokeWeight(3);
    line(-9, 40, -49, 89, 40, -49);
    strokeWeight(2);
    line(-38, -14, -49, 52, -14, -49);
    line(-65, -61, -49, 19, -61, -49);
    line(-88, -102, -49, -9, -102, -49);
  
    line(-100, -125, -49, 25, 100, -48);
    line(-25, -125, -49, 130, 100, -48);
    line(-100, 99, 175, 25, 99, -48);
    line(-25, 99, 175, 130, 99, -48);
  
    stroke("white");
    strokeWeight(1);
  pop();
  
}

tessellationCross.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";

export default function TessellationCross() {
	var angle = 90;
	var speed = 0.9;
	var turningSense = true;
	var backgroundColor = 255;
	function setup(p5, canvasParentRef) {
		p5.createCanvas(400, 400).parent(canvasParentRef);
		// Change grips of rect
		p5.rectMode(p5.CENTER);
		p5.angleMode(p5.DEGREES);
	}

	function draw(p5) {
		// y1 starts with a value of 0, and increases by 5 for each line
		// x1 starts with a value of 50, and increases by 5 for each line

		p5.background(backgroundColor);

		for (var j = -5; j < 6; j++) {
			if (turningSense) {
				// Black crosses
				for (var i = -2; i < 7; i++) {
					p5.fill("black");
					p5.noStroke();

					p5.push();
					p5.translate(i * 25 + j * 75, i * 75 - j * 25);
					p5.rotate(angle);
					p5.rect(0, 0, 75, 25);
					p5.rect(0, 0, 25, 75);
					p5.pop();
				}
			} else {
				// White crosses
				for (var i = -2; i < 7; i++) {
					p5.fill("white");
					p5.noStroke();

					p5.push();
					p5.translate(50 + i * 25 + j * 75, 25 + i * 75 - j * 25);
					p5.rotate(angle);
					p5.rect(0, 0, 75, 25);
					p5.rect(0, 0, 25, 75);
					p5.pop();
				}
			}
		}

		angle = angle - speed;

		if (angle >= 90 || angle <= 0) {
			speed *= -1;
			turningSense = !turningSense;

			if (backgroundColor == 0) {
				backgroundColor = 255;
			} else {
				backgroundColor = 0;
			}
		}
	}

	if (typeof window !== "undefined") {
		const Sketch = loadable(() => import("react-p5"));
		return (
			<Sketch
				className="d-flex justify-content-center"
				setup={setup}
				draw={draw}
			/>
		);
	} else {
		return null;
	}
}

white.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import loadable from "@loadable/component";

export default function White() {

	let d;

	function setup(p5, canvasParentRef) {
		p5.createCanvas(400, 400).parent(canvasParentRef);
		d = p5.color(125);
	}

	function draw(p5) {
		p5.background(255);

		p5.stroke(d);
		p5.fill(d);
		p5.rect(100, 0, 50, p5.height);

		if(!p5.mouseIsPressed){
			let len = 12;
			for (let i = 0; i < p5.height / len; i++) {
				if (i % 2 == 0) {
					p5.fill("black");
					p5.rect(0, i * len, p5.width, len);
				}
			}
		}
		
		p5.stroke(d);
		p5.fill(d);
		p5.rect(250, 0, 50, p5.height);

		if(!p5.mouseIsPressed){
			let len = 12;
			for (let i = 0; i < p5.height / len; i++) {
				if (i % 2 == 1) {
					p5.fill("white");
					p5.stroke("white");
					p5.rect(p5.width / 2, i * len + 1, p5.width / 2, len - 2);
				}
			}
		}

	}

	if (typeof window !== "undefined") {
		const Sketch = loadable(() => import("react-p5"));
		return (
			<Sketch
				className="d-flex justify-content-center"
				setup={setup}
				draw={draw}
			/>
		);
	} else {
		return null;
	}
}