Skip to content

Instantly share code, notes, and snippets.

@Macorreag

Macorreag/bezier.js

Last active November 4, 2020 04:30
Download ZIP

Revisions

  1. Macorreag revised this gist Nov 4, 2020. 2 changed files with 68 additions and 0 deletions.
    Empty file removed gistfile1.txt
    View file
    Empty file.
    68 changes: 68 additions & 0 deletions stairs3Dillusion.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    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();

    }
  2. Macorreag revised this gist Nov 2, 2020. 13 changed files with 852 additions and 0 deletions.
    36 changes: 36 additions & 0 deletions bezier.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    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;
    }
    }
    60 changes: 60 additions & 0 deletions bricks.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    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;
    }
    }
    44 changes: 44 additions & 0 deletions cafeWall.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    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;
    }
    }
    78 changes: 78 additions & 0 deletions cubik.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,78 @@

    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;
    }
    }


    100 changes: 100 additions & 0 deletions ebbinghaus.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,100 @@
    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;
    }
    }
    47 changes: 47 additions & 0 deletions gradient.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    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;
    }
    }
    51 changes: 51 additions & 0 deletions grid.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@

    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
    }
    };
    81 changes: 81 additions & 0 deletions mixer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,81 @@
    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;
    }
    }
    93 changes: 93 additions & 0 deletions motion_binding.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    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;
    }
    }
    49 changes: 49 additions & 0 deletions poggendorff.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    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;
    }
    }
    74 changes: 74 additions & 0 deletions squares.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    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;
    }
    }
    79 changes: 79 additions & 0 deletions tessellationCross.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,79 @@
    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;
    }
    }
    60 changes: 60 additions & 0 deletions white.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    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;
    }
    }
  3. Macorreag revised this gist Nov 2, 2020. 12 changed files with 0 additions and 652 deletions.
    36 changes: 0 additions & 36 deletions bezier.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,36 +0,0 @@
    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;
    }
    }
    60 changes: 0 additions & 60 deletions bricks.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,60 +0,0 @@
    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;
    }
    }
    44 changes: 0 additions & 44 deletions cafeWall.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,44 +0,0 @@
    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;
    }
    }
    59 changes: 0 additions & 59 deletions ebbinghaus.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,59 +0,0 @@
    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);
    }

    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;
    }
    }
    Empty file added gistfile1.txt
    View file
    Empty file.
    47 changes: 0 additions & 47 deletions gradient.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,47 +0,0 @@
    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;
    }
    }
    51 changes: 0 additions & 51 deletions grid.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,51 +0,0 @@

    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
    }
    };
    93 changes: 0 additions & 93 deletions motion_binding.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,93 +0,0 @@
    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;
    }
    }
    49 changes: 0 additions & 49 deletions poggendorff.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,49 +0,0 @@
    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;
    }
    }
    74 changes: 0 additions & 74 deletions squares.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,74 +0,0 @@
    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;
    }
    }
    79 changes: 0 additions & 79 deletions tessellationCross.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,79 +0,0 @@
    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;
    }
    }
    60 changes: 0 additions & 60 deletions white.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,60 +0,0 @@
    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;
    }
    }
  4. Macorreag created this gist Nov 2, 2020.
    36 changes: 36 additions & 0 deletions bezier.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    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;
    }
    }
    60 changes: 60 additions & 0 deletions bricks.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    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;
    }
    }
    44 changes: 44 additions & 0 deletions cafeWall.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    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;
    }
    }
    59 changes: 59 additions & 0 deletions ebbinghaus.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    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);
    }

    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;
    }
    }
    47 changes: 47 additions & 0 deletions gradient.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    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;
    }
    }
    51 changes: 51 additions & 0 deletions grid.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@

    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
    }
    };
    93 changes: 93 additions & 0 deletions motion_binding.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    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;
    }
    }
    49 changes: 49 additions & 0 deletions poggendorff.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    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;
    }
    }
    74 changes: 74 additions & 0 deletions squares.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,74 @@
    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;
    }
    }
    79 changes: 79 additions & 0 deletions tessellationCross.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,79 @@
    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;
    }
    }
    60 changes: 60 additions & 0 deletions white.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    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;
    }
    }