Hugging Face's logo

Spaces:
tinazone
/
word-to-code
Running

App Files Community
word-to-code
File size: 3,178 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
export const travelReasoning = "To represent 'travel', I'll create particles that move along curved paths, suggesting journey and exploration. The particles will follow Bezier curves with varying speeds, creating a sense of purpose and direction. Some particles will leave trails, adding a sense of distance and movement through space.";

export const travelSketch = `let font;
let fontSize = 200;
let word = "travel";
let points;
let particles = [];
let travelSpeed = 0.8;
let particleMinSize = 4;
let particleMaxSize = 4;
let minX, maxX;

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);
  }

  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
    sampleFactor: 0.1
  });

  minX = width;
  maxX = 0;
  for (let pt of points) {
    minX = min(minX, pt.x);
    maxX = max(maxX, pt.x);
  }

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

function draw() {
  blendMode(BLEND);  // Reset to default blend mode first
  background(0);     // Clear with black background
  blendMode(SCREEN); // Then set screen blend mode for particles

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

class Particle {
  constructor(x, y, index, allPoints) {
    this.pos = createVector(x, y);
    this.size = random(particleMinSize, particleMaxSize);
    this.alpha = 255;
    this.pointIndex = index;
    this.points = allPoints;
    this.targetPoint = this.getNextTargetPoint();
  }

  getNextTargetPoint() {
    if (this.points.length === 0) return this.pos;

    this.pointIndex++;
    if (this.pointIndex >= this.points.length) {
      this.pointIndex = 0;
    }
    return createVector(this.points[this.pointIndex].x, this.points[this.pointIndex].y);
  }

  update() {
    if (!this.targetPoint) return;

    let direction = p5.Vector.sub(this.targetPoint, this.pos);
    let distance = direction.mag();

    if (distance < 1) {
      this.targetPoint = this.getNextTargetPoint();
      if (!this.targetPoint) return;
      direction = p5.Vector.sub(this.targetPoint, this.pos);
    }

    direction.normalize();
    direction.mult(travelSpeed);
    this.pos.add(direction);
  }

  display() {
    noStroke();
    let normalizedX = map(this.pos.x, minX, maxX, 0, 1, true);
    let particleColor = this.getColorBlend(normalizedX);
    fill(particleColor);
    ellipse(this.pos.x, this.pos.y, this.size, this.size);
  }

  getColorBlend(normalizedX) {
    if (normalizedX < 0.5) {
      return lerpColor(color(color1), color(color2), normalizedX * 2);
    } else {
      return lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
    }
  }
}`;