-
CP2: Text to Points (the hard way) – Interactive Typography
In the "easy way" version, we just drew text onscreen and used the color to determine if a letter was there. But what if we want the outline of text instead?
While p5.js does have a textToPoints() function built in (https://p5js.org/reference/#/p5.Font/textToPoints), it has limited capability, namely that it just gives you a big list of points and we don't have a way of knowing when one part of a letter begins and the next ends. But, being an open-source project, we can take a peek at the code for textToPoints() and make our own version! (You could also fork p5.js from Github and make modifications that way, even submit a change to the project!) The basics are pretty simple but the details get real gnarly.
There are still some limitations, the big one being that we don't have a good way ...
published: 12 Feb 2021
-
CP2: Text to Points (the easy way) – Interactive Typography
What if we want to transform our text into different shapes? Or if we want the letters to have physics or other cool effects applied to them? There are a few ways we might approach this, but the easiest is to simply draw the text onscreen, then look at the pixels to see if a letter is present in a particular spot or not!
Inspired by "Aggregate Drawing" by Amnon Owed: https://github.com/AmnonOwed/CAN_GenerativeTypography/tree/master/Image-Based
👩💻 https://editor.p5js.org/jeffThompson/sketches/KcWbXgTP8
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
CHALLENGES
❓ Play with the parameters here and see how those changes affect the overall look and feel of the sketch! Try dot size, the shape that's drawn, and the amount of distortion as a starting p...
published: 12 Feb 2021
-
CP2: Homework – Interactive Typography
Over the next two weeks, your assignment is to create a landing page for a brand's website, focusing on interactive typography. You'll need to think about stylistic choices in the context of a client-driven project and their brand (color, typefaces used, overall feel) but are also encouraged to creatively/wildly experiment. The goal here is something visually engaging and super awesome! Your choice of "brand" to work with is up to you: it can be a real company; one from film, television, fiction, comics, etc; an organization; or a person.
Typography and interaction should be the key focus here: think about fun, creative, experimental, weird, engaging ways to play with letters, their shapes, and words. What fonts best fit your project? What kinds of visuals and interactions best suit the b...
published: 12 Feb 2021
-
CP2: Text on Circle – Interactive Typography
While we use straight text in most cases, sometimes you want to make things a little more exciting! This example shows how to create text on a circle but comes with a caveat: it doesn't maintain the fancy letter-spacing that we'd get with normal text (since kerning is ignored).
Circles are easy, more complex curves and other shapes will require a lot more math, so we'll skip that here :)
👩💻 https://editor.p5js.org/jeffThompson/sketches/Dzr4vexcc
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
CHALLENGES
❓ Can you have the letters change color as they go around the circle? (Hint: use lerpColor)
❓ Can you make this interactive by mapping the mouse position to startAngle and distanceAngle?
❓ Or can you make the entire circle rotate slowly? Or anim...
published: 12 Feb 2021
-
CP2: Using an External Editor for p5.js – Interactive Typography
The p5.js online editor is awesome: it's a quick and easy way to start coding, it lets you share your projects easily, and it takes no effort to get it working. But it has some serious limitations too: everything has to fit on one screen, no auto-complete or color themes, and upload limits. Using a code editor locally on your computer does take some extra work but is well worth the time. Finding a workflow that's right for you can be an endless rabbit hole and this is just one way of working, but if you're just transitioning from the online editor this should help you get started. Experiment and see what works for you!
👩💻 https://github.com/jeffThompson/CreativeProgramming2/blob/master/Resources/UsingAnExternalEditor.md
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/...
published: 12 Feb 2021
-
CP2: Touch Input – Interactive Typography
Note: this demo won't work on a normal computer. Try it on a phone or tablet for the full effect, though you can see how the code works here.
One of the great things about projects that run in the web browser is that they can run on tons of different devices, including phones and tablets! Javascript provides touch input on devices that have it and p5.js has made it super easy to access that data.
For most purposes, touch works just like the mouse: if you use mouseX/mouseY in your sketch and someone is on a phone, it will work just like a mouse. In fact, though p5.js provides some touch-related functions we almost never need them: mouse ones will capture both mouse and touch!
This sketch demonstrates the more advanced "touches" array, that allows us to see multiple fingers touching our s...
published: 12 Feb 2021
-
CP2: Type as Images – Interactive Typography
There are times when dealing with type as letters and shapes can't get you the effect you're after. But, using a separate graphics object (like our canvas but not displayed onscreen) means we can do some really fun, glitchy, playful stuff with our text!
For a "real-world" project, you'd probably want to create the tiles and save them to a folder instead of creating them every time the sketch gets run.
👩💻 https://editor.p5js.org/jeffThompson/sketches/SDn2TAskD
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
SEE ALSO
💡 This example on getting portions of an image: https://editor.p5js.org/jeffThompson/sketches/oLiww5UE9
💡 And this one about offscreen graphics: https://editor.p5js.org/jeffThompson/sketches/ObJgmj-2c
published: 12 Feb 2021
-
Crazy tick removal? Or fake?
published: 20 Aug 2022
-
Cosplay by b.tech final year at IIT Kharagpur
published: 27 May 2022
-
Tamasha Dekho 😂 IITian Rocks Relatives Shock 😂😂😂 #JEEShorts #JEE #Shorts
JEE PDFs: https://t.me/namochat
published: 05 Oct 2022
22:20
CP2: Text to Points (the hard way) – Interactive Typography
In the "easy way" version, we just drew text onscreen and used the color to determine if a letter was there. But what if we want the outline of text instead?
W...
In the "easy way" version, we just drew text onscreen and used the color to determine if a letter was there. But what if we want the outline of text instead?
While p5.js does have a textToPoints() function built in (https://p5js.org/reference/#/p5.Font/textToPoints), it has limited capability, namely that it just gives you a big list of points and we don't have a way of knowing when one part of a letter begins and the next ends. But, being an open-source project, we can take a peek at the code for textToPoints() and make our own version! (You could also fork p5.js from Github and make modifications that way, even submit a change to the project!) The basics are pretty simple but the details get real gnarly.
There are still some limitations, the big one being that we don't have a good way to tell if a shape is the outside or a cutout, like we'd have in the letter 'o'. It also doesn't work with textAlign()... :(
👩💻 https://editor.p5js.org/jeffThompson/sketches/MxFTxdx_H
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
CHALLENGES
❓ Can you try other ways of displaying the letters? What about points or circles? Experiment with size and color to see how it changes the look
❓ The list of lists of lists gets a litte complicated, especially if you want to have more than one text. Can you create a class (or nested classes) that keep track of all this?
❓ Bonus: if you create a class, can you keep track of each character ('p', 't', etc) as well as its points? Can you watch for the line break character (\n) and have the x/y positions change when it hits one?
SEE ALSO
💡 The opentype library: https://github.com/opentypejs/opentype.js
💡 And this rad demo of it: https://opentype.js.org
https://wn.com/Cp2_Text_To_Points_(The_Hard_Way)_–_Interactive_Typography
In the "easy way" version, we just drew text onscreen and used the color to determine if a letter was there. But what if we want the outline of text instead?
While p5.js does have a textToPoints() function built in (https://p5js.org/reference/#/p5.Font/textToPoints), it has limited capability, namely that it just gives you a big list of points and we don't have a way of knowing when one part of a letter begins and the next ends. But, being an open-source project, we can take a peek at the code for textToPoints() and make our own version! (You could also fork p5.js from Github and make modifications that way, even submit a change to the project!) The basics are pretty simple but the details get real gnarly.
There are still some limitations, the big one being that we don't have a good way to tell if a shape is the outside or a cutout, like we'd have in the letter 'o'. It also doesn't work with textAlign()... :(
👩💻 https://editor.p5js.org/jeffThompson/sketches/MxFTxdx_H
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
CHALLENGES
❓ Can you try other ways of displaying the letters? What about points or circles? Experiment with size and color to see how it changes the look
❓ The list of lists of lists gets a litte complicated, especially if you want to have more than one text. Can you create a class (or nested classes) that keep track of all this?
❓ Bonus: if you create a class, can you keep track of each character ('p', 't', etc) as well as its points? Can you watch for the line break character (\n) and have the x/y positions change when it hits one?
SEE ALSO
💡 The opentype library: https://github.com/opentypejs/opentype.js
💡 And this rad demo of it: https://opentype.js.org
- published: 12 Feb 2021
- views: 1106
11:13
CP2: Text to Points (the easy way) – Interactive Typography
What if we want to transform our text into different shapes? Or if we want the letters to have physics or other cool effects applied to them? There are a few wa...
What if we want to transform our text into different shapes? Or if we want the letters to have physics or other cool effects applied to them? There are a few ways we might approach this, but the easiest is to simply draw the text onscreen, then look at the pixels to see if a letter is present in a particular spot or not!
Inspired by "Aggregate Drawing" by Amnon Owed: https://github.com/AmnonOwed/CAN_GenerativeTypography/tree/master/Image-Based
👩💻 https://editor.p5js.org/jeffThompson/sketches/KcWbXgTP8
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
CHALLENGES
❓ Play with the parameters here and see how those changes affect the overall look and feel of the sketch! Try dot size, the shape that's drawn, and the amount of distortion as a starting point
❓ Can you make the shapes rotate as they distort too? Don't use circles though, duh :)
❓ Since randomSeed(0) keeps the randomness exactly the same, when the letters become spread out the result is always the same. Can you come up with a way to change that seed value when a certain condition is met?
SEE ALSO
💡 The next example (the "hard way") shows how to get points from the outline of a text!
https://wn.com/Cp2_Text_To_Points_(The_Easy_Way)_–_Interactive_Typography
What if we want to transform our text into different shapes? Or if we want the letters to have physics or other cool effects applied to them? There are a few ways we might approach this, but the easiest is to simply draw the text onscreen, then look at the pixels to see if a letter is present in a particular spot or not!
Inspired by "Aggregate Drawing" by Amnon Owed: https://github.com/AmnonOwed/CAN_GenerativeTypography/tree/master/Image-Based
👩💻 https://editor.p5js.org/jeffThompson/sketches/KcWbXgTP8
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
CHALLENGES
❓ Play with the parameters here and see how those changes affect the overall look and feel of the sketch! Try dot size, the shape that's drawn, and the amount of distortion as a starting point
❓ Can you make the shapes rotate as they distort too? Don't use circles though, duh :)
❓ Since randomSeed(0) keeps the randomness exactly the same, when the letters become spread out the result is always the same. Can you come up with a way to change that seed value when a certain condition is met?
SEE ALSO
💡 The next example (the "hard way") shows how to get points from the outline of a text!
- published: 12 Feb 2021
- views: 1393
27:40
CP2: Homework – Interactive Typography
Over the next two weeks, your assignment is to create a landing page for a brand's website, focusing on interactive typography. You'll need to think about styli...
Over the next two weeks, your assignment is to create a landing page for a brand's website, focusing on interactive typography. You'll need to think about stylistic choices in the context of a client-driven project and their brand (color, typefaces used, overall feel) but are also encouraged to creatively/wildly experiment. The goal here is something visually engaging and super awesome! Your choice of "brand" to work with is up to you: it can be a real company; one from film, television, fiction, comics, etc; an organization; or a person.
Typography and interaction should be the key focus here: think about fun, creative, experimental, weird, engaging ways to play with letters, their shapes, and words. What fonts best fit your project? What kinds of visuals and interactions best suit the brand you're working with? Should the colors be muted and the shapes geometric? Or look cartoony with bright colors? While typography should be the central part of the project, feel free to add visual elements that make your piece engaging. You're also welcome to create assets for your piece, including shapes (perhaps in Illustrator), sounds, etc.
We'll start with defining how the project's visuals should look, connecting them to the brand's existing identity (which you are welcome to push into new territory). This kind of ideation → presentation → refinement process is very common in client-based work and is another form of iterative development. After a round of feedback on your sketches, you'll turn one of those ideas into a finished project.
👩💻 https://github.com/jeffThompson/CreativeProgramming2/tree/master/Week01_InteractiveTypography
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
https://wn.com/Cp2_Homework_–_Interactive_Typography
Over the next two weeks, your assignment is to create a landing page for a brand's website, focusing on interactive typography. You'll need to think about stylistic choices in the context of a client-driven project and their brand (color, typefaces used, overall feel) but are also encouraged to creatively/wildly experiment. The goal here is something visually engaging and super awesome! Your choice of "brand" to work with is up to you: it can be a real company; one from film, television, fiction, comics, etc; an organization; or a person.
Typography and interaction should be the key focus here: think about fun, creative, experimental, weird, engaging ways to play with letters, their shapes, and words. What fonts best fit your project? What kinds of visuals and interactions best suit the brand you're working with? Should the colors be muted and the shapes geometric? Or look cartoony with bright colors? While typography should be the central part of the project, feel free to add visual elements that make your piece engaging. You're also welcome to create assets for your piece, including shapes (perhaps in Illustrator), sounds, etc.
We'll start with defining how the project's visuals should look, connecting them to the brand's existing identity (which you are welcome to push into new territory). This kind of ideation → presentation → refinement process is very common in client-based work and is another form of iterative development. After a round of feedback on your sketches, you'll turn one of those ideas into a finished project.
👩💻 https://github.com/jeffThompson/CreativeProgramming2/tree/master/Week01_InteractiveTypography
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
- published: 12 Feb 2021
- views: 1041
11:22
CP2: Text on Circle – Interactive Typography
While we use straight text in most cases, sometimes you want to make things a little more exciting! This example shows how to create text on a circle but comes ...
While we use straight text in most cases, sometimes you want to make things a little more exciting! This example shows how to create text on a circle but comes with a caveat: it doesn't maintain the fancy letter-spacing that we'd get with normal text (since kerning is ignored).
Circles are easy, more complex curves and other shapes will require a lot more math, so we'll skip that here :)
👩💻 https://editor.p5js.org/jeffThompson/sketches/Dzr4vexcc
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
CHALLENGES
❓ Can you have the letters change color as they go around the circle? (Hint: use lerpColor)
❓ Can you make this interactive by mapping the mouse position to startAngle and distanceAngle?
❓ Or can you make the entire circle rotate slowly? Or animate the radius changing over time?
https://wn.com/Cp2_Text_On_Circle_–_Interactive_Typography
While we use straight text in most cases, sometimes you want to make things a little more exciting! This example shows how to create text on a circle but comes with a caveat: it doesn't maintain the fancy letter-spacing that we'd get with normal text (since kerning is ignored).
Circles are easy, more complex curves and other shapes will require a lot more math, so we'll skip that here :)
👩💻 https://editor.p5js.org/jeffThompson/sketches/Dzr4vexcc
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
CHALLENGES
❓ Can you have the letters change color as they go around the circle? (Hint: use lerpColor)
❓ Can you make this interactive by mapping the mouse position to startAngle and distanceAngle?
❓ Or can you make the entire circle rotate slowly? Or animate the radius changing over time?
- published: 12 Feb 2021
- views: 803
18:22
CP2: Using an External Editor for p5.js – Interactive Typography
The p5.js online editor is awesome: it's a quick and easy way to start coding, it lets you share your projects easily, and it takes no effort to get it working....
The p5.js online editor is awesome: it's a quick and easy way to start coding, it lets you share your projects easily, and it takes no effort to get it working. But it has some serious limitations too: everything has to fit on one screen, no auto-complete or color themes, and upload limits. Using a code editor locally on your computer does take some extra work but is well worth the time. Finding a workflow that's right for you can be an endless rabbit hole and this is just one way of working, but if you're just transitioning from the online editor this should help you get started. Experiment and see what works for you!
👩💻 https://github.com/jeffThompson/CreativeProgramming2/blob/master/Resources/UsingAnExternalEditor.md
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
https://wn.com/Cp2_Using_An_External_Editor_For_P5.Js_–_Interactive_Typography
The p5.js online editor is awesome: it's a quick and easy way to start coding, it lets you share your projects easily, and it takes no effort to get it working. But it has some serious limitations too: everything has to fit on one screen, no auto-complete or color themes, and upload limits. Using a code editor locally on your computer does take some extra work but is well worth the time. Finding a workflow that's right for you can be an endless rabbit hole and this is just one way of working, but if you're just transitioning from the online editor this should help you get started. Experiment and see what works for you!
👩💻 https://github.com/jeffThompson/CreativeProgramming2/blob/master/Resources/UsingAnExternalEditor.md
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
- published: 12 Feb 2021
- views: 1064
10:26
CP2: Touch Input – Interactive Typography
Note: this demo won't work on a normal computer. Try it on a phone or tablet for the full effect, though you can see how the code works here.
One of the great ...
Note: this demo won't work on a normal computer. Try it on a phone or tablet for the full effect, though you can see how the code works here.
One of the great things about projects that run in the web browser is that they can run on tons of different devices, including phones and tablets! Javascript provides touch input on devices that have it and p5.js has made it super easy to access that data.
For most purposes, touch works just like the mouse: if you use mouseX/mouseY in your sketch and someone is on a phone, it will work just like a mouse. In fact, though p5.js provides some touch-related functions we almost never need them: mouse ones will capture both mouse and touch!
This sketch demonstrates the more advanced "touches" array, that allows us to see multiple fingers touching our sketch!
👩💻 https://editor.p5js.org/jeffThompson/sketches/ViTGkfhzd
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
NOTE ABOUT USABILITY
Ok, so this is super fun! But you don't want to design a sketch that doesn't work well for someone on a regular computer. Think about ways these interactions can be a bonus for folks but always default to the same kind of interaction. Plus, there really isn't a reliable way to know if someone is on a phone or a computer, so it's best not to worry about it.
SEE ALSO
💡 Lots more fun mobile stuff, like acceleration and even shake detection, here: https://p5js.org/reference/#group-Events
https://wn.com/Cp2_Touch_Input_–_Interactive_Typography
Note: this demo won't work on a normal computer. Try it on a phone or tablet for the full effect, though you can see how the code works here.
One of the great things about projects that run in the web browser is that they can run on tons of different devices, including phones and tablets! Javascript provides touch input on devices that have it and p5.js has made it super easy to access that data.
For most purposes, touch works just like the mouse: if you use mouseX/mouseY in your sketch and someone is on a phone, it will work just like a mouse. In fact, though p5.js provides some touch-related functions we almost never need them: mouse ones will capture both mouse and touch!
This sketch demonstrates the more advanced "touches" array, that allows us to see multiple fingers touching our sketch!
👩💻 https://editor.p5js.org/jeffThompson/sketches/ViTGkfhzd
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
NOTE ABOUT USABILITY
Ok, so this is super fun! But you don't want to design a sketch that doesn't work well for someone on a regular computer. Think about ways these interactions can be a bonus for folks but always default to the same kind of interaction. Plus, there really isn't a reliable way to know if someone is on a phone or a computer, so it's best not to worry about it.
SEE ALSO
💡 Lots more fun mobile stuff, like acceleration and even shake detection, here: https://p5js.org/reference/#group-Events
- published: 12 Feb 2021
- views: 486
11:55
CP2: Type as Images – Interactive Typography
There are times when dealing with type as letters and shapes can't get you the effect you're after. But, using a separate graphics object (like our canvas but n...
There are times when dealing with type as letters and shapes can't get you the effect you're after. But, using a separate graphics object (like our canvas but not displayed onscreen) means we can do some really fun, glitchy, playful stuff with our text!
For a "real-world" project, you'd probably want to create the tiles and save them to a folder instead of creating them every time the sketch gets run.
👩💻 https://editor.p5js.org/jeffThompson/sketches/SDn2TAskD
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
SEE ALSO
💡 This example on getting portions of an image: https://editor.p5js.org/jeffThompson/sketches/oLiww5UE9
💡 And this one about offscreen graphics: https://editor.p5js.org/jeffThompson/sketches/ObJgmj-2c
https://wn.com/Cp2_Type_As_Images_–_Interactive_Typography
There are times when dealing with type as letters and shapes can't get you the effect you're after. But, using a separate graphics object (like our canvas but not displayed onscreen) means we can do some really fun, glitchy, playful stuff with our text!
For a "real-world" project, you'd probably want to create the tiles and save them to a folder instead of creating them every time the sketch gets run.
👩💻 https://editor.p5js.org/jeffThompson/sketches/SDn2TAskD
ALL THE VIDEOS IN THIS UNIT
🎥 https://editor.p5js.org/jeffThompson/collections/XPqAUU6EI
SEE ALSO
💡 This example on getting portions of an image: https://editor.p5js.org/jeffThompson/sketches/oLiww5UE9
💡 And this one about offscreen graphics: https://editor.p5js.org/jeffThompson/sketches/ObJgmj-2c
- published: 12 Feb 2021
- views: 3131