Hugging Face's logo

Spaces:
tinazone
/
word-to-code
Running

App Files Community
word-to-code
File size: 2,314 Bytes 
21d7fc3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
export const initialSketch = `
let font;
let fontSize = 200;
let word = "hello";
let points;
let particles = [];
let particleMinSize = 4;
let particleMaxSize = 8;

// Jump effect parameters
let jumpAmplitude = 5;
let jumpSpeed = 0.03;
let jumpOffsetRange = 2;

// Colors for gradient
let color1 = "#217BFE";
let color2 = "#078BFE";
let color3 = "#AC87EB";

function preload() {
  font = loadFont('/fonts/GoogleSans-Bold.ttf');
}

function setup() {
  createCanvas(500, 500);
  background(0);
  textFont(font);
  textSize(fontSize);
  textAlign(CENTER, CENTER);

  // Get the width of the text
  let textW = textWidth(word);

  // If text is too wide, scale down fontSize
  if (textW > width * 0.8) {
    fontSize = fontSize * (width * 0.8) / textW;
    textSize(fontSize);
    textW = textWidth(word);
  }

  // Get points for the text centered in canvas
  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
    sampleFactor: 0.1
  });

  // Create particles at each point
  for (let i = 0; i < points.length; i++) {
    particles.push(new Particle(points[i].x, points[i].y, i, points.length));
  }
}

function draw() {
  blendMode(BLEND);
  background(0);
  blendMode(SCREEN);

  for (let particle of particles) {
    particle.update();
    particle.display();
  }
}

class Particle {
  constructor(x, y, index, totalParticles) {
    this.pos = createVector(x, y);
    this.originalPos = createVector(x, y);
    this.size = random(particleMinSize, particleMaxSize);
    this.alpha = 255;
    this.colorValue = this.getColor(index, totalParticles);
    this.jumpOffset = random(jumpOffsetRange);
  }

  getColor(index, totalParticles) {
    let normalizedIndex = index / (totalParticles - 1);
    let particleColor;
    if (normalizedIndex < 0.5) {
      particleColor = lerpColor(color(color1), color(color2), normalizedIndex * 2);
    } else {
      particleColor = lerpColor(color(color2), color(color3), (normalizedIndex - 0.5) * 2);
    }
    return particleColor;
  }

  update() {
    // Subtle wave-like jumping motion
    let jump = sin(frameCount * jumpSpeed + this.jumpOffset) * jumpAmplitude;
    this.pos.y = this.originalPos.y + jump;
  }

  display() {
    noStroke();
    fill(this.colorValue);
    ellipse(this.pos.x, this.pos.y, this.size, this.size);
  }
}`;