Final ball-2

// revised by schien@mail.ncku.edu.tw

// modification 1: correct mistaken understanding -- comparison for equal value should use "==="

// modification 2: correct mistaken understanding -- random() creates floating point numbers instead of integers

​

//RE:https://www.openprocessing.org/sketch/857874

//RE:https://www.openprocessing.org/sketch/1037306

let serial; // variable to hold an instance of the serialport library

let portName = 'COM4'; // my serial port

let inData = -1; // variable to hold the input data from Arduino; initialize it to a negative value in case serial delays

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  //background(100);

  // setup communiation port

  serial = new p5.SerialPort(); // make a new instance of the serialport library

  serial.on('list', printList); // set a callback function for the serialport list event

  serial.on('connected', serverConnected); // callback for connecting to the server

  serial.on('open', portOpen); // callback for the port opening

  serial.on('data', serialEvent); // callback for when new data arrives

  serial.on('error', serialError); // callback for errors

  serial.on('close', portClose); // callback for the port closing

​

  serial.list(); // list the serial ports

  serial.open(portName); // open my serial port

}

  // visualize my LED light "inData很重要"

  //let leftBrightness = map(inData, 0, 255, 0, 255);   // map input to the correct range of brightness

​

//if設定keypressed1-6

function draw() {

  frameRate(5);

  let Ma =[1,2,3];

  let Magic;

  //ellipse(mouseX, mouseY, 20, 20);

  if(inData===1){ // to compare if inData is equal to 1, use "===" not "=" (schien)

    Magic=random(Ma.length);  // random does not create integer; this does produce what you want! (schien)

    // the code below is disabled because the outcome is poor (schien)

    //if (Magic < 1){ 

    //  case1();

    //} else if (Magic < 2){

    //  case2();

    //} else {

    //  case3();

    //}

    case6();

  }

​

  if(inData===2){

    Magic=random(Ma.length);

    // the code below is disabled because the outcome is poor (schien)

    //if (Magic < 1){

    //  case4();

    //} else if (Magic < 2){

    //  case5();

    //} else {

    //  case6();

    //}

    case5();

  }

}

​

// for testing (schien)

function keyPressed() {

  switch (key) {

    case'1':

      inData = 1;

      break;

    case'2':

      inData = 2;

      break;

  }

}

​

​

// callback to get data

function serialEvent() {

  inData = Number(serial.read());

}

​

// Following functions print the serial communication status to the console for debugging purposes

​

​

function printList(portList) {

  // portList is an array of serial port names

  for (var i = 0; i < portList.length; i++) {

    // Display the list the console:

    console.log(i + ":" + portList[i]);

  }

}

​

function serverConnected() {

  print('connected to server.');

}

​

function portOpen() {

  print('the serial port opened.')

}

​

function serialError(err) {

  print('Something went wrong with the serial port. ' + err);

}

​

function portClose() {

  print('The serial port closed.');

}

​

​

​

​

function case1() {

      //PSEUDO CODE

​

      //1.Create canvas

      //2.Draw

      // 3.GET TIME 

      // 4.Rotation 

​

​

​

​

      //1.Create canvas

      background(42, 42, 42);

      noFill();

​

​

      // 3.GET TIME 

      let h = hour();

      let m = minute();

      let s = second();

​

​

​

​

      // 4.Rotation 

​

      //second

      stroke(187, 134, 251);

      strokeWeight(10);

      let sAngle = map(s, 0, 60, 1, 359);

      arc(300, 300, 300, 300, radians(-90), radians(sAngle - 90));

      let xx = 300 + (110 * cos(radians(sAngle - 90)));

      let yy = 300 + (110 * sin(radians(sAngle - 90)));

      circle(xx, yy, 10)

​

​

      //minute

      stroke(0, 218, 197);

      strokeWeight(6);

      let mAngle = map(m, 0, 69, 1, 359);

      arc(300, 300, 280, 280, radians(-90), radians(mAngle - 90));

      xx = 300 + (90 * cos(radians(mAngle - 90)));

      yy = 300 + (90 * sin(radians(mAngle - 90)));

      line(300, 300, xx, yy);

​

​

      //hour

      stroke(208, 103, 122);

      strokeWeight(6);

      let hAngle = map(h % 12, 0, 12, 1, 359);

      arc(300, 300, 260, 260, radians(-90), radians(hAngle - 90));

​

      xx = 300 + (70 * cos(radians(hAngle - 90)));

      yy = 300 + (70 * sin(radians(hAngle - 90)));

      line(300, 300, xx, yy);

​

​

​

​

      //REFERENCE

      //https://www.youtube.com/watch?v=E4RyStef-gY&t=139s

      //WITH MINIMAL AMOUNT OF CHANGES

​

  }

  function case2() {

      let segments = 12;

      noStroke();

      fill(255);

      rect(0, 0, width, height);

      colorMode();

​

      let unitAngle = 2.0 * PI / segments;

      let centerX = width / 2;

      let centerY = height / 2;

      let radius = height / 2;

​

      for (let count = 0; count < segments; count++) {

        let startVX = radius * cos(unitAngle * count) + centerX;

        let startVY = radius * sin(unitAngle * count) + centerY;

        let endVX = radius * cos(unitAngle * (1 + count)) + centerX;

        let endVY = radius * sin(unitAngle * (1 + count)) + centerY;

​

        fill(255 * count / segments, 255, 100);

        stroke(255 * count / segments, 255, 100);

        triangle(centerX, centerY, startVX, startVY, endVX, endVY);

      }

​

  }

  function case3() {

      let tileCount = 20;

      let actRandomSeed = 0;

      frameRate(4);

      strokeWeight(15);

      background(255);

      actRandomSeed = int(random(100000));

      randomSeed(actRandomSeed);

​

      for (let gridY = 0; gridY < tileCount; gridY++) {

        for (let gridX = 0; gridX < tileCount; gridX++) {

​

          let posX = width / tileCount * gridX;

          let posY = height / tileCount * gridY;

​

          let toggle = int(random(0, 2));

​

          if (toggle === 0) {

            line(posX, posY, posX + width / tileCount, posY + height / tileCount);

          }

          if (toggle === 1) {

            line(posX, posY + width / tileCount, posX + height / tileCount, posY);

          }

        }

      }

​

  }

  function case4() {

      let pallete = ["#4D6F83", "#B1B0B1", "#278DD3", "#F8B623", "#3C494F", "#D51311", "#02020C"];

      let sep = 3;

      let rs;

      colorMode(HSB, 360, 100, 100, 100);

      rs = random(10000);

      background(200);

      randomSeed(rs);

​

      drawingContext.shadowColor = color(0, 0, 0);

      drawingContext.shadowBlur = 100;

      drawingContext.shadowOffsetY = 50;

      drawingContext.shadowOffsetX = 0;

​

      for (let y = -height / 2; y < height; y += height / 10) {

        let c1 = random(pallete);

        let c2 = random(pallete);

        let c3 = random(pallete);

        while (c1 == c2 || c2 == c3 || c3 == c1) {

          c1 = random(pallete);

          c2 = random(pallete);

          c3 = random(pallete);

        }

        let gradient = drawingContext.createLinearGradient(0, 0, width, 0);

​

        gradient.addColorStop(0.0, c1);

        gradient.addColorStop(random(0.3, 0.7), c2);

        gradient.addColorStop(1.0, c3);

        //上で指定したグラデーション内容を塗りつぶしスタイルに代入する

        drawingContext.fillStyle = gradient;

        noStroke();

        beginShape();

        for (let x = -200; x <= width + 200; x += 3) {

          let yy = y + map(noise(rs + y, x / 400, frameCount / 300), 0, 1, -height / sep, height / sep);

          vertex(x, yy);

        }

        vertex(width + 200, height);

        vertex(0 - 200, height);

        endShape();

      }

      // noLoop();

  }

  function case5() {

​

      var noiseX;

      //y offset of the noise field

      var noiseY;

      //time offset of noise field

      var noiseF;

      var f = 0.0;

      //there are 8 color types in total

      var colorState;

      stroke(255, 150);

      strokeWeight(1.5);

      noFill();

      //random offset the noise field

      noiseX = random(100);

      noiseY = random(100);

      noiseF = random(100);

      colorState = 0;

      background(0);

      //wave changes smoothly along time passes, f is the third parameter in noise function

      f += 0.015;

​

      //wave height varies upon mouseX

      var waveH = map(mouseX, 0, width, 100, 500);

      //wave quantity is determined by mouseY

      for (var h = mouseY; h < height + 100; h += 4) {

        //start a curve

        beginShape();

        //there are 8 color types in total, all changes within a range gradually upon mouseY

        switch (colorState) {

          case 0:

            stroke(200, 10, map(h, mouseY, height, 0, 255));

            break;

          case 1:

            stroke(200, 200, map(h, mouseY, height, 0, 255));

            break;

          case 2:

            stroke(10, 10, map(h, mouseY, height, 0, 255));

            break;

          case 3:

            stroke(map(h, mouseY, height, 0, 255), 200, 10);

            break;

          case 4:

            stroke(map(h, mouseY, height, 0, 255), 10, map(h, mouseY, height, 0, 255));

            break;

          case 5:

            stroke(map(h, mouseY, height, 0, 255), 200, map(h, mouseY, height, 0, 255));

            break;

          case 6:

            stroke(10, map(h, mouseY, height, 0, 255), map(h, mouseY, height, 0, 255));

            break;

          case 7:

            stroke(200, map(h, mouseY, height, 0, 255), map(h, mouseY, height, 0, 255));

            break;

          default:

            stroke(map(h, mouseY, height, 0, 255), map(h, mouseY, height, 0, 255), 200);

            break;

        }

​

        //temporary variable for drawing curves

        var x = 0;

        //height scale is perlin noise calculated by 3 numbers

        var y = h + waveH * noise(noiseX, noiseY + h * 0.01, noiseF + f);

        //first vertex

        curveVertex(x, y);

​

        //intermediate vertices

        for (var w = 0; w <= width; w += 20) {

          x = w;

          y = h + waveH * noise(noiseX + w * 0.001, noiseY + h * 0.01, noiseF + f)

          curveVertex(x, y);

        }

​

        //last vertex

        x = width;

        y = h + waveH * noise(noiseX + width, noiseY + h * 0.01, noiseF + f);

        curveVertex(x, y);

        //complete a curve

        endShape();

      }

  }

  function case6() {

    background(255);

      fill(14, 90, 100);

      noStroke();

      let d = random(90, 130);

      let x = random(d, width - d);

      let y = random(d, 100);

      circle(x, y, d);

​

​

      // field

      stroke(14, 90, 15);

      strokeWeight(2);

      let theta0 = random(TWO_PI);

      let interLines = 6;

      let incr = 10;

      for (let k = 2; k > 1; k -= 0.2) {

        let nLines = 25 * k;

        let freq = 1 / random(50, 100);

        theta0 += random(HALF_PI, 3 * HALF_PI);

​

        y = height - (nLines - 1) * interLines + 25;

        x = -incr;

        fill(14, 10, 100);

        strokeWeight(3.5);

        beginShape();

        vertex(x, height);

        vertex(x, height);

        while (x <= width + incr) {

          let yOffset = (cos(x * freq + theta0)) * 30;

          yOffset *= map(y, height, height - interLines * nLines, 0, 1);

          curveVertex(x, y + yOffset);

          x += incr;

        }

        vertex(x, height);

        vertex(x, height);

        endShape();

​

        noFill();

        strokeWeight(2);

        y = height + interLines + 25;

        for (let i = 0; i < nLines - 1; i++) {

          x = -incr;

          y -= interLines;

          beginShape();

          while (x <= width + incr) {

            let yOffset = (cos(x * freq + theta0)) * 30;

            yOffset *= map(y, height, height - interLines * nLines, 0.2, 1);

            curveVertex(x, y + yOffset);

            x += incr;

            if (random() > 0.8) {

              endShape();

              beginShape();

            }

          }

          endShape();

        }

      }

}