Skip to content

Instantly share code, notes, and snippets.

@Macorreag

Macorreag/bezier.js

Last active November 4, 2020 04:30
Show Gist options
  • Save Macorreag/d6cd78d5c67bd3e6451c3c747e4a2806 to your computer and use it in GitHub Desktop.
Save Macorreag/d6cd78d5c67bd3e6451c3c747e4a2806 to your computer and use it in GitHub Desktop.
Download ZIP
VisualEffects
Raw
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;
}
}
Raw
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;
}
}
Raw
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;
}
}
Raw
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;
}
}
Raw
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;
}
}
Raw
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;
}
}
Raw
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
}
};
Raw
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;
}
}
Raw
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;
}
}
Raw
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;
}
}
Raw
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;
}
}
Raw
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();
}
Raw
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;
}
}
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment