// this program is part of the academic investigation by Esteban Barco at HAW Hamburg.

//Karrik by Jean-Baptiste Morizot, Lucas Le Bihan. Distributed by velvetyne.fr.

​

​

​

​

var font;

​

function preload() {

  font = loadFont("media/CooperHewitt-Bold.otf");

}

​

class MovingShape {         

  constructor(globalSpeed, scaleFactor, densX, densY, colorVal, object, colorVal2, skewVal, size, colorShape, fill, compSkew) {

    this.offsetInitialized = false;

​

    this.globalSpeed = globalSpeed;

    this.baseSpeed = this.globalSpeed;

    this.Yspeed = this.globalSpeed;

    this.Xspeed = this.globalSpeed;

    this.rectWidth = 0;  

    this.rectHeight = 0;

​

    this.lineSpeed = 1;

    this.triggerOffset = 1;

    this.isDragging = false;

    this.shapesTop = [];

    this.shapesRight = [];

    this.shapesDown = [];

    this.shapesLeft = [];

​

    this.scaleFactor = scaleFactor;

    this.localScale = globalScale * this.scaleFactor;

    this.grid = globalScale;

    this.gridOffset = grid / 1;

    this.densX = densX

    this.densY = densY;

    this.colorVal = colorVal;

    this.colorVal2 = colorVal2;

    this.colorShape = colorShape;

    this.skewVal = skewVal 

    this.object = object;

    this.fill = fill;

    this.size = size;

    this.compSkew = compSkew

  }

​

  shapePressed() {

    this.isDragging = true;

​

    this.initX = this.snap(mouseX); // Use the snap function

    this.initY = this.snap(mouseY); // Use the snap function

​

    this.minX = this.initX;

    this.minY = this.initY;

​

    this.lineY = this.initY;

  }

​

  shapeReleased() {

    this.isDragging = false;

  }

​

  initShape() {

    if (this.isDragging) {

      // CREATE NEGATIVE RECT SIZES AND MAXX AND MAXY????

      this.rectWidth = this.snap(mouseX) - this.initX;

      this.rectHeight = this.snap(mouseY) - this.initY;

​

      this.maxY = this.rectHeight + this.initY;

      this.maxX = this.rectWidth + this.initX;

​

      this.shapesTop = [];

      this.shapesRight = [];

      this.shapesDown = [];

      this.shapesLeft = [];

​

      for (

        let i = this.maxX;

        i >= this.initX + this.localScale;

        i -= this.snap(this.localScale)*this.densX

      ) {

        this.shapesTop.push(createVector(i, this.initY));

      }

​

      for (

        let j = this.maxY;

        j >= this.minY + this.localScale;

        j -= this.snap(this.localScale)* this.densY

      ) {

        this.shapesRight.push(createVector(this.maxX, j));

      }

​

      for (

        let j = this.minX;

        j <= this.maxX - this.localScale;

        j += this.snap(this.localScale)*this.densX

      ) {

        this.shapesDown.push(createVector(j, this.maxY));

      }

​

      for (

        let j = this.minY;

        j <= this.maxY - this.localScale;

        j += this.snap(this.localScale)*this.densY

      ) {

        this.shapesLeft.push(createVector(this.minX, j));

      }

    }

  }

​

  moveShape() {

    // if the dragged values are higher than the trigger value in the constructor, activate the movement

    if (

      this.rectWidth >= this.triggerOffset &&

      this.rectHeight >= this.triggerOffset

    ) {

      this.Yspeed = 0;

      this.posX += this.baseSpeed;

      this.posY += this.Yspeed;

​

      // if the X value is greater than maxX, stop X value and make Y value move

      if (this.posX >= this.maxX) {

        this.Yspeed = this.globalSpeed;

        this.posX = this.maxX;

        this.posY += this.Yspeed;

      }

​

      if (this.posY >= this.maxY) {

        this.baseSpeed = 0;

        this.Xspeed = -this.globalSpeed;

        this.posX += this.Xspeed;

        this.posY = this.maxY;

      }

​

      if (this.Xspeed === -this.globalSpeed && this.posY < this.maxY) {

        this.posY = this.maxY;

      }

​

      if (this.posX <= this.minX) {

        this.baseSpeed = 0;

        this.Xspeed = 0;

        this.posY -= this.globalSpeed;

      }

​

      if (this.posY <= this.minY) {

        this.Xspeed = this.globalSpeed;

        this.baseSpeed = 0;

        this.posX += this.Xspeed;

      }

    }

  }

​

  moveShapeTop() {

    for (let i = 0; i < this.shapesTop.length; i++) {

      this.shapesTop[i].x -= this.baseSpeed;

​

      // Reset position if ellipse goes beyond maxX

      if (this.shapesTop[i].x <= this.minX+this.compSkew) {

        this.shapesTop[i].x = this.maxX;

      }

    }

  }

​

  moveShapeRight() {

    for (let j = 0; j < this.shapesRight.length; j++) {

      this.shapesRight[j].y -= this.baseSpeed; // Update x-coordinate instead of y-coordinate

​

      // Reset position if shape goes beyond maxX

      if (this.shapesRight[j].y <= this.minY+this.compSkew) {

        this.shapesRight[j].y = this.maxY // Reset to initial x position

      }

    }

  }

​

  moveShapeDown() {

    for (let j = 0; j < this.shapesDown.length; j++) {

      this.shapesDown[j].x += this.baseSpeed; // Update x-coordinate instead of y-coordinate

​

      // Reset position if shape goes beyond maxX

      if (this.shapesDown[j].x >= this.maxX-this.compSkew) {

        this.shapesDown[j].x = this.minX; // Reset to initial x position

      }

    }

  }

​

  moveShapeLeft() {

    for (let j = 0; j < this.shapesLeft.length; j++) {

      this.shapesLeft[j].y += this.baseSpeed; // Update x-coordinate instead of y-coordinate

​

      // Reset position if shape goes beyond maxX

      if (this.shapesLeft[j].y >= this.maxY-this.compSkew) {

        this.shapesLeft[j].y = this.minY; // Reset to initial x position

      }

    }

  }

​

  displayShape() {

    colorMode(RGB, 255)

    fill(this.colorShape);

    strokeWeight(0);

    textFont(font)

    textSize(this.localScale/1.1);

    textAlign(CENTER, CENTER);

      textStyle(BOLD);

    // for some reason this one the distance between each ellipse inside the unwanted groups

    for (let i = 0; i < this.shapesTop.length; i += 1) {

      if(this.object == 1) {

        push()

        translate(this.shapesTop[i].x,

        this.shapesTop[i].y)

        shearX(this.skewVal)

        text(

        divValXRev[i],

        0,0,

        this.localScale,

        this.localScale

      );

        pop()

      }

      if(this.object == 2) {

       push()

        translate(this.shapesTop[i].x, this.shapesTop[i].y)

        shearX(this.skewVal)

        rect(0,0,

        this.localScale/this.size,

        this.localScale,

          100

      );

        pop()

      } 

    }

​

    for (let j = 0; j < this.shapesRight.length; j += 1) {

      //ellipse(this.maxX, this.shapesRight[j].y, 25);

      if(this.object == 1) {

        push()

        translate(this.maxX, this.shapesRight[j].y)

        shearY(this.skewVal)

text(

        divValYRev[j],

        0,0,

        this.localScale,

        this.localScale

      );

        pop()

      }

      if(this.object == 2) {

        push()

        translate(this.maxX, this.shapesRight[j].y)

        shearY(this.skewVal)

        rect(0,0,

        this.localScale,

        this.localScale/this.size,

          100

      );

        pop()

      }

    }

    for (let j = 0; j < this.shapesDown.length; j += 1) {

      if(this.object == 1) {

        push()

        translate(this.shapesDown[j].x,

        this.maxY)

        shearX(-this.skewVal)

      text(

        divValX[j],

        0,0,

        this.localScale,

        this.localScale       

      );

        pop()

    }

      if (this.object == 2) {

        push()

        translate(this.shapesDown[j].x,

        this.maxY)

        shearX(-this.skewVal)

        rect(0,0,

      this.localScale/this.size,

        this.localScale,

          100);

        pop()

      }

    }

​

    for (let j = 0; j < this.shapesLeft.length; j += 1) {

       if(this.object == 1) {

         push()

         translate(this.minX, this.shapesLeft[j].y)

           shearY(-this.skewVal)

       text(

        divValY[j],

        0,0,

        this.localScale,

        this.localScale,

      );

         pop()

    }

      if (this.object == 2) {

        push()

        translate(this.minX,

        this.shapesLeft[j].y)

        shearY(-this.skewVal)

        rect(0,0,

        this.localScale,

        this.localScale/this.size,

          100);

        pop()

      }

    }  

  }

​

  fillInside() {

  fill(0,0,255)

    noStroke()

    rectMode(CORNER)

    rect(this.minX+this.localScale, this.minY+this.localScale, this.snap(this.rectWidth)-this.localScale, this.snap(this.rectHeight)-this.localScale)

  }

​

  displayOnTop() {

    push();

    colorMode(RGB, 255)

    fill(this.colorVal);

    noStroke()

    rect(this.snap(this.minX), this.snap(this.minY), this.localScale);

    rect(this.snap(this.maxX), this.snap(this.minY), this.localScale);

    rect(this.snap(this.maxX), this.snap(this.maxY), this.localScale);

    rect(this.snap(this.minX), this.snap(this.maxY), this.localScale);

    pop();

  }

​

  drawPattern() {

    push();

    colorMode(HSB, 255)

    // TOP PATTERN

    for (var i = this.minX; i <= this.maxX; i += this.localScale/4) {

      if(this.fill == 1) {

       fill((i*0.5),(i),i);

      }

       if(this.fill == 2) {

      fill(this.colorVal2);  

      }

      rect(

        i,

        this.snap(this.minY),

        this.localScale/3,

        this.localScale

      );

    }

​

    //RIGHT PATTERN

    for (var i = this.minY; i <= this.maxY; i += this.localScale/4) {

      if(this.fill == 1) {

          fill((i*0.5),(i),i); 

      }

       if(this.fill == 2) {

       fill(this.colorVal2); 

      }

      rect(

        this.snap(this.maxX),

        i,

        this.localScale,

        this.localScale

      );

    }

​

    //BOTTOM PATTERN

    for (var i = this.maxX; i >= this.minX; i -= this.localScale/4) {

      if(this.fill == 1) {

           fill((i*0.5),(i),i);

      }

      if(this.fill == 2) {

       fill(this.colorVal2); 

      }

      rect(

        i,

        this.snap(this.maxY),

        this.localScale,

        this.localScale

      );

    }

​

    //LEFT PAttern

    for (var i = this.maxY; i >= this.minY; i -= this.localScale/4) {

      if(this.fill == 1) {

            fill((i*0.5),(i),i); 

      }

     if(this.fill == 2) {

       fill(this.colorVal2); 

      }

      rect(

        this.snap(this.minX),

        i,

        this.localScale,

        this.localScale)

    }

    pop();

  }

​

  snap(op) {

    var cell = Math.round((op - this.gridOffset) / this.grid);

    return cell * this.grid + this.gridOffset;

  }

}

​

class Block {

  constructor(speed, scaleFactor, densX, densY, colorVal, object, colorVal2, skewVal, size, colorShape, fill, compSkew) {

    this.rectBase = new MovingShape(0, scaleFactor, densX, densY, colorVal, object, colorVal2, skewVal, size, colorShape, fill, compSkew);

​

    this.movingShapes = new MovingShape(speed, scaleFactor, densX, densY, colorVal,object, colorVal2, skewVal, size, colorShape, fill, compSkew);

  }

​

  update() {

    if(chk2.checked) {

        this.rectBase.initShape();

    this.rectBase.drawPattern();

    }

    this.movingShapes.initShape();

    if(chk4.checked) {

      this.movingShapes.fillInside();

    }

    this.movingShapes.displayShape();

    this.movingShapes.moveShapeTop();

    this.movingShapes.moveShapeRight();

    this.movingShapes.moveShapeDown();

    this.movingShapes.moveShapeLeft();

​

   if(chk3.checked) {

       this.movingShapes.displayOnTop();

   }

  }

}

​

// this global variable defines the proportion of the whole grid, including the blocks and all its contents

var globalScale = 50

​

let blocks = [];

let currentBlock;

let currentBlock2

var gridOffset;

var font;

var l;

var grid;

var scaleBoxY;

var scaleBoxX;

​

var sliderScaleY;

var sliderScaleX;

​

let inputX;

var inputValX;

var divValX;

​

let inputY;

var inputValY;

var divValY;

​

let slider

let sliderScale;

let sliderdensXTop;

let sliderSkew;

let sliderSize;

​

let sliderObject

let sliderFill;

​

let myPicker;

let myPicker2;

let myPickerShape;

let myPickerBG;

​

​

​

function setup() {

  createCanvas(1400, 900);

​

  inputX = createInput("FLEXIBEL");

  inputY = createInput("MOTION");

​

slider = createSlider(0.2,4.8,1,0.5)

  slider.addClass("mySliders")

  sliderScale = createSlider(1,4,1,1)

  sliderScale.addClass("mySliders")

  sliderdensX = createSlider(0.6,6,1,0.1)

  sliderdensX.addClass("mySliders")

  sliderdensY = createSlider(0.8,6,1,0.1)

  sliderdensY.addClass("mySliders")

  sliderSkew = createSlider(-0.6,0,0,0.3)

  sliderSkew.addClass("mySliders")

  sliderObject = createSlider(1,2,1)

  sliderObject.addClass("mySliders")

  sliderFill = createSlider(1,2,1)

  sliderFill.addClass("mySliders")

  sliderSize  = createSlider(1,6,1,1)

    sliderSize.addClass("mySliders")

   chk1 = select("#box1").elt;

  chk2 = select("#box2").elt;

  chk3 = select("#box3").elt;

   chk4 = select("#box4").elt;

  chk1.checked = true;

  chk2.checked = true;

  chk3.checked = true;

  chk4.checked = true;

  myPicker = createColorPicker("blue");

  myPicker.position(0, 32);

  myPicker2 = createColorPicker("rgb(0,0,0)");

  myPicker2.position(60, 32);

  myPickerBG = createColorPicker("rgb(0,0,0)");

  myPickerBG.position(120, 32);

  myPickerShape = createColorPicker("rgb(255,255,255)");

  myPickerShape.position(180, 32);

}

​

function draw() {

   let c = myPickerBG.color()

  background(c);

​

  // I DO NOT WANT THE GRID ITSELF TO CHANGE LIVE BUT RATHER THE AMOUNT OF ELLISPES TAKEN INSIDE

  grid = globalScale;

  var gridOffset = grid / 1;

​

  l = 1;

​

  if(chk1.checked) {

  displayGrid(); 

  }

  passText();

​

  for (let i = 0; i < blocks.length; i++) {

    blocks[i].update();

  }

}

​

function displayGrid() {

  push();

  stroke(100);

  strokeWeight(1)

  while (l < width || l < height) {

    line(0, l, width, l);

    line(l, 0, l, height);

    l += grid;

  }

  pop();

}

​

function passText() {

  inputValX = inputX.value();

  divValX = inputValX.split("");

  divValXRev = divValX.toReversed();

​

  inputValY = inputY.value();

  divValY = inputValY.split("");

  divValYRev = divValY.toReversed();

}

​

function newBlock() {

  let speed = slider.value();

  let scale = sliderScale.value()

  let densX = sliderdensX.value();

  let densY = sliderdensY.value();

  let skewVal = sliderSkew.value();

  let compSkew = map(skewVal, -0.6,0,25,0)

  let size = sliderSize.value()

   let colorVal = myPicker.color()

   let colorVal2= myPicker2.color();

  let colorShape = myPickerShape.color();

   let object = sliderObject.value();  

  let fill = sliderFill.value();

​

  currentBlock = new Block(speed, scale, densX, densY, colorVal, object, colorVal2, skewVal, size, colorShape, fill, compSkew);

  blocks.push(currentBlock);

}

​

function mousePressed() {

  newBlock();

  currentBlock.rectBase.shapePressed();

  currentBlock.movingShapes.shapePressed();

}

​

function mouseReleased() {

  currentBlock.rectBase.shapeReleased();

  currentBlock.movingShapes.shapeReleased();

​

  newBlock();

}

​

function keyPressed() {

  if (keyCode === LEFT_ARROW) {

    blocks.splice(-1);

  }

}

​