- OPT #EAD
- 인천작업실
- Shena Ringo
- Skins
- raspberrypi wifi
- 시이나링고
- 라즈베리파이 와이파이
- 도쿄지헨
- 동경사변
- formex
- 4대 대첩
- 유학생 건강검진
- 東京事変
- 막달운동
- 이슬비침
- sony nex vg20
- wall display raspberrypi
- 파이월
- 라즈베리파이 모니터벽
- 월디스플레이
- Arduino
- 東京事變
- 세실내과
- 세운전자상가
- piwall
- IR sensor
- 러쉬 해외 직구
- formex E400
- 시온여성병원
- 흥성전기
- Today
- Total
'_'
api_p5.js 본문
API _ stands for Application Program Interface
JSON _ stands for JavaScript Object Notation
CVS _ stands for Comma Separated Value
- this tutorial shows how to reach api through an updated version of NYTimes. so adding url source code directly to html by using <script> tag. By this way, I can look through organized data at a console. But, in order to this way, you have to remove <script> tag calling .js file. check the actual code below.
- so, as a second method which allows me to follow Daniel Shiffman's tutorial which is using URL to grab data from it, simply by adding console.log(url); to inside script would give to URL at console box.
https://developers.google.com/speed/libraries/#jquery
- if you follow these steps, possibly end up getting some data pulled out from json. anyway one weird thig is this :
I kind of called headline of an article from js file as you can see below, using p5.js library & tutorial. all the code is declared at that area but for some reason, my console.log is showing correct info I called but, it is showing resource as p5.min.js. assume that because it is using p5.js library and function which is loadJSON(), but still don't get it.
oh I just figured it out! YEAH it was because I was using
print(data.response.docs[5].headline.main);
command which is for p5.js.
if I use
console.log(data.response.docs[5].headline.main);
instead, I will get my yellowDust.js file name appearing at console box.
- now in order to make these data appear, visualize, we need to convert it as <p> or <h1> or <li> et cetera et cetera etc.... and!!! important thing I found is that linking <script> addons/p5.min/js</script> and <script> addons/p5.min/js</script>, sequence matters critically. what I mean you can see below :
this is the one working, scripts listed in this order :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../addons/p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="yellowDust.js"></script>
p5.dom.min.js comes after p5.min.js. but if you switch those two line, p5.dom.js at the top, thigs break down.
actually not just breaking down, it stops reading after p5.dom.min.js. consloe.log window shows nothing comming after that script. so keep that sequence as default!
also as another troubleshooting, there is currently 3 issue ---
1) loading delay among setup > loadJSON
so this, eventhough I call some variable inside function, after calling it from setup, like this :
eventhough BGtemp was defined in gotWeather, when I check console there is several loop that maintains value 233 which should be updated or replaced by draw.
so because of this, I need to assign initial value at setup otherwise it will occur error.
2) some math --- related to .heading() function
so, when you have degree value, you can change it into radian value. like, 360 degree is combination of + PI (3.14) and - PI (-3.14). so
var angle = radians(Number(weather.current.wind_degree));
this is making degree measurement from API (220 for now :D ) into corresponding radian value between -3.14 ~ 3.14.
wind = p5.Vector.fromAngle(angle);
'자료용 > HTML_CSS_JAVASCRIPT' 카테고리의 다른 글
| clean up JS + PI wall + RaspberryPI (0) | 2018.10.30 |
|---|---|
| font family (0) | 2018.10.27 |
| image responding to window size (0) | 2018.05.13 |
| JavaScript_p5.js_array (0) | 2018.02.02 |
