jpupper · fazeaction · Mar 24, 2022
diff --git a/index.html b/index.html
@@ -27,6 +27,7 @@
         }
         var fxrand = sfc32(...hashes)                                                                                      //---- /do not edit the following code
     </script>
+    <script src="./libs/p5.min.js"></script>
 </head>
   <body>
 	<script type="module" src="./js/script.js"></script>

diff --git a/js/fps.js b/js/fps.js
@@ -1,8 +1,5 @@
-import p5 from 'p5';
-
-class FPS extends p5 {
+class FPS {
 	constructor() {
-		super(() => { })
 		this.fps = document.createElement('div');
 		this.fps.style.position = 'fixed';
 		this.fps.style.left = '10px';
@@ -12,16 +9,16 @@ class FPS extends p5 {
 		this.fps.style.fontSize = '30px';
 		this.fps.style.padding = '10px';
 		document.body.append(this.fps);
-		this.prevFrame = this.millis();
+		this.prevFrame = millis();
 		this.frame = 0;
 		this.acum = 0;
 		this.rate = 20;
 	}
 
 	update() {
 		this.frame++;
-		let dt = this.millis() - this.prevFrame;
-		this.prevFrame = this.millis();
+		let dt = millis() - this.prevFrame;
+		this.prevFrame = millis();
 		this.acum += dt;
 		if (this.frame % this.rate == 0) {
 			this.fps.innerHTML = (1000 / (this.acum / this.frame)).toFixed(1);

diff --git a/js/interface.js b/js/interface.js
@@ -1,10 +1,7 @@
 
 export class Interface {
 	//var cosos = [];
-	constructor(ctx,RM) {
-
-
-		this.ctx = ctx;
+	constructor(RM) {
 		this.drawActive = true;
 		this.RM = RM;
 		this.generateSliders();
@@ -13,23 +10,13 @@ export class Interface {
 		this.cajitas = [];
 		this.sliders = [];
 
-		const { windowWidth,
-			windowHeight,
-			width,
-			height,
-			mouseX,
-			mouseY,
-			touches,
-			mouseIsPressed
-			 } = this;
-
 		let margintop = 20;
 		let sepy = 30;
 		let marginsepydown = 10;
 		let yy = margintop;
 		let w = 150;
 		let h = sepy;
-	
+
 		if (this.RM.objts.length > 0 && this.RM.shorojb[this.RM.activeRender] != 1) {
 			if (this.RM.objts[this.RM.activeRender].localUniformsNames.length > 0 ) {
 				for (let i = 0; i < this.RM.objts[this.RM.activeRender].localUniformsNames.length; i++) {
@@ -81,8 +68,8 @@ export class Interface {
 		}
 
 		//console.log("asas");
-		this.fill(255,0,0);
-		this.ellipse(this.mouseX, this.mouseY, 150, 200);
+		fill(255,0,0);
+		ellipse(mouseX, mouseY, 150, 200);
 	}
 	cleanSliders() {
 		this.cajitas = [];
@@ -96,34 +83,33 @@ export class Interface {
 }
 
 export class Cajita{
-	constructor(ctx,x, y, name, index, isActiveOne) {
+	constructor(x, y, name, index, isActiveOne) {
 
-		this.ctx = ctx;
-		this.pos = this.createVector(x, y);
+		this.pos = createVector(x, y);
 		this.name = name;
 		this.index = index;
 		this.w = 200;
 		this.h = 30;
 		this.active = isActiveOne;
 
-		
+
 	}
 	draw() {
 		let txt = this.name + " " + this.index;
 		if (this.active) {
-			this.fill(255);
+			fill(255);
 		} else {
-			this.fill(0);
+			fill(0);
 		}
-		this.rect(this.pos.x, this.pos.y, this.textWidth(txt), this.h);
-		this.textAlign(this.LEFT, this.CENTER);
+		rect(this.pos.x, this.pos.y, textWidth(txt), this.h);
+		textAlign(this.LEFT, this.CENTER);
 
 		if (this.active) {
-			this.fill(0);
+			fill(0);
 		} else {
-			this.fill(255);
+			fill(255);
 		}
-		this.text(txt, this.pos.x, this.pos.y + 15);
+		text(txt, this.pos.x, this.pos.y + 15);
 		//rect(mouseX - windowWidth/2,mouseY - windowHeight/2, 200, 400);
 	}
 	update() {
@@ -132,9 +118,8 @@ export class Cajita{
 }
 export class Slider{
 
-	constructor(ctx,x, y, name, value, w, h) {
-		this.ctx = ctx;
-		this.pos = this.createVector(x, y);
+	constructor(x, y, name, value, w, h) {
+		this.pos = createVector(x, y);
 		this.name = name;
 		this.w = w;
 		this.h = h;
@@ -150,35 +135,35 @@ export class Slider{
 		let my = mouseY ;
 
 		//FONDO
-		this.fill(0);
-		this.rect(xx, yy, this.w, this.h);
+		fill(0);
+		rect(xx, yy, this.w, this.h);
 
 		if (this.isFxHashControlled) {
 			if (overRect(mx, my, xx, yy, this.w, this.h)) {
-				this.fill(255,0,0);
+				fill(255,0,0);
 				if (mouseIsPressed) {
 					this.value = map(mx, xx, xx + this.w, 0.0, 1.0);
 					console.log(this.value);
 				}
 			} else {
-				this.fill(150,0,0);
+				fill(150,0,0);
 			}
 		} else {
 			if (overRect(mx, my, xx, yy, this.w, this.h)) {
-				this.fill(255);
+				fill(255);
 				if (mouseIsPressed) {
 					this.value = map(mx, xx, xx + this.w, 0.0, 1.0);
 					console.log(this.value);
 				}
 			} else {
-				this.fill(150);
+				fill(150);
 			}
         }
 		//RECT SUPERIOR:
-		this.rect(xx, yy, map(this.value, 0., 1., 0, this.w), this.h);
-		this.fill(255);
-		this.textSize(20);
-		this.textAlign(CENTER, CENTER);
-		this.text(this.name, xx+ this.w/2, yy+this.h/2);
+		rect(xx, yy, map(this.value, 0., 1., 0, this.w), this.h);
+		fill(255);
+		textSize(20);
+		textAlign(CENTER, CENTER);
+		text(this.name, xx+ this.w/2, yy+this.h/2);
 	}
 }
diff --git a/js/script.js b/js/script.js
@@ -1,44 +1,38 @@
-import { p5i } from 'p5i'
 import {RenderManager} from "./shaderrender";
 import { Interface } from './interface'
 import { Timeline } from './timeline'
 import { FPS } from './fps'
 
-const { mount, createCanvas, translate, ellipse } = p5i()
-
-const sketch = {
-	setup({windowWidth, windowHeight}){
+window.setup=function(){
 		createCanvas(windowWidth, windowHeight);
-	},
+	}
 
-	preload(ctx) {
-		this.RM = new RenderManager(ctx);
-		this.RM.addShader("shaders/generative/fondodesolated.frag", 0);
-		//this.RM.addShader("shaders/imageprocessing/cgamadness.frag", 1);
-		//this.fps = new FPS();
-		this.timeline = new Timeline(ctx);
-		//this.I = new Interface(this.RM);
+window.preload=function() {
+		this.RM = new RenderManager();
+		this.RM.addShader("shaders/generative/fondodesolated.frag", 0, "fondodesolated");
+		// this.RM.addShader("shaders/imageprocessing/cgamadness.frag", 1, "cgamadness");
+		this.fps = new FPS();
+		this.timeline = new Timeline();
+		console.log(this.RM)
+		this.I = new Interface(this.RM);
 		// RM.addShader("shaders/imageprocessing/cgamadness.frag",1);
 		// this.windowResized()
-	},
+	}
 
-	draw({mouseX, mouseY}) {
+window.draw= function () {
 		// this.translate(-width / 2, -height / 2, 0); //this is necesary for setting the point of origin as usual
 		translate(0 , 0,  0); //this is necesary for setting the point of origin as usual
-		//this.fps.update();
+		this.fps.update();
 		this.timeline.update();
 		this.RM.draw();
 		this.RM.update(this.timeline.getTime());
 		//this.RM.ellipse(100, 100, 80, 80);
-		//this.I.update();
-		//this.I.draw();
+		this.I.update();
+		this.I.draw();
 		ellipse(mouseX, mouseY, 20, 20);
-	},
+	}
 
-	windowResized({windowWidth, windowHeight}) {
+window.windowResized = function () {
 		this.resizeCanvas(windowWidth, windowHeight);
 		this.RM.resize();
 	}
-}
-
-mount(document.getElementById('canvas'), sketch)
diff --git a/js/shaderrender.js b/js/shaderrender.js
@@ -4,9 +4,7 @@ let WEBGL_ON = false; //Algunas funcionan con esto otras no. //Si cambia esto ca
 
 class RenderManager{
 	//var cosos = [];
-	constructor(ctx){
-		this.ctx = ctx;
-
+	constructor(){
 		this.pgs = [];//ARRAY DE LOS PGRAPHICS
 		this.objts = [];//ARRAY DE LOS OBJETOS
 		this.shorojb = []; //ESTO ES PARA QUE SEPA SI TIPO TIENE QUE O ACTUALIZAR EL SHADER O EL OBJETO.
@@ -20,9 +18,8 @@ class RenderManager{
 	}
 
 	addShader(dir,index,_name){
-		this.objts[index] = new ShaderManager(dir,  this.ctx);
+		this.objts[index] = new ShaderManager(dir);
 		this.objts[index].name = _name;
-		const {createGraphics, windowWidth, windowHeight, WEBGL} = this.ctx
 		let auxpg;
 			auxpg = createGraphics(windowWidth, windowHeight, WEBGL);
 
@@ -36,7 +33,6 @@ class RenderManager{
 
 	}
 	addP5draw(obj,index){
-		const {createGraphics, windowWidth, windowHeight, WEBGL} = this.ctx
 		if (WEBGL_ON) {
 			this.pgs[index] = createGraphics(windowWidth, windowHeight, WEBGL);
 		} else {
@@ -57,15 +53,15 @@ class RenderManager{
 	resize(){
 		for (var i =0; i<this.pgs.length; i++){
 			console.log("RISIZ "+i);
-			this.pgs[i].resizeCanvas(this.ctx.windowWidth,this.ctx.windowHeight);
+			this.pgs[i].resizeCanvas(windowWidth, windowHeight);
 		}
 	}
 
 
 	// draw(_x,_y,_w,_h){
 	draw(_x,_y,_w,_h){
-		let w = this.ctx.windowWidth;
-		let h = this.ctx.windowHeight;
+		let w = windowWidth;
+		let h = windowHeight;
 
 		if (_w) {
 			w = _w;
@@ -83,7 +79,7 @@ class RenderManager{
 		}
 		this.updateDrawOnBuffers();
 		if (this.pgs.length > 0 && this.pgs[this.activeRender] != null) {
-			this.ctx.image(this.pgs[this.activeRender], x, y, w, h);
+			image(this.pgs[this.activeRender], x, y, w, h);
 		}
 	}
 	updateDrawOnBuffers() {
@@ -96,7 +92,7 @@ class RenderManager{
 				if (this.objts[i].loaded) {
 					this.pgs[i].shader(this.objts[i].sh);
 				}
-				this.pgs[i].rect(this.ctx.windowWidth, this.ctx.windowHeight, 0, 0);
+				this.pgs[i].rect(windowWidth, windowHeight, 0, 0);
 			}
 		}
 	}
@@ -148,9 +144,7 @@ class RenderManager{
 }
 
 class ShaderManager{
-	constructor(dir, ctx) {
-		this.ctx = ctx
-
+	constructor(dir) {
 		this.loaded = false;
 		this.reservedWords = ["feedback","resolution","time",
 			"mouse","tx","tx2","tx3","let","mousePressed",
@@ -164,7 +158,7 @@ class ShaderManager{
 
 			this.name = dir;
 			//pasarAarray();
-			this.ctx.loadStrings(dir, (result) => {
+			loadStrings(dir, (result) => {
 				let localUniformsValues = [];
 				let localUniformsNames = [];
 				for (let i = 0; i < result.length; i++) {
@@ -188,7 +182,7 @@ class ShaderManager{
 				this.localUniformsNames = localUniformsNames;
 				this.localUniformsValues = localUniformsValues;
 			});0
-			this.sh = this.ctx.loadShader('shaders/base.vert', this.dir, () => {
+			this.sh = loadShader('shaders/base.vert', this.dir, () => {
 				this.loaded = true;
 			});
 		}
@@ -235,7 +229,6 @@ class ShaderManager{
 	update(_pg, time) {
 		//This are the global uniforms. The ones for all shaders
 		//Estas son los uniforms globales, las que entran en todos los shaders
-		const {width, height, mouseIsPressed, mouseX, mouseY, touches, millis} = this.ctx
 		if (this.loaded) {
 			this.sh.setUniform("feedback",_pg)
 			this.sh.setUniform("resolution", [width, height])