Skip to content

Commit 19edd35

Browse files
author
Ben Jack
committed
initial commit
0 parents  commit 19edd35

File tree

11 files changed

+283
-0
lines changed

11 files changed

+283
-0
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
node_modules/
3+
build/
4+
interactive-vignettes/
5+
interactive-vignettes.zip

‎README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
About
2+
=======
3+
4+
InteractiveVignettes is a small framework built on top of P5JS for making little interactive scenes.
5+
This project is a part of the Creative Coding Projects youtube channel.
6+
For information on how to get started visit: VIDEO URL GOES HERE
7+
8+
Installation
9+
=======
10+
11+
1. Download Vignettes.zip from: https://github.com/CreativeCodingProjects/interactive-vignettes/releases/latest
12+
2. unzip it and the unzipped folder in a sensible place on your computer
13+
3. if you don't already have a text editor get one (I recommend Atom as that is what I use in the videos)
14+
4. install a development server such as atom-live-server
15+
5. Watch the tutorial videos at: PLAYLIST URL GOES HERE
16+
17+
Build from source
18+
=======
19+
20+
1. clone the repo or download the zip
21+
2. install npm if you don't already have it
22+
3. npm install
23+
4. npm run Build
24+
25+
This will build the source and populate the build folder with the necessary libraries.
26+
All the files you need can be found in the build folder, that will form the base folder of your project.
27+
You will need to use a local development server to be able to use all the features in some browsers.
28+
29+
30+
Credits
31+
=======
32+
33+
1. P5js: https://p5js.org/
34+
2. ccapture.js: https://github.com/spite/ccapture.js/

‎package.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "interactive-vignettes",
3+
"version": "1.0.0",
4+
"description": "A small framework built on top of p5js for making little interactive scenes. This framework is a part of the \"Creative Coding projects\" youtube channel.",
5+
"homepage": "https://www.youtube.com/channel/UCQJBw4IgWV9Tp3CNgT5YtwA",
6+
"repository": {
7+
"type" : "git",
8+
"url" : "https://github.com/CreativeCodingProjects/interactive-vignettes.git"
9+
},
10+
"main": "index.js",
11+
"keywords": [
12+
"p5js",
13+
"interactive",
14+
"creative coding"
15+
],
16+
"author": "Ben Jack",
17+
"license": "ISC",
18+
"devDependencies": {
19+
"@babel/cli": "^7.0.0",
20+
"@babel/core": "^7.0.1",
21+
"@babel/preset-env": "^7.0.0",
22+
"babel-loader": "^8.0.0-beta.6",
23+
"cpx": "^1.5.0",
24+
"mkdirp": "^0.5.1",
25+
"npm-run-all": "^4.1.3",
26+
"webpack": "^4.18.0",
27+
"webpack-cli": "^3.1.0",
28+
"webpack-dev-server": "^3.1.8"
29+
},
30+
"scripts": {
31+
"dev": "webpack-dev-server --config webpack.config.dev.js --mode=development -d",
32+
"build": "run-p prepare copy_p5 copy_ccapture copy_sample_code create_assets_folder",
33+
"prepare": "webpack --mode=production",
34+
"copy_p5": "cpx ./node_modules/p5/lib/p5.min.js ./build/libraries/",
35+
"copy_ccapture": "cpx ./node_modules/ccapture.js/build/CCapture.all.min.js ./build/libraries/ && cpx ./node_modules/ccapture.js/src/gif.worker.js ./build/libraries/",
36+
"copy_sample_code": "cpx ./sample_code/index.html ./build/ && cpx ./sample_code/my_vignettes.js ./build/",
37+
"create_assets_folder": "mkdirp ./build/assets"
38+
},
39+
"dependencies": {
40+
"@babel/polyfill": "^7.0.0",
41+
"babel-preset-env": "^1.7.0",
42+
"ccapture.js": "^1.1.0",
43+
"p5": "^0.7.2"
44+
}
45+
}

‎sample_code/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
5+
<style> body {padding: 0; margin: 0;} </style>
6+
7+
<script src="./libraries/CCapture.all.min.js"></script>
8+
<script src="./libraries/p5.min.js"></script>
9+
10+
<script src="./my_vignettes.js"></script>
11+
<script src="./libraries/interactive-vignettes.bundle.js"></script>
12+
13+
</head>
14+
<body>
15+
</body>
16+
</html>

‎sample_code/my_vignettes.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
function setup_vignettes(vignettes){
2+
3+
}
4+
5+
function setup_scenes(vignettes){
6+
7+
}
8+
9+
10+
function scene1(){
11+
12+
}
13+
14+
function scene1_click(){
15+
16+
}
17+
18+
function scene1_keypress(){
19+
20+
}

‎src/imageLoader.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
export default class PImageLoader{
2+
3+
constructor(p5){
4+
this._total_images_to_load = 0;
5+
this._loaded_images = 0;
6+
this._images = {};
7+
this._image_sequences = {};
8+
}
9+
10+
load_image(name, file_type){
11+
this._total_images_to_load++;
12+
this._images[name] = loadImage("./assets/"+name+"."+file_type, this.image_loaded.bind(this));
13+
}
14+
15+
load_image_sequence(name, file_type, sequence_length){
16+
this._total_images_to_load += sequence_length;
17+
for(var i = 0; i < image_count; ++i){
18+
this._image_sequences[name][i] = loadImage("assets/"+name+"/"+name+"_"+i+"."+file_type, this.image_loaded.bind(this));
19+
}
20+
}
21+
22+
draw_image(name, ctx, x, y){
23+
ctx.image(this._images[name], x, y);
24+
}
25+
26+
draw_image_from_sequence(name, frame_lerp, ctx, x, y){
27+
let frame = math.floor(frame_lerp*this._image_sequences[name].length);
28+
ctx.image(this._image_sequences[name][frame], x, y);
29+
}
30+
31+
all_images_loaded(){
32+
return this._loaded_images >= this._total_images_to_load;
33+
}
34+
35+
image_loaded(){
36+
this._loaded_images++;
37+
}
38+
39+
}

‎src/index.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Vignettes from './vignettes.js'
2+
import {setup_window_variables} from "./windowVariables.js"
3+
4+
let p = new p5();
5+
6+
window.setup = function() {
7+
angleMode(DEGREES);
8+
imageMode(CENTER);
9+
10+
let vignettes = new Vignettes();
11+
setup_window_variables(vignettes);
12+
setup_vignettes(vignettes);
13+
setup_new_canvas(1280, 720);
14+
}
15+
16+
window.draw = function() {
17+
background(255);
18+
vignettes.draw();
19+
}
20+
21+
window.setup_new_canvas = function(width, height){
22+
createCanvas(width, height);
23+
setup_scenes(vignettes);
24+
}

‎src/vignettes.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export default class Vignettes{
2+
3+
constructor(){
4+
this._scenes = [];
5+
}
6+
7+
add_scene(scene){
8+
this._scenes.push(scene);
9+
this.current_event
10+
}
11+
12+
draw(){
13+
}
14+
15+
click(){
16+
17+
}
18+
19+
mouse_moved(){
20+
21+
}
22+
23+
mouse_dragged(){
24+
25+
}
26+
27+
key_pressed(keyboard_event){
28+
29+
}
30+
31+
key_released(keyboard_event){
32+
33+
}
34+
35+
}

‎src/windowVariables.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const setup_window_variables = function(vignettes){
2+
window.vignettes = vignettes;
3+
window.ccapturer = new CCapture( { format: 'webm' } );
4+
}

‎webpack.config.dev.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const path = require("path");
2+
const webpack = require("webpack");
3+
4+
module.exports = {
5+
entry: [path.join(__dirname, "src/index.js")],
6+
output: {
7+
path: path.join(__dirname, 'build/libraries/'),
8+
filename: "interactive-vignettes.bundle.js"
9+
},
10+
11+
module: {
12+
rules: [
13+
{
14+
test: /\.js$/,
15+
exclude: /(node_modules)/,
16+
use: {
17+
loader: 'babel-loader',
18+
options: {
19+
presets: ['@babel/preset-env']
20+
}
21+
}
22+
}
23+
]
24+
},
25+
26+
devtool: "inline-source-map",
27+
devServer: {
28+
publicPath: path.resolve(__dirname,'/build', '/libraries'),
29+
contentBase: path.resolve(__dirname, "build"),
30+
watchContentBase: true,
31+
compress: true,
32+
port: 9000,
33+
}
34+
35+
};

0 commit comments

Comments
 (0)