Skip to content

added comments 1 effect 1 setting #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
newbenjaminb wants to merge 2 commits into
base: main
Choose a base branch
from
Open

added comments 1 effect 1 setting #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b636d5e
added comments 1 effect 1 setting
renewbb Apr 14, 2023
9d0a68e
refined comments
renewbb Apr 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion src/effects/eff_a_slit_scan.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
// converting video slit scan to a effect pluging example
//
// effects have to be declared as a class
// convention is that properties in UI
// appear in meta_props array as drop-downs
// goal: you don't have to write the code
// you just have to select the drop-downs
// save a json with your selections

export default class eff_a_slit_scan {
static meta_props = [
// { prop: 'num_prop', label: 'prop1', selection: [0, 1] },
Expand Down Expand Up @@ -40,7 +47,24 @@ export default class eff_a_slit_scan {

// https://editor.p5js.org/jht9629-nyu/sketches/hw8qkUuAw
// https://editor.p5js.org/codingtrain/sketches/B1L5j8uk4
// Slit Scan
// Slit Scan
// this is original code that would work in p5js editor
// and is adapted to the VideoKit plug-in model
// the sketches in the effects directory plug-in
// to the video kit
// certain requirements in order to plug-in:
// 1. meta_pro array
// 2. constructor for the class
// analogous to setup only called once
// 3. prepareOutput() analogous to draw
// repeatedly called for every frame
// This approach allows you to explore and compare
// the same effect with different settings
// side by side
// The dropdown menus make each effect modular
// allowing you to define your own settings
// and create you own version of the effect


// let video;
// let x = 0;
Expand Down
86 changes: 86 additions & 0 deletions src/effects/eff_bbtest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
// converting video slit scan to a effect pluging example
//
// effects have to be declared as a class
// convention is that properties in UI
// appear in meta_props array as drop-downs
// goal: you don't have to write the code
// you just have to select the drop-downs
// save a json with your selections

export default class eff_bbtest {
static meta_props = [
// { prop: 'num_prop', label: 'prop1', selection: [0, 1] },
{ prop: 'expand', selection: [1, 2, 3] },
{ prop: 'step', selection: [1, 0.1, 0.2, 2, 4] },
{ prop: 'period', selection: [-1, 0, 1, 2, 3] },
];

constructor(props) {
//
Object.assign(this, props);
console.log('eff_bbtest props.expand', props.expand);
// console.log('eff_bbtest constructor width, height', width, height);

this.vw = this.input.width;
this.vh = this.input.height;
console.log('eff_bbtest constructor input vw vh', this.vw, this.vh);

this.output = createGraphics(this.vw * this.expand, this.vh);
// this.output.background(255);

this.x = 0;

this.period_timer = new this.videoKit.PeriodTimer(this.period);
}
prepareOutput() {
// this.input.loadPixels();
this.output.copy(this.input, this.vw / 2, 0, 1, this.vh, this.x, 0, 1, this.vh);
this.x = this.x + this.step;
if (this.x > this.output.width) {
this.x = 0;
}
if (this.period_timer.check()) {
this.output.clear();
}
this.output.fill(240,0,0);
this.output.circle(width/2, height/2, 100);
}
}

// https://editor.p5js.org/jht9629-nyu/sketches/hw8qkUuAw
// https://editor.p5js.org/codingtrain/sketches/B1L5j8uk4
// Slit Scan
// this is original code that would work in p5js editor
// and is adapted to the VideoKit plug-in model
// the sketches in the effects directory plug-in
// to the video kit
// certain requirements in order to plug-in:
// 1. meta_pro array
// 2. constructor for the class
// analogous to setup only called once
// 3. prepareOutput() analogous to draw
// repeatedly called for every frame


// let video;
// let x = 0;

// function setup() {
// createCanvas(400, 240);
// pixelDensity(1);
// video = createCapture(VIDEO);
// video.size(320, 240);
// background(51);
// }

// function draw() {
// // ?? is this needed
// // video.loadPixels();
// let w = video.width;
// let h = video.height;
// copy(video, w/2, 0, 1, h, x, 0, 1, h);
// x = x + 1;
// if (x > width) {
// x = 0;
// }
// }
14 changes: 12 additions & 2 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!--
<!--
normally these libs are taken from internet,
but now you can work locally
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
<script src="https://p5livemedia.itp.io/simplepeer.min.js"></script>
Expand All @@ -11,17 +13,22 @@
-->
<script src="./external/lib/p5.min.js"></script>
<script src="./external/lib/p5.sound.min.js"></script>
<!-- next 3 libs are for p5livemedia -->
<script src="./external/lib/simplepeer.min.js?v={{vers}}"></script>
<script src="./external/lib/socket.io.js"></script>
<script src="./external/lib/p5livemedia.js"></script>
<!-- machine learning lib, will reach out to internet -->
<script src="./external/lib/ml5.min.js"></script>

<script>
// track startup time for debugging
let a_start_now = window.performance.now();
</script>

<!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="style.css" />
jht doesn't want clutter of external css file
hence the minimal css inside this file
-->
<style>
html,
body {
Expand All @@ -36,6 +43,9 @@
</head>

<body>
<!-- this is an include for the VideoKit
VideoKit is a "library in progress"
for the moment and only exists locally, not on internet -->
<script src="videoKit/p5VideoKit.js?v={{vers}}"></script>
<script src="sketch.js?v={{vers}}"></script>
</body>
Expand Down
51 changes: 51 additions & 0 deletions src/settings/bbtest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
{
"setting": "delaunay-alpha-5",
"comment": "delaunay-20cells-test",
"back_color": 200,
"room_name": "VideoKit-Room-1",
"patch_layout": "Single",
"canvas_size": "480x270",
"capture_size": "default",
"render_size": "Canvas",
"chat_name": "jht",
"chat_chk": 0,
"live_index": 0,
"live_chk": 0,
"urects_lock": 0,
"urects_count": 1,
"canvas_resize_ref": "",
"canvas_data_chk": 0,
"mediaDiv_states": [
null,
{
"vis": 0,
"mute": 1
},
{
"vis": 0,
"mute": 1
}
],
"patches": [
{
"eff_spec": {
"ipatch": 0,
"imedia": 1,
"eff_label": "delaunay",
"urect": {
"width": 480,
"height": 270,
"x0": 0,
"y0": 0
}
},
"eff_props": {
"dcell": 20,
"period": 1,
"type": "rect",
"alpha": 5,
"gray": 0
}
}
]
}
29 changes: 23 additions & 6 deletions src/sketch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,38 @@
// p5LiveVideo example dashboard
// https://github.com/jht1493/p5VideoKit
//
let videoKit;
let videoKit; // home for library routines

p5.disableFriendlyErrors = true; // disables FES to improve performance
p5.disableFriendlyErrors = true;
// disables p5js FES (friendly error system)
// to improve performance

function setup() {
// Report startup time for debugging
let lapse = window.performance.now() - a_start_now;
console.log('setup lapse', lapse);
console.log('setup lapse', lapse);
// indicate how long it took to load everything

// pixelDensity does not appear to affect live media
// pixelDensity(1);

// Need some starting dimensions for canvas.
// Will get adjusted by ui later in startup
// Make it small, size will get adjusted by UI (user interface) later in startup
createCanvas(100, 100);
// createCanvas(100, 100, WEBGL);

// must call createCanvas before new p5VideoKit

// effects for import, will appear at top of the effect menu
// an EFFECT can have many PROPERTIES specific to the effect
// for example canvas size, color, cell size,
// to see this, choose "circle" in Effect1 and Effect2,
// then choose different properties like number of circles per frame
// or the video source

// the "effects" array creates a pull-down menu
// which offers a first selection of effects added to the VideoKit library,
// you could add some more !!!!

let effects = [
{ label: 'a_my_example', import_path: 'effects/eff_a_my_example.js', ui_label: 'a_my_example' },
{ label: 'a_example_props', import_path: 'effects/eff_a_example_props.js', ui_label: 'a_example_props' },
Expand All @@ -31,9 +43,13 @@ function setup() {
{ label: 'skin_tone_main', import_path: 'effects/eff_skin_tone_main.js', ui_label: 'skin_tone_main' },
{ label: 'live_gallery', import_path: 'effects/eff_live_gallery.js', ui_label: 'live_gallery' },
{ label: 'movie_grid', import_path: 'effects/eff_movie_grid.js', ui_label: 'movie_grid' },
{ label: 'bbtest', import_path: 'effects/eff_bbtest.js', ui_label: 'bbtest' },
];

// settings for import, will appear at top of settings menu
// SETTINGS will load a save .json file with predefined values
// for all the settings associated with the effect
// "settings" is an array of

let settings = [
// slit scan circle.json
{ label: 'slit scan circle', import_path: 'settings/slit scan circle.json' },
Expand All @@ -44,6 +60,7 @@ function setup() {
{ label: 'movie-grid', import_path: 'settings/movie-grid.json' },
{ label: 'screen-club', import_path: 'settings/screen-club.json' },
{ label: 'videoKit', import_path: 'settings/videoKit.json' },
{ label: 'bbtest', import_path: 'settings/bbtest.json' },
];

videoKit = new p5VideoKit();
Expand Down