Skip to content

Commit 2930def

Browse files
Ben JackBen Jack
Ben Jack
authored and
Ben Jack
committed
basic functionality implemented
1 parent 00415c3 commit 2930def

File tree

9 files changed

+8485
-33
lines changed

9 files changed

+8485
-33
lines changed

‎package-lock.json‎

Lines changed: 8292 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
"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.",
55
"homepage": "https://www.youtube.com/channel/UCQJBw4IgWV9Tp3CNgT5YtwA",
66
"repository": {
7-
"type" : "git",
8-
"url" : "https://github.com/CreativeCodingProjects/parametricWallpaperJS.git"
7+
"type": "git",
8+
"url": "https://github.com/CreativeCodingProjects/parametricWallpaperJS.git"
99
},
1010
"main": "index.js",
11-
"keywords":[
11+
"keywords": [
1212
"p5js",
1313
"wallpaper",
1414
"patterns",
@@ -36,7 +36,7 @@
3636
"build": "run-p prepare copy_p5 copy_sample_code create_assets_folder",
3737
"prepare": "webpack --mode=production",
3838
"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/",
39+
"copy_sample_code": "cpx ./sample_code/index.html ./build/ && cpx ./sample_code/my_wallpaper.js ./build/ && cpx ./sample_code/setup_optons.txt ./build/",
4040
"create_assets_folder": "mkdirp ./build/assets"
4141
},
4242
"dependencies": {

‎sample_code/my_wallpaper.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
//your parameter variables go here!
2-
var thingyWidth = 100;
3-
var thingyHeight = 100;
2+
var thingy_width = 20;
3+
var thingy_height = 20;
44

55
function setup_wallpaper(pWallpaper){
66
pWallpaper.output_mode(DEVELOP_GLYPH);
7-
pWallpaper.resolution(NINE_PORTRAIT);
7+
pWallpaper.resolution(FIT_TO_SCREEN);
8+
pWallpaper.show_guide(true);//set this to false when you're ready to print
9+
10+
//Grid settings
11+
pWallpaper.grid_settings.cell_width = 100;
12+
pWallpaper.grid_settings.cell_height = 100;
13+
pWallpaper.grid_settings.row_offset = 50;
14+
815
}
916

1017
function wallpaper_background(){
1118
background(255,255,240);
1219
}
1320

1421
function my_symbol(x, y){
15-
rect(x,y,thingyWidth, thingyHeight);
22+
rect(x,y,thingy_width, thingy_height);
1623
}

‎sample_code/setup_options.txt‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
In the setup_wallpaper function you will find a few functions that can take
2+
various parameters this file lists the options for each.
3+
4+
5+
pWallpaper.output_mode(....);
6+
the .... can be replaced with:
7+
8+
DEVELOP_GLYPH
9+
develop glyph is for prototyping your glyph by its self. it only shows one copy
10+
and the bounding box of the tile. everything is scaled up so you can see it easier.
11+
12+
GRID_WALLPAPER
13+
this does a basic grid. the grid_settings will affect how big the tiles are
14+
and the offset of every second row.
15+
16+
GLIDE_WALLPAPER
17+
glide_wallpaper does a glide reflection grid. every second column is mirrored
18+
and offset by the grid_settings offset.
19+
20+
21+
pWallpaper.resolution(....);
22+
the .... can be replaced with:
23+
24+
FIT_TO_SCREEN
25+
this will make the image the same size as the window you're viewing it in.
26+
this is useful for when you're just testing.
27+
28+
NINE_LANDSCAPE
29+
this will make the image the correct size for your hand-in of the 9 images
30+
but in landscape (2000 x 1000)
31+
32+
NINE_PORTRAIT
33+
this will make the image the correct size for your hand-in of the 9 images
34+
but in portrait (1000 x 2000)
35+
36+
A4
37+
this will make an A4 300 dpi image. you'll notice everything is scaled up
38+
a lot. This is so everything isn't tiny when you print it. The scale factor
39+
is based on going from 72dpi(screens) to 300dpi(high quality print).
40+
41+
A3
42+
this will make an A3 300 dpi image. you'll notice everything is scaled up
43+
a lot. This is so everything isn't tiny when you print it. The scale factor
44+
is based on going from 72dpi(screens) to 300dpi(high quality print).
45+
This will be the one to use for your FINAL chosen hand-in.
46+
47+
48+
pWallpaper.show_guide(....);
49+
the .... can be replaced with (in undercase letters):
50+
51+
true
52+
if true, this will show you the grid guides. This will help you as you
53+
prototype your wallpaper. DO NOT LEAVE THIS ON FOR SUBMISSION.
54+
55+
false
56+
if false the guides are turned off.
57+
58+
CHOOSE false FOR YOUR SUBMISSION IMAGES.

‎src/PDrawingHelpers.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import globals from './PGlobals.js'
2+
13
export const draw_x = function(x, y, size){
24
push();
35
stroke(255,0,0);
@@ -7,3 +9,20 @@ export const draw_x = function(x, y, size){
79
line(x, y, x+size, y+size);
810
pop();
911
}
12+
13+
export const draw_dashed_rect = function(x, y, width, height){
14+
var ctx = globals.gfx;
15+
16+
ctx.save();
17+
ctx.strokeStyle = "#777777"
18+
ctx.beginPath();
19+
ctx.setLineDash([5, 8]);
20+
ctx.moveTo(x, y);
21+
ctx.lineTo(x+width, y);
22+
ctx.lineTo(x+width, y+height);
23+
ctx.lineTo(x, y+height);
24+
ctx.lineTo(x, y);
25+
ctx.stroke();
26+
ctx.restore();
27+
28+
}

‎src/PGridSettings.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default class GridSettings{
2+
3+
constructor(){
4+
this.cell_width = 100;
5+
this.cell_height = 100;
6+
this.row_offset = 0;
7+
}
8+
9+
}

‎src/POutputFunctions.js‎

Lines changed: 71 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,88 @@
11
import globals from './PGlobals.js'
2-
import { draw_x }from "./PDrawingHelpers.js"
2+
import { draw_x, draw_dashed_rect }from "./PDrawingHelpers.js"
33

44
export const output_symbol = function(ParametricWallpaper){
55

66
return function(){
7+
8+
var w = ParametricWallpaper.grid_settings.cell_width;
9+
var h = ParametricWallpaper.grid_settings.cell_height;
10+
711
push();
8-
translate(width/2, height/2);
12+
scale(ParametricWallpaper.resolution().scale);
13+
translate(width/2 , height/2);
14+
scale(3);
15+
translate(-w/2 , -h/2);
916
push();
17+
draw_dashed_rect(0,0,w,h);
1018
my_symbol(0, 0);
1119
pop();
12-
strokeWeight(2);
13-
draw_x(0, 0, 5);
1420
pop();
1521
}
1622

1723
}
1824

19-
export const output_wallpaper = function(ParametricWallpaper){
25+
export const grid_wallpaper = function(ParametricWallpaper){
26+
27+
return function(){
28+
29+
var w = ParametricWallpaper.grid_settings.cell_width;
30+
var h = ParametricWallpaper.grid_settings.cell_height;
31+
var offset = ParametricWallpaper.grid_settings.row_offset;
32+
33+
push();
34+
scale(ParametricWallpaper.resolution().scale);
35+
for(var i = -w; i < width+w; i += w){
36+
var row = 0;
37+
for(var j = -h; j < height+h; j += h){
38+
var shift = row%2 == 0 ? 0 : offset;
39+
push();
40+
translate(i+shift, j);
41+
my_symbol(0, 0);
42+
if(ParametricWallpaper.show_guide()){
43+
draw_dashed_rect(0,0,w,h);
44+
}
45+
pop();
46+
row++;
47+
}
48+
}
49+
pop();
50+
}
51+
52+
}
53+
54+
export const glide_wallpaper = function(ParametricWallpaper){
2055

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-
// }
56+
57+
return function(){
58+
59+
var w = ParametricWallpaper.grid_settings.cell_width;
60+
var h = ParametricWallpaper.grid_settings.cell_height;
61+
var offset = ParametricWallpaper.grid_settings.row_offset;
62+
63+
function symbol_and_guide(){
64+
my_symbol(0, 0);
65+
if(ParametricWallpaper.show_guide()){
66+
draw_dashed_rect(0,0,w,h);
67+
}
68+
}
69+
70+
push();
71+
scale(ParametricWallpaper.resolution().scale);
72+
for(var i = -w*2; i < width+w*2; i += w*2){
73+
var row = 0;
74+
for(var j = -h; j < height+h; j += h){
75+
push();
76+
translate(i, j);
77+
symbol_and_guide();
78+
translate(w*2, offset);
79+
scale(-1, 1);
80+
symbol_and_guide();
81+
pop();
82+
row++;
83+
}
84+
}
85+
pop();
86+
}
2987

3088
}

‎src/PWindowConstants.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,21 @@ import * as outputs from "./POutputFunctions.js"
44
//keeping in mind this library is for absolute beginners to code!
55
export const setup_window_constants = function(pWallpaper){
66

7-
window.DEVELOP_GLYPH = outputs.output_symbol(pWallpaper);
8-
window.WALLPAPER = outputs.output_wallpaper(pWallpaper);
7+
window.DEVELOP_GLYPH = outputs.output_symbol(pWallpaper);
8+
window.GRID_WALLPAPER = outputs.grid_wallpaper(pWallpaper);
9+
window.GLIDE_WALLPAPER = outputs.glide_wallpaper(pWallpaper);
910

1011
window.FIT_TO_SCREEN = function(){
1112
window.addEventListener("resize", function(){
12-
pWallpaper.resolution(function(){return {x:window.innerWidth, y:window.innerHeight};});
13+
pWallpaper.resolution(function(){return {x:window.innerWidth, y:window.innerHeight, scale:1};});
1314
});
14-
return {x:window.innerWidth, y:window.innerHeight};
15+
16+
return {x:window.innerWidth, y:window.innerHeight, scale:1};
1517
}
1618

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}};
19+
window.NINE_LANDSCAPE = function(){return {x:2000, y:1000, scale:1}};
20+
window.NINE_PORTRAIT = function(){return {x:1000, y:2000, scale:1}};
21+
window.A4 = function(){return {x:2480, y:3508, scale:300/72.0}};
22+
window.A3 = function(){return {x:3508, y:2480*2, scale:300/72.0}};
2123

2224
}

‎src/ParametricWallpaper.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,34 @@
1-
//import globals from './PGlobals.js'
1+
import GridSettings from './PGridSettings.js'
22
//import PImageLoader from './PImageLoader.js'
33

44
export default class ParametricWallpaper{
55

66
constructor(){
7+
this.grid_settings = new GridSettings();
78
}
89

910
resolution(resolution){
11+
if(resolution === undefined){
12+
return this._resolution;
13+
}
1014
this._resolution = resolution();
1115
console.log(this._resolution);
1216
setup_new_canvas(this._resolution.x, this._resolution.y);
1317
}
1418

15-
grid_type(type){
16-
this._grid_type = type;
19+
show_guide(do_show){
20+
if(do_show === undefined){
21+
return this._show_guide;
22+
}
23+
this._show_guide = do_show;
1724
}
1825

1926
output_mode(output_function){
2027
this._output_function = output_function;
2128
}
2229

2330
draw(){
24-
this._output_function(this._grid_type);
31+
this._output_function();
2532
}
2633

2734
}

0 commit comments

Comments
 (0)