Skip to content

Commit 00415c3

Browse files
Ben JackBen Jack
Ben Jack
authored and
Ben Jack
committed
initial commit - a hack of PhenakistoscopeJS
0 parents  commit 00415c3

14 files changed

Lines changed: 310 additions & 0 deletions

‎.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env"]
3+
}

‎.gitignore‎

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

‎README.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
About
2+
=======
3+
4+
parametricWallpaper.js is a small framework built on top of P5JS for easing the introduction to creative coding.
5+
This project is a part of the Creative Coding Projects youtube channel.
6+
The goal of CreativeCoding Projects is to make it easier to begin creating actual content whilst learning creative coding rather than having to suffer through a long period of learning the ropes before making anything actually fun.
7+
For information on how to get started on this project visit: VIDEO URL GOES HERE
8+
9+
Installation
10+
=======
11+
12+
1. Download parametricWallpaper.zip from: https://github.com/CreativeCodingProjects/parametricWallpaperJS/releases/latest
13+
2. unzip it and put the unzipped folder in a sensible place on your computer
14+
3. if you don't already have a text editor get one (I recommend Atom as that is what I use in the videos)
15+
4. install a development server such as atom-live-server
16+
5. Watch the tutorial videos at: PLAYLIST URL GOES HERE
17+
18+
Build from source
19+
=======
20+
21+
You only need to do this if you are interested to making changes to the source, if you're new to code and only looking to do the project, follow the instructions in the "installation" section.
22+
23+
1. clone the repo or download the zip
24+
2. install npm if you don't already have it
25+
3. npm install
26+
4. npm run Build
27+
28+
This will build the source and populate the build folder with the necessary libraries.
29+
All the files you need can be found in the build folder, that will form the base folder of your project.
30+
You will need to use a local development server to be able to use all the features in some browsers.
31+
32+
33+
Credits
34+
=======
35+
36+
1. Victoria University of Wellington https://www.victoria.ac.nz/
37+
2. P5js: https://p5js.org/
38+
3. ccapture.js: https://github.com/spite/ccapture.js/

‎package.json‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "parametricWallpaperJS",
3+
"version": "0.0.1",
4+
"description": "A small framework built on top of p5js for making tiling wallpapers with javascript. 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/parametricWallpaperJS.git"
9+
},
10+
"main": "index.js",
11+
"keywords":[
12+
"p5js",
13+
"wallpaper",
14+
"patterns",
15+
"parametric",
16+
"design",
17+
"art",
18+
"creative coding"
19+
],
20+
"author": "Ben Jack",
21+
"license": "ISC",
22+
"devDependencies": {
23+
"@babel/cli": "^7.0.0",
24+
"@babel/core": "^7.0.1",
25+
"@babel/preset-env": "^7.0.0",
26+
"babel-loader": "^8.0.0-beta.6",
27+
"cpx": "^1.5.0",
28+
"mkdirp": "^0.5.1",
29+
"npm-run-all": "^4.1.3",
30+
"webpack": "^4.18.0",
31+
"webpack-cli": "^3.1.0",
32+
"webpack-dev-server": "^3.1.8"
33+
},
34+
"scripts": {
35+
"dev": "webpack-dev-server --config webpack.config.dev.js --mode=development -d",
36+
"build": "run-p prepare copy_p5 copy_sample_code create_assets_folder",
37+
"prepare": "webpack --mode=production",
38+
"copy_p5": "cpx ./node_modules/p5/lib/p5.min.js ./build/libraries/",
39+
"copy_sample_code": "cpx ./sample_code/index.html ./build/ && cpx ./sample_code/my_wallpaper.js ./build/",
40+
"create_assets_folder": "mkdirp ./build/assets"
41+
},
42+
"dependencies": {
43+
"@babel/polyfill": "^7.0.0",
44+
"babel-preset-env": "^1.7.0",
45+
"p5": "^0.7.2"
46+
}
47+
}

‎sample_code/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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/p5.min.js"></script>
8+
9+
<script src="./my_wallpaper.js"></script>
10+
<script src="./libraries/parametricWallpaper.bundle.js"></script>
11+
</head>
12+
<body>
13+
</body>
14+
</html>

‎sample_code/my_wallpaper.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
//your parameter variables go here!
2+
var thingyWidth = 100;
3+
var thingyHeight = 100;
4+
5+
function setup_wallpaper(pWallpaper){
6+
pWallpaper.output_mode(DEVELOP_GLYPH);
7+
pWallpaper.resolution(NINE_PORTRAIT);
8+
}
9+
10+
function wallpaper_background(){
11+
background(255,255,240);
12+
}
13+
14+
function my_symbol(x, y){
15+
rect(x,y,thingyWidth, thingyHeight);
16+
}

‎src/PDrawingHelpers.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const draw_x = function(x, y, size){
2+
push();
3+
stroke(255,0,0);
4+
line(x, y, x-size, y-size);
5+
line(x, y, x+size, y-size);
6+
line(x, y, x-size, y+size);
7+
line(x, y, x+size, y+size);
8+
pop();
9+
}

‎src/PGlobals.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
function Globals(){
2+
this.parametricWallpaper = undefined;
3+
this.p5 = undefined;
4+
this.gfx = undefined;
5+
this.canvas = undefined;
6+
}
7+
8+
let globals = new Globals();
9+
export default globals;

‎src/POutputFunctions.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import globals from './PGlobals.js'
2+
import { draw_x }from "./PDrawingHelpers.js"
3+
4+
export const output_symbol = function(ParametricWallpaper){
5+
6+
return function(){
7+
push();
8+
translate(width/2, height/2);
9+
push();
10+
my_symbol(0, 0);
11+
pop();
12+
strokeWeight(2);
13+
draw_x(0, 0, 5);
14+
pop();
15+
}
16+
17+
}
18+
19+
export const output_wallpaper = function(ParametricWallpaper){
20+
21+
// return function(layer){
22+
// push();
23+
// set_initial_transforms(pScope);
24+
// translate(0, pScope._wedge_size/2.0);
25+
// layer.draw_boundry();
26+
// layer.animation_function(0, layer.boundary.low, layer.boundary.high);
27+
// pop();
28+
// }
29+
30+
}

‎src/PWindowConstants.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as outputs from "./POutputFunctions.js"
2+
3+
//althugh it isn't ideal to pollute the global variable space this is done for sake of ease!
4+
//keeping in mind this library is for absolute beginners to code!
5+
export const setup_window_constants = function(pWallpaper){
6+
7+
window.DEVELOP_GLYPH = outputs.output_symbol(pWallpaper);
8+
window.WALLPAPER = outputs.output_wallpaper(pWallpaper);
9+
10+
window.FIT_TO_SCREEN = function(){
11+
window.addEventListener("resize", function(){
12+
pWallpaper.resolution(function(){return {x:window.innerWidth, y:window.innerHeight};});
13+
});
14+
return {x:window.innerWidth, y:window.innerHeight};
15+
}
16+
17+
window.NINE_LANDSCAPE = function(){return {x:2000, y:1000}};
18+
window.NINE_PORTRAIT = function(){return {x:2000, y:1000}};
19+
window.A4 = function(){return {x:2480, y:3508}};
20+
window.A3 = function(){return {x:3508, y:2480*2}};
21+
22+
}

0 commit comments

Comments
 (0)