//

// Although P5 doesn't have native variable font support,

// it can manipulate the DOM and HTML/CSS. The text does

// not live in the canvas and cannot use most p5 native 

// functions, but can manipulated by updating the CSS.

//

// Here, our text lives in a separate HTML element on top

// of the canvas.

//

// Note: This also means the native p5 image-saving functions

// don't work :)

//

// Steps:

//

// 1. Update style.css to include your font-face and any other

//    CSS attributes you want for your text (color, background etc.)

//

// 2. Create a <p> with your text and CSS class.

// 3. Update the font variable settings in draw().

let xspacing = 16; // Distance between each horizontal location

let w; // Width of entire wave

let theta = 0.0; // Start angle at 0

let amplitude = 1.0; // Height of wave

let period = 50.0; // How many pixels before the wave repeats

let dx; // Value for incrementing x

let yvalues; // Using an array to store height values for the wave

​

​

​

​

//

let paragraph;

let angle = 0;

let graphik; 

let title = '<span class="title">Skin Types</span>';

let oily = '<span class="oily">OILY</span>';

let dry = '<span class="dry">SKIN</span>';

let combination = '<span class="oily2">IS IN</span>';

// let normal = '<span class="dry2">in</span>';

let value = 300;

let weight= 40;

let img;

​

function preload() {

  BPdots = loadFont('BPdotsSquareVF.ttf');

  Dusseldot = loadFont('Dusseldot-Variable-Trial.ttf');

  TINY = loadFont('TINY5x3GX.ttf');

  img = loadImage('hyla.png');

}

​

function setup() { 

  createCanvas(windowWidth, windowHeight, WEBGL);

   canvas.style.position = "fixed";

  canvas.style.overflow = "hidden";

  textFont(BPdots);

  fill('black');

  textSize(width / 20);

  textAlign(CENTER, CENTER);

  //

  w = width + 50000;

  dx = (TWO_PI / period) * xspacing;

  yvalues = new Array(floor(w / xspacing));

  //

  // To center the text, we use a flexbox container

  // with the same canvas width/height and position it at 0,0.

  //

  // See style.css for center alignment CSS properties.

  div = createDiv()

    .addClass('flex-container')

    .size(width, height)

   // .position(0, 0) 

    .position('absolute')

// let a = createA('https://defund12.org/nyc', '', '_blank')

// a.child(div) 

  // Create our text element with the 'hello' CSS class,

  // and wrap it within the flexbox container to center it.

​

   paragraph1 = createP(oily).addClass('oily');

  div.child(paragraph1)

   paragraph2 = createP(dry).addClass('dry');

  div.child(paragraph2)

  paragraph3 = createP(combination).addClass('oily2');

  div.child(paragraph3)

}

​

function draw() {

  calcWave();

  pointLight(255,255,255,0,-200,0)

  pointLight(255,255,255,0,200,0) 

  pointLight(255,255,255,0,0,200) 

  ambientLight(230,150,150, 0.5)

  background('#68d1e5')

  image(img, mouseX - 500, mouseY - 500, 200, 200);

​

   //cursor(HAND);

//    dotWeightControl = map(mouseX, 0, windowWidth, 150, 300);

//   dotWeightControlInverse = map(mouseX, 0, windowWidth, 150, 0);

​

//   weightControl = map(mouseX, 0, windowWidth, 300, 900);

//   weightControlDussel = map(mouseY, 0, windowHeight, 50, 250);

//   for (let x = 0; x < yvalues.length; x++) {

//      dotWeightControl = 10 + abs(sin(yvalues[x]) * 300);

//     dotWeightControlInverse = 150 - abs(sin(yvalues[x]) * 150);

//   }

  dotWeightControl = map(mouseX, 0, windowWidth/2, 300, 10);

  dotWeightControlInverse = map(mouseY, 0, windowHeight/2, 300, 10);

​

  weightControl = map(mouseX, 0, windowWidth, 300, 900);

  weightControlDussel = map(mouseY, 0, windowHeight, 50, 250);

​

  // Update text CSS

​

  paragraph1.elt.style['font-variation-settings'] = `"wght" ${dotWeightControl}`;

  paragraph2.elt.style['font-variation-settings'] = `"wght" ${dotWeightControlInverse}`;

    paragraph3.elt.style['font-variation-settings'] = `"wght" ${dotWeightControlInverse}`;

​

​

​

  // push();

  // ambientMaterial(249,193,36)

  // noStroke()

  // rotateZ(frameCount * 0.01);

  // rotateY(frameCount * 0.01);

  // rotateX(mouseY/windowHeight*8);

  // smooth();

  // cylinder((windowWidth-mouseX)/1.75, (windowWidth-mouseX)/30, 100, 1);

  // pop();

  //let email= mouseX/windowWidth;  

//   if (email >= 0.998){

//   window.open('https://defund12.org/nyc','_blank'); 

//     email = 0; 

// }

  //print (email);

}

​

​

​

​

// function mousePressed() {

//  // window.open('https://defund12.org/nyc','_blank');

// } 

​

function touchMoved() {

  return false;

}

​

​

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function calcWave() {

  // Increment theta (try different values for

  // 'angular velocity' here)

  theta += 0.02;

​

  // For every x value, calculate a y value with sine function

  let x = theta;

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

    yvalues[i] = sin(x) * amplitude;

    x += dx;

  }

}