Skip to content

Commit

Permalink
display patterns via p5
Browse files Browse the repository at this point in the history
  • Loading branch information
@tmhglnd
tmhglnd committed Jul 26, 2022
1 parent 0610e9f commit f6ccd00
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 128 deletions.
157 changes: 95 additions & 62 deletions public/bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32653,69 +32653,88 @@ let hydraCanvas = function(c, u) {
}).start()
}

/*// p5 Canvas
const p5Canvas = (p5, id) => {
// video variables
let capture;

let constraints = {
audio: false,
video: {
facingMode: {
exact: 'user'
// exact: 'environment'
},
// mandatory: {
// minWidth: 1280,
// minHeight: 720
// },
// optional: [{
// maxFrameRate: 60,
// }]
}
};
// this.cam = this.constraints;
let cam = 'VIDEO'; //enable while debugging

p5.setup = (id) => {
console.log('=> P5.js initialized');
let cnv = p5.createCanvas(p5.windowWidth, p5.windowHeight);
cnv.parent(id);
// p5 Canvas
const p5Canvas = function(c) {
this.canvas = document.getElementById(c);
this.canvas.style.display = 'none';

capture = p5.createCapture(cam);
capture.hide();
this.display = function(d) {
this.canvas.style.display = 'inline';
this.sketch.loop();
}

p5.windowResized = () => {
p5.resizeCanvas(p5.windowWidth, p5.windowHeight);

capture = p5.createCapture(cam);
capture.hide();
this.hide = function() {
this.canvas.style.display = 'none';
this.sketch.noLoop();
}

p5.draw = () => {
// p5.background(20, 70, 90);
p5.background(0);
p5.translate(p5.width/2, p5.height/2);
this.sketch = new p5((p) => {
p.WRAP = true;
p.values = [];
// p.pg;

let w;
let h;
p.setup = (id) => {
console.log('=> P5.js initialized');
let cnv = p.createCanvas(p.windowWidth, p.windowHeight);
cnv.parent(id);

// p.frameRate(5);
// p.pixelDensity(1);
p.noLoop();
// p.pg = p.createGraphics(1, 1);
}

p.windowResized = () => {
p.resizeCanvas(p.windowWidth, p.windowHeight);
p.fillCanvas(p.values);
}

let aspect = p5.width / p5.height;
p.fillCanvas = (a) => {
p.values = a;

if (aspect < capture.width / capture.height){
w = p5.height * capture.width / capture.height;
h = p5.height;
} else {
w = p5.width;
h = p5.width * capture.height / capture.width;
let l = a.length;
if (l > 0){
p.background(0);
// p.pg = p.createGraphics(p.width, p.height);

let w = Math.ceil(Math.sqrt(l*p.width/p.height));
let h = Math.ceil(l / w);

for (let i=0; i<l; i++){
let r1 = p.width/w;
let r2 = p.height/h;

p.noStroke();
let v = p.values[i];

if (Array.isArray(v)){
// console.log(v);
p.colorMode(p.RGB)
p.fill(v[0], v[1], v[2]);
} else {
p.fill(v);
}

if (p.WRAP){
let x = i % w;
let y = Math.floor(i / w);

p.rect(x*r1-0.5, y*r2-0.5, r1+1, r2+1);
} else {
p.rect(i*p.width/l, 0, p.width/l+0.5, p.height);
}
}
}
}
p5.image(capture, -w/2, -h/2, w, h);
}

p.draw = () => {
// p.background(0);
// p.image(p.pg, 0, 0, p.width, p.height);
// p.texture(p.pg);
}
}, c);
}
module.export = p5Canvas;
*/
module.exports = { hydraCanvas };
module.exports = { hydraCanvas, p5Canvas };
},{"hydra-synth":32,"raf-loop":65}],90:[function(require,module,exports){
const Tone = require('tone');
const Util = require('./Util.js');
Expand Down Expand Up @@ -34559,9 +34578,9 @@ CodeMirror.defineSimpleMode("mercury", {
// string
{ regex: /["'`](?:\\["\\]|[^\n"'``])*["'`]/, token: "string" },
// keywords
{ regex: /(?:new |make |add |ring |list |array |set |apply |give )\b/, token: "keyword", next: "object" },
{ regex: /(?:new|make|ring|list|array|set|apply|give)\b/, token: "keyword", next: "object" },
// global
{ regex: /(?:print|post|log|audio|record|silence|mute|killAll|default)\b/, token: "variable-2" },
{ regex: /(?:print|post|log|audio|record|silence|mute|killAll|default)\b/, token: "operator" },
// numbers
{ regex: /0x[a-f\d]+|[-+]?(?:\.\d+|\d+\.?\d*)(?:e[-+]?\d+)?/i, token: "number" },
// comments
Expand All @@ -34581,7 +34600,7 @@ CodeMirror.defineSimpleMode("mercury", {
]
});

const Editor = function({ context, engine, canvas }) {
const Editor = function({ context, engine, canvas, p5canvas }) {
// this._engine = engine;
console.log('=> Created Editor()');

Expand Down Expand Up @@ -34614,7 +34633,7 @@ const Editor = function({ context, engine, canvas }) {
'Alt-/': 'toggleComment',
'Alt-Enter': () => { this.evaluate() },
'Alt-.': () => { this.silence() },
'Tab': 'insertSoftTab',
'Tab': 'insertSoftTab'
}
}

Expand Down Expand Up @@ -34651,7 +34670,7 @@ const Editor = function({ context, engine, canvas }) {
this.flash();

// console.log('evaluating code...');
await code({ file: this.cm.getValue(), engine: engine, canvas: canvas });
await code({ file: this.cm.getValue(), engine: engine, canvas: canvas, p5canvas: p5canvas });
await engine.resume();
}

Expand Down Expand Up @@ -35089,13 +35108,14 @@ window.onload = () => {
Engine.randomBPM();

// Hydra sketch background loader
// let sketchP5 = new p5(Canvas.p5Canvas, document.getElementById('p5-canvas'));
const Hydra = new Canvas.hydraCanvas('hydra-canvas');
// const sketchP5 = new p5(Canvas.p5Canvas, 'p5-canvas');
const sketchP5 = new Canvas.p5Canvas('p5-canvas');

// the code Editor
// also loads the parser and the worker
// gets passed the Tone context and Engine
let cm = new Editor({ context: Tone, engine: Engine, canvas: Hydra });
let cm = new Editor({ context: Tone, engine: Engine, canvas: Hydra, p5canvas: sketchP5 });

// Load all the buttons/menus
cm.controls();
Expand All @@ -35105,11 +35125,11 @@ window.onload = () => {
cm.tutorialMenu();
cm.clear();


Hydra.link('hydra-ui');
}
},{"./canvas.js":89,"./editor.js":101,"./engine.js":102,"tone":77,"webmidi":88}],104:[function(require,module,exports){
const Tone = require('tone');
const Util = require('total-serialism').Utility;
const TL = require('total-serialism').Translate;
const Mercury = require('mercury-lang');
const MonoSample = require('./core/MonoSample.js');
Expand All @@ -35125,7 +35145,10 @@ let sounds = [];

// parse and evaluate the inputted code
// as an asyncronous function with promise
async function code({ file, engine, canvas }){
async function code({ file, engine, canvas, p5canvas }){
// hide canvas and noLoop
p5canvas.hide();

console.log('Evaluating');
let c = file;

Expand All @@ -35139,6 +35162,7 @@ async function code({ file, engine, canvas }){

let tree = parse.parseTree;
let errors = parse.errors;
let variables = tree.variables;

console.log('ParseTree', tree);
console.log('Errors', errors);
Expand All @@ -35153,6 +35177,15 @@ async function code({ file, engine, canvas }){
log(p);
});

Object.keys(variables).forEach((v) => {
console.log(v);
if (v === 'displayList'){
let n = Util.mul(Util.normalize(variables[v]), 255);
p5canvas.sketch.fillCanvas(n);
p5canvas.display();
}
})

if (errors.length > 0){
// return if the code contains any syntax errors
log(`Code not executed because of syntax error`);
Expand Down
3 changes: 1 addition & 2 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<title>./MERCURY_PLAYGROUND</title>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet">
Expand Down Expand Up @@ -69,7 +69,6 @@

<div id="hide" class="hide"></div>
<div id="hydra-ui"></div>

</div>
</body>
</html>
Loading

0 comments on commit f6ccd00

Please sign in to comment.