March 2, 2022

An idea

phil_in_a_can Blog, ITP, Live Web htmlcss, liveweb 0 Comments

Text content

First let me say that I am still struggling with the syntax and order of the required documents in order to have an interactive web experience. For instance, when I look at a p5.js sketch it is hard to figure out how to translate it to a standard JavaScript document that works with a server. Where and what gets emitted. If I have a canvas and a set of ui elements that each new user should have on their screen, how do I denote that in the code.

That being said for my midterm project I’m trying to convert the below p5.js sketch so that each new user adds another instance to the canvas and the ui displayed allows the user to control only their own instance.

https://editor.p5js.org/phil-in-a-can/sketches/d4J4kzzvH

If you want to play with it in the p5.js web editor the above link will take you there.

Let’s have a look at the code as it stands in p5.js

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <script src="ui.js"></script>
  </body>
</html>

sketch.js

let x1 = 0;
let y1 = 0;
let x2 = 50;
let y2 = 50;
let x3 = 25;
let y3 = 25;
let x4 = 30;
let y4 = 75;
let rep = 2;
let col1 = 10;
let col2 = 100;
let col3 = 200;
let col4 = 300;
let strk1 = 1;
let strk2 = 1;
let strk3 = 1;
let strk4 = 1;
let frmRt = 30
let shape1 = false;
let shape2 = false;
let shape3 = false;
let shape4 = false;
let deg1 = 0.33
let deg2 = 0.33
let deg3 = 0.33
let deg4 = 0.33

function setup() {
  createCanvas(400, 400);
  background(0, 0, 0);
  angleMode(DEGREES);
  colorMode(HSB, 360, 100, 100, 100);
  // rectMode(CENTER);
  // frameRate(frmRt);
  create_ui();
}

function draw() {
  frameRate(frmRt);
  slider_value('Rep', rep);
  slider_value('frmRt', frmRt);
  slider_value('x1', x1);
  slider_value('y1', y1);
  slider_value('Degrees1', deg1);
  slider_value('x2', x2);
  slider_value('y2', y2);
  slider_value('Degrees2', deg2);
  slider_value('x3', x3);
  slider_value('y3', y3);
  slider_value('Degrees3', deg3);
  slider_value('x4', x4);
  slider_value('y4', y4);
  slider_value('Degrees4', deg4);
  noFill();
  translate(width / 2, height / 2);
  // push();

  // rectMode(CENTER);
  if (shape1) {
    ellipseMode(CENTER);
    push();
    // stroke(0, random(0, 85), 0);
    // stroke(85, random(0, 85), 85);
    strokeWeight(strk1);
    stroke(col1, 100, 100, 50);
    rotate(x1 / deg1);
    // rect(x, y, rep * (random(1, 10)), rep * (random(1, 10)));
    // ellipse(t1, t2, 10, t1 + 45);
    ellipse(x1, y1, 10, x1 + 45);
    // rect(x, y, rep * x + 1, y + 5);
    // x = x + 5
    pop();

    x1 = x1 + rep;
    if (x1 > width) {
      x1 = 0;
      y1 = y1 + rep;
    }
  } else {}

  if (shape2) {
    push();
    ellipseMode(CENTER);
    // translate(x*0.33,random(10,200));
    // translate(0, 0);
    rotate(x2 / deg2);
    // fill(0,random(0, 255), 255,0);
    // stroke(85, random(85, 170), 170);
    // stroke(0, random(85, 170), 0);
    strokeWeight(strk2);
    stroke(col2, 100, 100, 50);
    // rotate(x1 / 0.33);
    // ellipse(x1, y1, 10, x1 + 45);
    // circle(x, y, rep * (random(1, 10)));
    ellipse(x2, y2, 20, x2 + 45);
    pop();

    x2 = x2 + rep;
    if (x2 > height) {

      x2 = 0;
      y2 = y2 + rep
    }

  } else {}

  if (shape3) {
    push();
    ellipseMode(CENTER);
    // translate(x*0.33,random(10,200));
    // translate(0, 0);
    rotate(x3 / deg3);
    // fill(0,random(0, 255), 255,0);
    // stroke(0, random(170, 255), 0);
    // stroke(170, random(170, 255), 255);
    strokeWeight(strk3);
    stroke(col3, 100, 100, 50);
    // rotate(x1 / 0.33);
    ellipse(x3, y3, 40, x3 + 45);
    // circle(x, y, rep * (random(1, 10)));
    pop();


    x3 = x3 + rep;
    if (x3 > height * 1.5) {

      x3 = 0;
      y3 = y3 + rep
    }

  } else {}

  if (shape4) {
    push();
    rotate(x4 / deg4);
    strokeWeight(strk4);
    stroke(col4, 100, 100, 50);
    // triangle(0, 0,x4, 20, y4, 75);
    // triangle(30, 75, x2 + 58, y + 20, y1 + 86, y2 + 75);
    triangle(x4, y4, x4 + 100, y4 + 150, x4 + 200, y4 + 250);
    pop();

    x4 = x4 + rep;
    if (x4 > height) {

      x4 = 0;
      y4 = y4 + rep
    }

  } else {}
}

ui.js

function create_ui() {
  createP();
  {
    let a_button = createButton('resize-full');
    a_button.mousePressed(function() {
      resizeCanvas(windowWidth, windowHeight);
      background(0, 0, 0);
    });
    // createP();
  } {
    let a_button = createButton('resize-inset');
    a_button.mousePressed(function() {
      resizeCanvas(400, 400);
      background(0, 0, 0);
    });
    // createP();
  } {
    let a_button = createButton('reset');
    a_button.mousePressed(function() {
      // translate(windowWidth/2,windowHeight/2);
      fill(0);
      rect(-windowWidth / 2, -windowHeight / 2, windowWidth, windowHeight);
    });
    createP();
  } {
    let a_span = createSpan('Rep:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 10, rep, 0.25);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      rep = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('Rep');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('frmRt:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(10, 100, frmRt);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      frmRt = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('frmRt');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  }

  //   X1,Y1

  {
    let a_check = createCheckbox('Shape 1', shape1);
    a_check.style('font-size', '25px');
    a_check.style('color:cyan');
    a_check.changed(function() {
      shape1 = this.checked();
    });
    createP();
  } {
    let a_span = createSpan('x1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 100, x1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      x1 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('x1');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('y1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 100, y1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      y1 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('y1');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('Degrees:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(-0.99, 0.99, deg1, 0.01);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      deg1 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('Degrees1');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('color 1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 360, col1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      col1 = a_slider.value();
    });
  } {
    let a_span = createSpan('stroke 1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 5, strk1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      strk1 = a_slider.value();
    });
    createP();
  }


  //   x2,y2
  {
    let a_check = createCheckbox('Shape 2', shape2);
    a_check.style('font-size', '25px');
    a_check.style('color:cyan');
    a_check.changed(function() {
      shape2 = this.checked();
    });
  } {
    let a_span = createSpan('x2:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 200, x2);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      x2 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('x2');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('y2:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 200, y2);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      y2 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('y2');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('Degrees:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(-0.99, 0.99, deg2, 0.01);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      deg2 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('Degrees2');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('color 2:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 360, col2);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      col2 = a_slider.value();
    });
    // createP();
  } {
    let a_span = createSpan('stroke 2:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 5, strk2);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      strk2 = a_slider.value();
    });
    createP();
  }


  // x3,y3
  {
    let a_check = createCheckbox('Shape 3', shape3);
    a_check.style('font-size', '25px');
    a_check.style('color:cyan');
    a_check.changed(function() {
      shape3 = this.checked();
    });
  } {
    let a_span = createSpan('x3:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 500, x3);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      x3 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('x3');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('y3:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 500, y3);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      y3 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('y3');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('Degrees:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(-0.99, 0.99, deg3, 0.01);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      deg3 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('Degrees3');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('color 3:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 360, col3);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      col3 = a_slider.value();
    });
    // createP();
  } {
    let a_span = createSpan('stroke 3:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 5, strk3);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      strk3 = a_slider.value();
    });
    createP();
  }


  //x4,y4
  {
    let a_check = createCheckbox('Shape 4', shape4);
    a_check.style('font-size', '25px');
    a_check.style('color:cyan');
    a_check.changed(function() {
      shape4 = this.checked();
    });
  } {
    let a_span = createSpan('x4:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 100, x4);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      x4 = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('x4');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('y4:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 100, y4);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      y4 = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('y4');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('Degrees:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(-0.99, 0.99, deg4, 0.01);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      deg4 = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('Degrees4');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('color 4:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 360, col4);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      col4 = a_slider.value();
    });
    // createP();
  } {
    let a_span = createSpan('stroke 4:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 5, strk4);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      strk4 = a_slider.value();
    });
  }
}

function slider_value(label, num) {
  let elm = select('#' + label);
  num = round(num, 2);
  // elm.html('[' + label + ' ' + num + '] ');
  elm.html('[' + num + '] ');
}

style.css

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

In this column you will find the code I am working to convert. Of course there is the addition of the server code. I have not included the code for the p5.js library or the p5,sound.min.js library.

index.html

<!DOCTYPE html><html lang="en"><head>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script src="p5.js"></script>
    <script src="p5.sound.min.js"></script>
    <script src="ui.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
  </head>
  <body>
    <script src="sketch.js"></script>
</body></html>

server.js

// Express is a node module for building HTTP servers
var express = require("express");
var app = express();

// Tell Express to look in the "public" folder for any files first
app.use(express.static("public"));  // This is where the HTML, p5.js, sketch.js and so on should be stored

// If the user just goes to the "route" / then run this function
app.get("/", function (req, res) {
  res.send("Hello World!");
});

// Here is the actual HTTP server
var http = require("http");
// We pass in the Express object
var httpServer = http.createServer(app);
// Listen on port provided by Glitch
//httpServer.listen(process.env.PORT);
// OR if running your own server choose your own port
httpServer.listen(8080);

// WebSocket Portion
// WebSockets work with the HTTP server
var io = require("socket.io")(httpServer);

// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on(
    "connection",
    // We are given a websocket object in our function
    function (socket) {
      console.log(socket.id + " has joined the chat.");

      socket.on("mouse", function(data) {
        //io.emit("mouse", data);
        socket.broadcast.emit("mouse", data);
      });
  
      socket.on("disconnect", function () {
        console.log(socket.id + " has disconnected.");
      });
    }
  );

sketch.js

var socket = io.connect();

socket.on('connect', function() {
    console.log("Connected");
});


let x1 = 0;
let y1 = 0;
let col1 = 10;
let strk1 = 1;
let frmRt = 30
let shape1 = false;
let deg1 = 0.33
let rep = 2;


function setup() {
  createCanvas(400, 400);
  background(0, 0, 0);
  angleMode(DEGREES);
  colorMode(HSB, 360, 100, 100, 100);
  // rectMode(CENTER);
  // frameRate(frmRt);
  create_ui();
}

function draw() {
    frameRate(frmRt);
    slider_value('Rep', rep);
    slider_value('frmRt', frmRt);
    slider_value('x1', x1);
    slider_value('y1', y1);
  noFill();
  translate(width / 2, height / 2);
  // push();

  // rectMode(CENTER);
  if (shape1) {
    ellipseMode(CENTER);
    push();
    // stroke(0, random(0, 85), 0);
    // stroke(85, random(0, 85), 85);
    strokeWeight(strk1);
    stroke(col1, 100, 100, 50);
    rotate(x1 / deg1);
    // rect(x, y, rep * (random(1, 10)), rep * (random(1, 10)));
    // ellipse(t1, t2, 10, t1 + 45);
    ellipse(x1, y1, 10, x1 + 45);
    // rect(x, y, rep * x + 1, y + 5);
    // x = x + 5
    pop();

    x1 = x1 + rep;
    if (x1 > width) {
      x1 = 0;
      y1 = y1 + rep;
    }
  } else {}
}

ui.js

function create_ui() {
  createP();
  {
    let a_button = createButton('resize-full');
    a_button.mousePressed(function() {
      resizeCanvas(windowWidth, windowHeight);
      background(0, 0, 0);
    });
    // createP();
  } {
    let a_button = createButton('resize-inset');
    a_button.mousePressed(function() {
      resizeCanvas(400, 400);
      background(0, 0, 0);
    });
    // createP();
  } {
    let a_button = createButton('reset');
    a_button.mousePressed(function() {
      // translate(windowWidth/2,windowHeight/2);
      fill(0);
      rect(-windowWidth / 2, -windowHeight / 2, windowWidth, windowHeight);
    });
    createP();
  } {
    let a_span = createSpan('Rep:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 10, rep, 0.25);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      rep = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('Rep');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('frmRt:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(10, 100, frmRt);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      frmRt = a_slider.value();
    });
    // createP();
  }{
    let elm = createSpan().id('frmRt');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  }

  //   X1,Y1

  {
    let a_check = createCheckbox('Shape 1', shape1);
    a_check.style('font-size', '25px');
    a_check.style('color:cyan');
    a_check.changed(function() {
      shape1 = this.checked();
    });
    createP();
  } {
    let a_span = createSpan('x1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 100, x1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      x1 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('x1');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
  } {
    let a_span = createSpan('y1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 100, y1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      y1 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('y1');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('Degrees:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(-0.99, 0.99, deg1, 0.01);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      deg1 = a_slider.value();
    });
    // createP();
  } {
    let elm = createSpan().id('Degrees1');
    elm.style('font-size', '20px');
    elm.style('color:magenta');
    createP();
  } {
    let a_span = createSpan('color 1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 360, col1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      col1 = a_slider.value();
    });
  } {
    let a_span = createSpan('stroke 1:');
    a_span.style('font-size', '20px');
    a_span.style('color:cyan');
    let a_slider = createSlider(0, 5, strk1);
    a_slider.style('width', '200px');
    a_slider.input(function() {
      strk1 = a_slider.value();
    });
    createP();
  }
}

style.css

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

An idea

index.html

sketch.js

ui.js

style.css

index.html

server.js

sketch.js

ui.js

style.css

Leave a Reply Cancel reply