basic functionality implemented

package.json

@@ -4,11 +4,11 @@
   "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.",
   "homepage": "https://www.youtube.com/channel/UCQJBw4IgWV9Tp3CNgT5YtwA",
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/CreativeCodingProjects/parametricWallpaperJS.git"
+    "type": "git",
+    "url": "https://github.com/CreativeCodingProjects/parametricWallpaperJS.git"
   },
   "main": "index.js",
-  "keywords":[
+  "keywords": [
     "p5js",
     "wallpaper",
     "patterns",
@@ -36,7 +36,7 @@
     "build": "run-p prepare copy_p5 copy_sample_code create_assets_folder",
     "prepare": "webpack --mode=production",
     "copy_p5": "cpx ./node_modules/p5/lib/p5.min.js ./build/libraries/",
-    "copy_sample_code": "cpx ./sample_code/index.html ./build/ && cpx ./sample_code/my_wallpaper.js ./build/",
+    "copy_sample_code": "cpx ./sample_code/index.html ./build/ && cpx ./sample_code/my_wallpaper.js ./build/ && cpx ./sample_code/setup_optons.txt ./build/",
     "create_assets_folder": "mkdirp ./build/assets"
   },
   "dependencies": {

sample_code/my_wallpaper.js

@@ -1,16 +1,23 @@
 //your parameter variables go here!
-var thingyWidth  = 100;
-var thingyHeight = 100;
+var thingy_width  = 20;
+var thingy_height = 20;
 
 function setup_wallpaper(pWallpaper){
   pWallpaper.output_mode(DEVELOP_GLYPH);
-  pWallpaper.resolution(NINE_PORTRAIT);
+  pWallpaper.resolution(FIT_TO_SCREEN);
+  pWallpaper.show_guide(true);//set this to false when you're ready to print
+
+  //Grid settings
+  pWallpaper.grid_settings.cell_width  = 100;
+  pWallpaper.grid_settings.cell_height = 100;
+  pWallpaper.grid_settings.row_offset  = 50;
+
 }
 
 function wallpaper_background(){
   background(255,255,240);
 }
 
 function my_symbol(x, y){
-  rect(x,y,thingyWidth, thingyHeight);
+  rect(x,y,thingy_width, thingy_height);
 }

sample_code/setup_options.txt

@@ -0,0 +1,58 @@
+In the setup_wallpaper function you will find a few functions that can take
+various parameters this file lists the options for each.
+
+
+pWallpaper.output_mode(....);
+    the .... can be replaced with:
+
+    DEVELOP_GLYPH
+      develop glyph is for prototyping your glyph by its self. it only shows one copy
+      and the bounding box of the tile. everything is scaled up so you can see it easier.
+
+    GRID_WALLPAPER
+      this does a basic grid. the grid_settings will affect how big the tiles are
+      and the offset of every second row.
+
+    GLIDE_WALLPAPER
+      glide_wallpaper does a glide reflection grid. every second column is mirrored
+      and offset by the grid_settings offset.
+
+
+pWallpaper.resolution(....);
+    the .... can be replaced with:
+
+    FIT_TO_SCREEN
+      this will make the image the same size as the window you're viewing it in.
+      this is useful for when you're just testing.
+
+    NINE_LANDSCAPE
+      this will make the image the correct size for your hand-in of the 9 images
+      but in landscape (2000 x 1000)
+
+    NINE_PORTRAIT
+      this will make the image the correct size for your hand-in of the 9 images
+      but in portrait (1000 x 2000)
+
+    A4
+      this will make an A4 300 dpi image. you'll notice everything is scaled up
+      a lot. This is so everything isn't tiny when you print it. The scale factor
+      is based on going from 72dpi(screens) to 300dpi(high quality print).
+
+    A3
+      this will make an A3 300 dpi image. you'll notice everything is scaled up
+      a lot. This is so everything isn't tiny when you print it. The scale factor
+      is based on going from 72dpi(screens) to 300dpi(high quality print).
+      This will be the one to use for your FINAL chosen hand-in.
+
+
+pWallpaper.show_guide(....);
+    the .... can be replaced with (in undercase letters):
+
+    true
+      if true, this will show you the grid guides. This will help you as you
+      prototype your wallpaper. DO NOT LEAVE THIS ON FOR SUBMISSION.
+
+    false
+      if false the guides are turned off.
+
+    CHOOSE false FOR YOUR SUBMISSION IMAGES.

src/PDrawingHelpers.js

@@ -1,3 +1,5 @@
+import globals from './PGlobals.js'
+
 export const draw_x = function(x, y, size){
   push();
     stroke(255,0,0);
@@ -7,3 +9,20 @@ export const draw_x = function(x, y, size){
     line(x, y, x+size, y+size);
   pop();
 }
+
+export const draw_dashed_rect = function(x, y, width, height){
+  var ctx = globals.gfx;
+
+  ctx.save();
+    ctx.strokeStyle = "#777777"
+    ctx.beginPath();
+    ctx.setLineDash([5, 8]);
+    ctx.moveTo(x, y);
+    ctx.lineTo(x+width, y);
+    ctx.lineTo(x+width, y+height);
+    ctx.lineTo(x, y+height);
+    ctx.lineTo(x, y);
+    ctx.stroke();
+  ctx.restore();
+
+}

src/PGridSettings.js

@@ -0,0 +1,9 @@
+export default class GridSettings{
+
+  constructor(){
+    this.cell_width  = 100;
+    this.cell_height = 100;
+    this.row_offset  = 0;
+  }
+
+}

src/POutputFunctions.js

@@ -1,30 +1,88 @@
 import globals from './PGlobals.js'
-import { draw_x }from "./PDrawingHelpers.js"
+import { draw_x, draw_dashed_rect }from "./PDrawingHelpers.js"
 
 export const output_symbol = function(ParametricWallpaper){
 
     return function(){
+
+      var w = ParametricWallpaper.grid_settings.cell_width;
+      var h = ParametricWallpaper.grid_settings.cell_height;
+
       push();
-        translate(width/2, height/2);
+        scale(ParametricWallpaper.resolution().scale);
+        translate(width/2 , height/2);
+        scale(3);
+        translate(-w/2 , -h/2);
         push();
+          draw_dashed_rect(0,0,w,h);
           my_symbol(0, 0);
         pop();
-        strokeWeight(2);
-        draw_x(0, 0, 5);
       pop();
     }
 
 }
 
-export const output_wallpaper = function(ParametricWallpaper){
+export const grid_wallpaper = function(ParametricWallpaper){
+
+  return function(){
+
+    var w      = ParametricWallpaper.grid_settings.cell_width;
+    var h      = ParametricWallpaper.grid_settings.cell_height;
+    var offset = ParametricWallpaper.grid_settings.row_offset;
+
+    push();
+      scale(ParametricWallpaper.resolution().scale);
+      for(var i = -w; i < width+w; i += w){
+        var row = 0;
+        for(var j = -h; j < height+h; j += h){
+          var shift = row%2 == 0 ? 0 : offset;
+          push();
+            translate(i+shift, j);
+            my_symbol(0, 0);
+            if(ParametricWallpaper.show_guide()){
+              draw_dashed_rect(0,0,w,h);
+            }
+          pop();
+          row++;
+        }
+      }
+    pop();
+  }
+
+}
+
+export const glide_wallpaper = function(ParametricWallpaper){
 
-  // return function(layer){
-  //   push();
-  //     set_initial_transforms(pScope);
-  //     translate(0, pScope._wedge_size/2.0);
-  //     layer.draw_boundry();
-  //     layer.animation_function(0, layer.boundary.low, layer.boundary.high);
-  //   pop();
-  // }
+
+    return function(){
+
+      var w      = ParametricWallpaper.grid_settings.cell_width;
+      var h      = ParametricWallpaper.grid_settings.cell_height;
+      var offset = ParametricWallpaper.grid_settings.row_offset;
+
+      function symbol_and_guide(){
+        my_symbol(0, 0);
+        if(ParametricWallpaper.show_guide()){
+          draw_dashed_rect(0,0,w,h);
+        }
+      }
+
+      push();
+        scale(ParametricWallpaper.resolution().scale);
+        for(var i = -w*2; i < width+w*2; i += w*2){
+          var row = 0;
+          for(var j = -h; j < height+h; j += h){
+            push();
+              translate(i, j);
+              symbol_and_guide();
+              translate(w*2, offset);
+              scale(-1, 1);
+              symbol_and_guide();
+            pop();
+            row++;
+          }
+        }
+      pop();
+    }
 
 }

src/PWindowConstants.js

@@ -4,19 +4,21 @@ import * as outputs   from "./POutputFunctions.js"
 //keeping in mind this library is for absolute beginners to code!
 export const setup_window_constants = function(pWallpaper){
 
-  window.DEVELOP_GLYPH      = outputs.output_symbol(pWallpaper);
-  window.WALLPAPER          = outputs.output_wallpaper(pWallpaper);
+  window.DEVELOP_GLYPH    = outputs.output_symbol(pWallpaper);
+  window.GRID_WALLPAPER   = outputs.grid_wallpaper(pWallpaper);
+  window.GLIDE_WALLPAPER  = outputs.glide_wallpaper(pWallpaper);
 
   window.FIT_TO_SCREEN    = function(){
                                           window.addEventListener("resize", function(){
-                                            pWallpaper.resolution(function(){return {x:window.innerWidth, y:window.innerHeight};});
+                                            pWallpaper.resolution(function(){return {x:window.innerWidth, y:window.innerHeight, scale:1};});
                                           });
-                                          return {x:window.innerWidth, y:window.innerHeight};
+
+                                          return {x:window.innerWidth, y:window.innerHeight, scale:1};
                                         }
 
-  window.NINE_LANDSCAPE     = function(){return {x:2000, y:1000}};
-  window.NINE_PORTRAIT      = function(){return {x:2000, y:1000}};
-  window.A4                 = function(){return {x:2480, y:3508}};
-  window.A3                 = function(){return {x:3508, y:2480*2}};
+  window.NINE_LANDSCAPE     = function(){return {x:2000, y:1000,   scale:1}};
+  window.NINE_PORTRAIT      = function(){return {x:1000, y:2000,   scale:1}};
+  window.A4                 = function(){return {x:2480, y:3508,   scale:300/72.0}};
+  window.A3                 = function(){return {x:3508, y:2480*2, scale:300/72.0}};
 
 }

src/ParametricWallpaper.js

@@ -1,27 +1,34 @@
-//import globals      from './PGlobals.js'
+import GridSettings from './PGridSettings.js'
 //import PImageLoader from './PImageLoader.js'
 
 export default class ParametricWallpaper{
 
   constructor(){
+    this.grid_settings = new GridSettings();
   }
 
   resolution(resolution){
+    if(resolution === undefined){
+      return this._resolution;
+    }
     this._resolution = resolution();
     console.log(this._resolution);
     setup_new_canvas(this._resolution.x, this._resolution.y);
   }
 
-  grid_type(type){
-    this._grid_type = type;
+  show_guide(do_show){
+    if(do_show === undefined){
+      return this._show_guide;
+    }
+    this._show_guide = do_show;
   }
 
   output_mode(output_function){
     this._output_function = output_function;
   }
 
   draw(){
-    this._output_function(this._grid_type);
+    this._output_function();
   }
 
 }